sequel___style_reference:
  info: "> blackbox gallery, lit by cinema"

  theme: "dark"

  info: "Sequel operates as a cinematic dark-stage design system — a black canvas where content is lit like film subjects. The palette is 100% achromatic: pure black grounds every screen, warm off-white (#f5f5f0) acts as the rare contrast material, and white serves as the only signal color. Typography is editorial and oversized: a serif display face (Bradford) at 58–128px carries authority through weight rather than volume, while a geometric sans (VisueltPro) handles UI, body, and meta at whisper-light 300 weight. Components are deliberately few and generous: full-bleed imagery in 10px-rounded cards, pill-shaped controls at 9999px radius, and tight letter-spacing that compresses large headlines into sculptural forms. The whole system reads as a gallery, not a dashboard — content earns space, UI stays invisible."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, image backgrounds, text inversion panels |"
    info: "| Carbon | `#202020` | `--color-carbon` | Elevated surface layer, card backgrounds, modals |"
    info: "| Graphite | `#333333` | `--color-graphite` | Hairline borders, divider rules, badge outlines, subtle surface dividers |"
    info: "| Bone | `#c0c0c0` | `--color-bone` | Mid-neutral text, secondary metadata, icon strokes on dark |"
    info: "| Smoke | `#999999` | `--color-smoke` | Muted helper text, de-emphasized labels, disabled state |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Tertiary body text, captions over imagery |"
    info: "| Fog | `#cccccc` | `--color-fog` | Quaternary text, subtle dividers on light sections |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Primary headlines, body text, icon fills, pill button surface and text |"
    info: "| Linen | `#f5f5f0` | `--color-linen` | Warm off-white contrast surface — inverted panels, cream text on dark, button hover fill. Sits between pure white and black as the system's only warm neutral |"

  tokens___typography:

    visueltpro___primary_ui_and_body_face___navigation__buttons__body_copy__meta__badges__lists__weight_300_for_body_creates_the_system_s_anti_emphasis__text_whispers_rather_than_asserts__weight_500_reserved_for_nav_and_button_labels_where_legibility_at_small_sizes_matters_____font_visueltpro:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 30, 32"
      - "**Line height:** 1.20, 1.40, 1.50"
      - "**Letter spacing:** -0.020em to -0.050em at display, -0.020em at body, +0.030em to +0.080em for uppercase meta and badges"
      - "**Role:** Primary UI and body face — navigation, buttons, body copy, meta, badges, lists. Weight 300 for body creates the system's anti-emphasis: text whispers rather than asserts. Weight 500 reserved for nav and button labels where legibility at small sizes matters."

    bradford___editorial_display_serif_for_hero_and_section_headlines__carries_brand_authority_through_typographic_rarity___a_serif_in_a_sea_of_dark_sans_serif_saas__single_weight_500_with_tight_tracking_at__0_025em_to__0_050em_compresses_letterforms_into_sculptural_blocks__use_at_58px__only__below_that_the_system_falls_back_to_visueltpro_____font_bradford:
      - "**Substitute:** Tiempos Headline, Canela, GT Sectra"
      - "**Weights:** 500"
      - "**Sizes:** 32, 58, 128"
      - "**Line height:** 1.00, 1.20"
      - "**Letter spacing:** -0.0500em, -0.0250em"
      - "**Role:** Editorial display serif for hero and section headlines. Carries brand authority through typographic rarity — a serif in a sea of dark sans-serif SaaS. Single weight 500 with tight tracking at -0.025em to -0.050em compresses letterforms into sculptural blocks. Use at 58px+ only; below that the system falls back to VisueltPro."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.36px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 18px | 1.4 | -0.36px | `--text-body` |"
      info: "| subheading | 22px | 1.4 | -0.44px | `--text-subheading` |"
      info: "| heading | 32px | 1.2 | -1.6px | `--text-heading` |"
      info: "| heading-lg | 58px | 1.2 | -2.9px | `--text-heading-lg` |"
      info: "| display | 128px | 1 | -6.4px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 10px |"
      info: "| badges | 9999px |"
      info: "| images | 10px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255...` | `--shadow-xl` |"
      info: "| lg | `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px` | `--shadow-lg` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 96px"
      - "**Card padding:** 19px"
      - "**Element gap:** 16px"

  components:

    pill_primary_button:
      role: "Top-level call to action (e.g. 'Build the future')"

      info: "White fill #ffffff, black text #000000, border-radius 9999px, padding 16px 24px, VisueltPro 500 at 15px with -0.30px tracking. Drop shadow rgba(0,0,0,0.15) 0 4px 20px. No border. Text label includes trailing arrow glyph for directional affordance."

    pill_ghost_button:
      role: "Secondary action on dark canvas"

      info: "Transparent fill, 1px border #ffffff at 50% opacity, border-radius 9999px, padding 16px 24px, VisueltPro 500 at 15px in #ffffff. No shadow. Used where the primary button is already present and a quieter alternative is needed."

    pill_inverted_button:
      role: "Action on light or warm surface"

      info: "Linen #f5f5f0 fill, black text, 9999px radius, 16px 24px padding. Functions as the warm-surface counterpart to the Pill Primary Button."

    editorial_image_card:
      role: "Large content card for features, categories, or portfolio entries"

      info: "Full-bleed photograph fills the card, 10px border-radius, no border, no internal padding around the image. Headline and meta overlay the bottom of the image in white. Multi-layer shadow: rgba(0,0,0,0.35) 0 10px 30px outer + rgba(255,255,255,0.08) 0 1px 0 inset top edge to catch light."

    pill_category_badge:
      role: "Taxonomy tag floating over image cards"

      info: "Surface rgba(255,255,255,0.08) with inset white highlight rgba(255,255,255,0.08) 0 1px 0 inset, text VisueltPro 500 at 10–11px in white, uppercase, letter-spacing +0.08em, border-radius 9999px, padding 5px 11px. Sits top-right or top-left of an Editorial Image Card."

    centered_headline_block:
      role: "Section opener for marketing pages"

      info: "Single line or two-line headline in Bradford 500 at 58–128px, color #ffffff, letter-spacing -2.9px to -6.4px, line-height 1.0–1.2, text-align center. Followed by no subtitle in many cases — the line stands alone against the void."

    sticky_top_navigation:
      role: "Global site navigation"

      info: "Transparent on #000000 canvas, no visible background fill. Logo 'sequel' lowercase + three vertical bars mark in white at left, Pill Ghost or text button at right. Height ~64px, no border-bottom, content padded 20px horizontal."

    body_text_block:
      role: "Supporting paragraph copy under headlines or in cards"

      info: "VisueltPro 300 at 15–18px, line-height 1.5, color #c0c0c0 for secondary or #999999 for tertiary. Never uses weight above 400 for body — the system reserves visual weight for headlines and buttons."

    full_bleed_hero_image:
      role: "Atmospheric opening visual"

      info: "Edge-to-edge photograph or cinematic still at 16:9 or 21:9, no border-radius, no border. Dark scenes with a single warm light source — the page's signature is a glowing subject in a void. Optional text overlay or headline positioned bottom-left or centered."

    two_column_feature_pair:
      role: "Side-by-side content blocks (e.g. Founders / Athletes cards)"

      two_editorial_image_cards_in_a_1: "1 grid, separated by 16–24px horizontal gap. Cards share equal height, text inside each card aligns bottom-left, badges align top-right of each card."

    logo_lockup:
      role: "Brand mark in nav and footer"

      info: "Wordmark 'sequel' in VisueltPro 400 at ~20px, lowercase, #ffffff, followed by three thin vertical bars of equal height in white — acts as a stylized 'III' or progress indicator. No icon, no symbol, no color."

    inverted_light_panel:
      role: "Section that breaks the dark rhythm with warm contrast"

      info: "Full-width band with #f5f5f0 background, black #000000 text, 10px corner radius only if contained (usually full-bleed). Headlines in Bradford or VisueltPro dark, buttons in dark-on-linen style. Use sparingly — one per page maximum to preserve impact."

  do_s_and_don_ts:

    do:
      - "Use Bradford at 58px or larger for editorial headlines; fall back to VisueltPro 500 at 30–54px for sub-headlines."
      - "Set all buttons to 9999px radius with 16px vertical / 24px horizontal padding."
      - "Reserve #f5f5f0 (Linen) for inverted sections and contrast panels — never mix it into a dark card."
      - "Use VisueltPro weight 300 for all body and supporting copy; reserve 500 exclusively for nav, buttons, and badges."
      - "Apply letter-spacing between -0.020em and -0.050em on all display and body text; widen to +0.030em to +0.080em only on uppercase badges and meta."
      - "Make Editorial Image Cards full-bleed with 10px radius and the multi-layer shadow (outer dark drop + inset top white highlight)."
      - "Keep the system 100% achromatic — white, grays, black, and the single warm off-white. No chromatic accents."

    don_t:
      - "Do not introduce any hue — no blues, greens, reds, or purples. The 0% colorfulness is the brand."
      - "Do not use border-radius between 1px and 9px on cards, or between 1px and 9998px on buttons. The radii are binary: 10px for cards, 9999px for pills."
      - "Do not use VisueltPro weight 400 for body copy — weight 300 is the system's anti-volume signature. Weight 400 is reserved for the logo lockup."
      - "Do not place headline text on a light background without switching to #000000 — the system inverts cleanly, never tints."
      - "Do not add drop shadows to text, navigation, or static content. Shadows are reserved for image cards and floating buttons only."
      - "Do not use color borders or colored icon fills — all strokes are white, black, or grayscale."
      - "Do not break the 1280px max-width with full-bleed decorative gradients or color bands — the canvas must stay at #000000."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void | `#000000` | Base page canvas — every section defaults here |"
    info: "| 2 | Carbon | `#202020` | Raised cards, modals, image overlay scrims |"
    info: "| 3 | Graphite | `#333333` | Border-defined surfaces, badge outlines, subtle elevation via border rather than shadow |"
    info: "| 4 | Linen | `#f5f5f0` | Inverted warm panel — the system's contrast surface for callouts and inverted buttons |"

  elevation:

    - "**Card with image:** `rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset`"
    - "**Floating action button:** `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px`"

  imagery:

    info: "Photography is the primary visual language and it is consistently cinematic: dark, moody, high-contrast scenes with a single warm light source acting as the focal point. Subjects are framed tight — a face lit by window light, a glass-walled room glowing in a void, a studio with a single lamp. No lifestyle, no stock, no staged corporate imagery. Color treatment is always desaturated or near-monochrome, reinforcing the achromatic UI. Images are presented full-bleed at 10px corner radius, and often carry a single line of headline text directly overlaid on the photograph. Icons are not a major element; the wordmark and a three-bar mark handle all symbolic identity. No illustrations, no 3D renders, no product UI screenshots — the brand tells its story through portraiture and architectural photography only."

  layout:

    info: "Single-column centered layout constrained to a 1280px max-width, with sections separated by ~96px of vertical breathing room. The hero is a full-bleed cinematic image with a centered or bottom-left Bradford headline overlaid; it occupies the full first viewport. Below the fold, content flows in alternating centered stacks and two-column image-card pairs. Text is always centered horizontally, headlines are single-line, and supporting copy is constrained to a narrow measure (~560px) and centered under the headline. Navigation is a minimal sticky top bar with a left logo and a single right-aligned pill button — no menu items, no mega-menu, no sidebar. Sections are separated by generous negative space rather than dividers or color bands. The 2-column card grid (e.g. Founders + Athletes) repeats as the primary content unit below the hero."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff (primary), #c0c0c0 (secondary), #999999 (muted)"
    - "background: #000000 (canvas), #202020 (elevated), #f5f5f0 (inverted panel)"
    - "border: #333333 (hairline), #ffffff at 50% (ghost button)"
    - "accent: none — the system is fully achromatic"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:

    - "**Build a centered editorial headline block**: Full viewport section on #000000 canvas. Headline in Bradford 500, 128px, line-height 1.0, letter-spacing -6.4px, color #ffffff, text-align center. No subtitle, no button — the line stands alone."

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Build an Editorial Image Card with badge**: Container 10px border-radius, multi-layer shadow rgba(0,0,0,0.35) 0 10px 30px outer + rgba(255,255,255,0.08) 0 1px 0 inset. Full-bleed photograph inside, no internal padding around image. Top-right badge: rgba(255,255,255,0.08) surface, 9999px radius, 5px 11px padding, VisueltPro 500 10px uppercase white with +0.08em tracking. Bottom-left headline overlay: VisueltPro 500, 22px, #ffffff, -0.44px tracking."

    - "**Build a Sticky Top Navigation**: Transparent background over #000000, height 64px, padding 0 20px horizontal, flex row, justify-between. Left: 'sequel' wordmark in VisueltPro 400 20px lowercase #ffffff followed by three 2px-wide white vertical bars 14px tall. Right: Pill Ghost Button — transparent fill, 1px #ffffff 50% border, 9999px radius, 16px 24px padding, VisueltPro 500 15px #ffffff label."

    - "**Build an Inverted Light Panel**: Full-bleed section, background #f5f5f0, centered content max-width 720px. Headline in Bradford 500, 58px, line-height 1.2, letter-spacing -2.9px, color #000000. Body paragraph VisueltPro 300, 16px, line-height 1.5, color #333333. Pill Inverted Button below: #f5f5f0 fill, #000000 text, 9999px radius, 16px 24px padding."

  similar_brands:

    - "**Khosla Ventures** — Same black-canvas editorial style with full-bleed cinematic photography and oversized serif headlines; both treat the homepage as a gallery rather than a dashboard."
    - "**Founders Fund** — Minimalist dark-mode site with large editorial typography and almost no chromatic color; both rely on photography and wordplay to carry brand voice."
    - "**Apple Vision Pro** — Full-bleed moody photography with centered oversized headlines and pill-shaped CTAs on a pure-black canvas; both use 100% achromatic palettes to let imagery do the talking."
    - "**A24** — Cinematic dark aesthetic with serif display type, minimal UI chrome, and imagery that bleeds edge-to-edge at near-zero border-radius."
    - "**Linear** — Pill button shapes, weight-300 body typography, and dark surface stack (#000 → #202020 → #333) with the same hairline border language."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #202020;
          --color-graphite: #333333;
          --color-bone: #c0c0c0;
          --color-smoke: #999999;
          --color-ash: #b3b3b3;
          --color-fog: #cccccc;
          --color-chalk: #ffffff;
          --color-linen: #f5f5f0;
        
          /* Typography — Font Families */
          --font-visueltpro: 'VisueltPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bradford: 'Bradford', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 18px;
          --leading-body: 1.4;
          --tracking-body: -0.36px;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.44px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -1.6px;
          --text-heading-lg: 58px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -2.9px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -6.4px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 96px;
          --card-padding: 19px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-badges: 9999px;
          --radius-images: 10px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
          --shadow-lg: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-carbon: #202020;
          --surface-graphite: #333333;
          --surface-linen: #f5f5f0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #202020;
          --color-graphite: #333333;
          --color-bone: #c0c0c0;
          --color-smoke: #999999;
          --color-ash: #b3b3b3;
          --color-fog: #cccccc;
          --color-chalk: #ffffff;
          --color-linen: #f5f5f0;
        
          /* Typography */
          --font-visueltpro: 'VisueltPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bradford: 'Bradford', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 18px;
          --leading-body: 1.4;
          --tracking-body: -0.36px;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.44px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -1.6px;
          --text-heading-lg: 58px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -2.9px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -6.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
          --shadow-lg: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
        }