OpusJake

Overview

OpusJake is a personal knowledge and resource platform for AI builders, presented through a retro-computing aesthetic that evokes 1990s Macintosh and early web design. The brand serves practitioners who want practical, battle-tested AI workflows without marketing fluff—builders, operators, and consultants seeking real implementation guides. The visual language combines nostalgic computing UI (beige bezels, pixel art, system fonts) with modern interaction patterns, creating a 'Retro-Futurism' aesthetic that makes complex AI concepts feel approachable and grounded. The emotional response is one of playful competence: the retro frame signals "this is real, lived experience" while the bright accent color (#4b4aef) and smooth interactions convey forward momentum. Voice: direct, practical, slightly irreverent. Vocabulary leans on technical terms (agents, workflows, prompts, agentic systems) without jargon gatekeeping. Example sentence: "Boot up and explore—most weeks you'll find a new prompt pack with the exact issue that shipped with it."

Colors

The color system balances a warm, neutral canvas with a vivid violet accent that commands attention. Primary (#4b4aef) is the signature accent used on all call-to-action buttons, focus states, and interactive highlights—it appears in the hero CTA 'browse resources' and throughout modals and form interactions. The palette draws from retro computing: a warm beige surface (#fafaf7) with subtle grain texture (radial-gradient at 22px and 7px intervals), supporting neutrals in the purple-gray family (#8f8cb8, #bdbbd6, #504e78), and a tertiary beige accent (#e7e0c6) used for section cards and container backgrounds. Surface stack follows Material 3 conventions: surface-container-lowest (#f6f5fb) for modal backgrounds, surface-container (#e7e0c6) for card fills, and surface-container-highest (#cfc7

Typography

The type system pairs humanist sans-serif (Satoshi for headlines) with monospace (SF Mono, JetBrains Mono) for UI labels and code-like elements, reinforcing the builder identity. Display and headline-lg use Satoshi at 60px and 42px respectively with tight negative letter-spacing (-0.04em, -0.02em) to create visual impact and hierarchy. Body copy uses Instrument Sans at 14.5px–18px with 0.01em letter-spacing and 1.6 line-height for readability over the textured background. Labels and UI text use SF Mono at 9.5px–10.5px with 0.18em–0.22em letter-spacing (uppercase, small-caps effect) to evoke system UI and command-line interfaces. On small labels over busy backgrounds or modals, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. The monospace stack prioritizes SF Mono firs

Layout

The page uses a fixed-height scroll track (560vh on desktop, 360vh on mobile) with a fixed canvas that responds to scroll progress, creating a choreographed narrative experience. The container max-width is 1280px; section cards are positioned absolutely within a 12-column grid, with widths clamped between 420px and 600px depending on viewport (clamp(420px, 40vw, 600px)). Horizontal padding uses 5vw clamped to 24px–96px, ensuring consistent gutters on mobile and desktop. Section spacing follows a rhythm: 'grow' at 170vh, 'connect' at 300vh, 'scale' at 400vh, 'footer' at 474vh, and 'brand' at 540vh—each card enters before the previous one fully exits, maintaining visual continuity. White-space is generous: 32px padding inside cards (win-body), 18px margin between stacked cards, 16px gaps in

Elevation & Depth

Depth is conveyed through layered inset and outset shadows that evoke physical depth and material surfaces. Level 1 (Base): the body background with subtle radial-gradient grain (rgba(80, 78, 120, 0.045) at 1px, 22px intervals) creates texture without visual noise. Level 2 (Standard Card): inset 0 1px 1px rgba(255, 255, 255, 0.85) creates a beveled, embossed effect reminiscent of 90s UI, paired with 1px solid border at rgba(80, 78, 120, 0.14). Level 3 (Elevated/Modal): box-shadow: 0 30px 60px -20px rgba(20, 18, 80, 0.45) combined with backdrop-filter: blur(8px) and -webkit-backdrop-filter: blu

Shapes

The shape philosophy is 'Retro-Technical Precision': sharp corners (2px, 6px) for inputs and small UI elements evoke early computer interfaces, while softer radii (12px–16px) on cards and buttons feel contemporary and approachable. Buttons use border-radius: 9999px (full pill shape) to signal interactivity and soften the retro aesthetic. Input fields use 2px for a crisp, utilitarian appearance. Cards use 6px–8px for a balanced, slightly rounded look that's neither harsh nor overly soft. Modal dialogs use 12px to feel elevated and distinct from the page. The rationale: sharp corners ground the

Components

Action Elements Buttons are the primary interaction surface. Primary buttons (button-primary) use {colors.primary} (#4b4aef) background with white text, 12px vertical / 24px horizontal padding, 44px height, and full pill shape (border-radius: 9999px). Hover state escalates shadow from 0 4px 12px to 0 6px 16px rgba(75, 74, 239, 0.35) and shifts background to {colors.primary-fixed-dim} (#3a39d6). Active state applies transform: scale(0.98) and reduces shadow to 0 2px 8px. Transition timing is 0.12s ease for color/shadow, 0.28s cubic-bezier for transform. Secondary buttons use transparent background with 1px border at {colors.outline-variant}, text color {colors.on-surface}, and hover to {colors.surface-container-high}. All buttons use {typography.label-md} (SF Mono, 10.5px, 600 weight, 0

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4b4aef) exclusively for CTAs, focus rings, and active states—it's the signature accent and must never be diluted or overused on passive elements.
• Do apply the inset shadow (0 1px 1px rgba(255, 255, 255, 0.85)) to all card and button surfaces to maintain the embossed, retro-computing aesthetic.
• Do use SF Mono or JetBrains Mono for all UI labels, form captions, and step indicators—never substitute with sans-serif for these elements.
• Do maintain the 22px / 7px radial-gradient grain texture on the body background; it's subtle but essential to the retro-computing feel.
• Do use full pill-shaped buttons (border-radius: 9999px) for primary CTAs and moderate 6px–8px radii for cards to balance retro sharpness with modern approachability.
• Do apply backdrop-filter: blur(8px) to modal overlays and include -webkit-backdrop-filter for Safari compatibility.
• Do use letter-spacing: 0.22em on uppercase UI labels to create the command-line / system UI effect that reinforces the builder identity.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or passive UI elements—reserve it exclusively for interactive, clickable surfaces.
• Don't apply rounded corners larger than 16px (xl) to any component; the design relies on a mix of sharp (2px) and moderate (6px–12px) radii.
• Don't substitute Satoshi with other serif or sans-serif fonts for headlines; it's the brand typeface and must remain consistent.
• Don't remove or reduce the grain texture on the background; it's a core part of the retro-computing aesthetic and prevents the page from feeling flat.
• Don't use box-shadow values larger than 0 30px 60px for modals; anything larger breaks the intimate, contained feeling of the interface.
• Don't apply transitions longer than 0.55s for any interaction; the design favors snappy, responsive feedback (0.12s–0.28s is the sweet spot).
• Don't use opacity or transparency on text; always use solid {colors.on-surface} or {colors.on-surface-variant} for legibility over the textured background.