krea___style_reference:
  info: "> noir gallery at midnight"

  theme: "dark"

  info: "Krea operates as a cinematic monochrome stage: pure black canvases, surgically tight Suisse Intl type, and zero chromatic noise compete for attention with the AI-generated imagery itself. The interface dissolves into atmosphere — the product floats on darkness rather than sitting on a surface. Buttons toggle between white-fill and ghost-outline pills, never introducing color. Typography does all the heavy lifting: compressed display weights at 96px/72px pull the eye down into the page, while sub-1.0 line-heights on heroes create an almost film-credit density. Spacing is generous but never airy — 80–96px section gaps with 12–20px element rhythm keeps things composed, not floaty."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary page background, hero canvas, image void — the default stage everything sits on |"
    info: "| Midnight | `#0b0f15` | `--color-midnight` | Hero ambient and large image containers — a near-black with the faintest blue undertone that keeps the void from looking flat |"
    info: "| Charcoal | `#171717` | `--color-charcoal` | Elevated card surfaces, hover state for ghost buttons, secondary panels that need to lift off Obsidian |"
    info: "| Graphite | `#262626` | `--color-graphite` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Iron | `#404040` | `--color-iron` | Muted body text, inactive icon strokes, decorative dividers in dense blocks |"
    info: "| Slate | `#525252` | `--color-slate` | Secondary supporting text, caption-level annotations, tertiary iconography |"
    info: "| Ash | `#737373` | `--color-ash` | Tertiary text, helper copy, less-prominent metadata |"
    info: "| Fog | `#a3a3a3` | `--color-fog` | Secondary body text and sub-labels that still need readability over dark surfaces |"
    info: "| Pearl | `#d4d4d5` | `--color-pearl` | Hairline borders, subtle stroke dividers, ghost button outlines |"
    info: "| Mist | `#e5e5e5` | `--color-mist` | Light divider lines on dark surfaces where higher contrast isn't needed |"
    info: "| Cloud | `#f5f5f5` | `--color-cloud` | Light surface reserved for inverted sections or content blocks that demand brightness |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"

  tokens___typography:

    suisse_intl___the_only_typeface_in_the_system__used_for_every_interface_element__nav__body__buttons__hero__pricing__footer__display_weights_500_600_at_48_96px_with_aggressive__0_025em_tracking_create_the_compressed__cinematic_headline_feel__the_unusual_450_weight_handles_editorial_body_emphasis_without_crossing_into_semibold_territory_____font_suisse_intl:
      - "**Substitute:** Inter (closest free analogue, same Swiss grotesque DNA), or Söhne / Neue Haas Grotesk if licensed"
      - "**Weights:** 400, 450, 500, 600, 700"
      - "**Sizes:** 12, 13, 14, 15, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** Tight at display: -0.025em (96px → -2.4px), -0.015em at 48px (-0.72px), near-normal at body (0), opens to +0.01em at small sizes, and +0.10em for uppercase eyebrow/label tracking"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on, \"cv11\" on`"
      - "**Role:** The only typeface in the system. Used for every interface element: nav, body, buttons, hero, pricing, footer. Display weights 500–600 at 48–96px with aggressive -0.025em tracking create the compressed, cinematic headline feel; the unusual 450 weight handles editorial body emphasis without crossing into semibold territory."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | 0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading-sm | 20px | 1.38 | -0.3px | `--text-subheading-sm` |"
      info: "| subheading | 24px | 1.33 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.2 | -0.54px | `--text-heading-sm` |"
      info: "| heading-md | 48px | 1.11 | -1.2px | `--text-heading-md` |"
      info: "| heading | 60px | 1.05 | -1.5px | `--text-heading` |"
      info: "| heading-lg | 72px | 1 | -1.8px | `--text-heading-lg` |"
      info: "| display | 96px | 1 | -2.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: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 108 | 108px | `--spacing-108` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"
      info: "| largeSurfaces | 14-32px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 1px 6px 0px` | `--shadow-sm` |"
      info: "| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-2` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.2) 0px 9px 8px 0px, rgba(0, 0, 0, 0.2) 0p...` | `--shadow-sm-2` |"

    layout:

      - "**Section gap:** 80-96px"
      - "**Card padding:** 24-32px"
      - "**Element gap:** 12-20px"

  components:

    primary_cta_button:
      role: "Hero and header conversion — the system’s only light source"

      info: "Pill-shaped (9999px), Pure White (#ffffff) fill, Obsidian (#000000) text in Suisse Intl weight 500 15px, 10px 20px padding, subtle 0 1px 2px rgba(0,0,0,0.05) shadow. The single highest-contrast element on the page."

    ghost_cta_button:
      role: "Secondary action paired with primary CTA"

      info: "Pill-shaped (9999px), transparent fill with Pearl (#d4d4d5) 1px border, Fog (#a3a3a3) text, Suisse Intl 500 15px, 10px 20px padding. Hovers to Charcoal (#171717) fill with white text."

    navigation_link:
      role: "Top-bar menu items and inline anchors"

      info: "Suisse Intl 400 14px, Fog (#a3a3a3) text, no underline, 0px letter-spacing. Active/hover state: Pure White (#ffffff). 20px horizontal gap between items."

    auth_pill_sign_up:
      role: "Header right-side conversion in ghost-white style"

      info: "Pill (9999px), Pure White (#ffffff) fill, 8px 16px padding, 13px Suisse Intl 500, Obsidian text. Smaller scale than hero CTA — sits inline in nav without overwhelming."

    log_in_text_link:
      role: "Tertiary header action"

      info: "Ghost-styled link, no border, Fog text 13px weight 500, hovers to white. Sits inline with zero chrome."

    hero_headline_block:
      role: "First-screen attention grabber"

      info: "Centered, max-width ~900px, Suisse Intl 500 at 60–72px, white text, line-height 1.05, letter-spacing -0.025em. Followed by a single 16–18px Fog subtitle with no italic or secondary color."

    feature_card:
      role: "Mid-page capability or product-mode blocks"

      info: "Charcoal (#171717) fill, 8px radius, 24–32px padding, no border, no shadow. Internal hierarchy: 20–24px white heading, 14–15px Fog body, 16px gap between elements. Optional full-bleed screenshot or preview at top with 8px radius."

    pricing_tier_card:
      role: "Plan comparison block"

      info: "Charcoal fill, 14px radius (slightly more generous than feature cards to signal importance), 32px padding, 1px Iron (#404040) border on non-featured tiers. Featured tier: white border (#ffffff) or Pure White fill inversion. Tier name 20px weight 500, price 48px weight 500 with -0.025em tracking, feature list 14px Fog with 10px row gap."

    text_input_field:
      role: "Form input for email collection, settings, generation prompts"

      info: "8px radius, Charcoal (#171717) fill, 1px Iron (#404040) border, 12px 16px padding, 15px Suisse Intl 400 white text. Placeholder: Ash (#737373). Focus: border shifts to Pearl (#d4d4d5), no glow ring."

    eyebrow_label___tag:
      role: "Section labels, category tags, status indicators"

      info: "Suisse Intl 500 12px, uppercase, letter-spacing +0.10em (0.12px in spec, applied as ~0.012em in CSS), Fog (#a3a3a3) or Ash color. Optional pill background: Charcoal fill with 9999px radius and 4px 10px padding."

    footer_block:
      role: "Bottom-of-page navigation and legal"

      info: "Full-width Obsidian background, top 1px Iron (#404040) divider, 80px top padding, 40px bottom. Column headings: 14px weight 500 white. Links: 14px weight 400 Fog, 12px row gap. Logo and copyright at 13px Ash."

    product_monitor_mockup:
      role: "Hero visual showing the product in context"

      info: "Realistic device frame (monitor or browser chrome) with rounded edges, 8–14px radius on the frame, 2px Iron border, the dual-layer drop shadow `0px 9px 8px rgba(0,0,0,0.2), 0px 6px 4px -1px rgba(0,0,0,0.2)` to seat it in the void. Interior displays the actual app UI."

    mode_tabs_image___video___upscaler___api:
      role: "Top-level navigation between product modes"

      info: "Horizontal row of text links, 14–15px weight 500, 20px gaps. Active tab: Pure White with 1px white underline 2px below. Inactive: Fog. No pill backgrounds — pure typographic distinction."

  do_s_and_don_ts:

    do:
      - "Use Pure White (#ffffff) for the single primary CTA on any given view — never introduce a second light-colored button"
      - "Set display text at 48–96px Suisse Intl 500 with -0.025em tracking and line-height 1.0–1.11"
      - "Reserve Charcoal (#171717) for surfaces that need to lift off Obsidian, and add 1px Iron borders only when a card sits on a near-identical tone"
      - "Use 9999px radius for every button, tag, and pill; 8px for inputs and small cards; 14–32px for large feature surfaces"
      - "Maintain 80–96px gaps between major sections and 12–20px between sibling elements"
      - "Default to uppercase +0.10em tracking at 12px weight 500 for any eyebrow, section label, or category tag"
      - "Let the product imagery own the page — surround AI-generated visuals with maximum dark negative space rather than decorative chrome"

    don_t:
      - "Never introduce a chromatic accent color — the system is intentionally 0% colorfulness; adding red, blue, or green would break the noir-gallery identity"
      - "Don't use 8px radius on buttons — they are exclusively 9999px pills"
      - "Don't use shadows on cards or feature blocks — elevation comes from surface tone, not blur"
      - "Don't use italic, underline, or colored inline links — links are weight or color shifts only (Fog → White)"
      - "Don't set body text below 14px or above 16px without a typographic reason (captions go to 12px uppercase only)"
      - "Don't use line-height above 1.5 for body — Suisse Intl is calibrated for tighter vertical rhythm on dark surfaces"
      - "Don't place light surfaces (#f5f5f5, #e5e5e5) as page backgrounds — they are reserved for content blocks inside an inverted section, never as full-page canvas"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Obsidian | `#000000` | Base page canvas — the default background of every screen |"
    info: "| 1 | Midnight | `#0b0f15` | Hero and image-dominant sections that need the faintest lift from pure black |"
    info: "| 2 | Charcoal | `#171717` | Card and panel surfaces that read as objects floating on the void |"
    info: "| 3 | Graphite | `#262626` | Hovered/active interactive surfaces and the most lifted elevated state |"

  elevation:

    - "**Ghost/Outline Button:** `0px 1px 6px rgba(0, 0, 0, 0.1)`"
    - "**Filled Primary Button:** `0px 1px 2px rgba(0, 0, 0, 0.05)`"
    - "**Hero Product Mockup:** `0px 9px 8px rgba(0, 0, 0, 0.2), 0px 6px 4px -1px rgba(0, 0, 0, 0.2)`"

  imagery:

    info: "The visual language is product-imagery-dominant: AI-generated artwork, realistic device mockups, and atmospheric full-bleed photographs (desk, monitor, dark room scenes) carry the page. There are no illustrations, no icons beyond utilitarian UI glyphs (arrows, chevrons, menu), and no abstract decorative graphics. Product screenshots appear inside realistic device frames — monitors, browser windows — rendered with deep drop shadows to feel like physical objects on a dark desk. Photography is high-contrast and dark/moody: wood textures, low-key lighting, near-black environments with a single light source. The user-generated AI imagery (which Krea helps create) is the visual hero whenever it appears, treated full-bleed or in generous 14–32px-radius containers with no overlaid UI chrome. The overall effect: a portfolio gallery where the user's creative output is the only thing worth illuminating."

  layout:

    info: "Full-bleed dark canvas with no page-max-width container — content blocks center themselves within the viewport rather than inside a fixed column. The hero is centered text-over-image: a large headline (60–72px) above a single 16–18px subtitle and a paired CTA cluster, all floating over a full-bleed dark photographic background. Below the hero, sections stack vertically with 80–96px gaps, alternating between pure Obsidian (#000000) canvas and slightly lifted Charcoal (#171717) bands that use tone rather than dividers to separate content. Feature sections follow a 2-column alternating text-left/image-right or centered-stacks pattern, never asymmetric/editorial. Pricing and capability grids are clean 2–3 column arrangements with equal card weights. Navigation is a single top bar — no sidebar, no mega-menu, no sticky doubling — with the logo at far left, menu items center, and dual CTA at far right. Density is comfortable: sections breathe, but inside each section the typography stays tight and the element rhythm is 12–20px, never airy."

  agent_prompt_guide:

    quick_color_reference:

    - "text: #ffffff (primary), #a3a3a3 (secondary), #737373 (tertiary)"
    - "background: #000000 (canvas), #171717 (card), #262626 (elevated)"
    - "border: #d4d4d5 (hairline), #404040 (subtle), #737373 (visible)"
    - "accent: none — the system is fully achromatic; Pure White IS the accent"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."
    - "**Ghost Button**: Pill (9999px), transparent fill, 1px #d4d4d5 border, #a3a3a3 text 15px weight 500, hovers to #171717 fill + white text."
    - "**Hero Headline**: Centered, 60–72px Suisse Intl 500, white, line-height 1.05, letter-spacing -0.025em. Below: 16–18px #a3a3a3 subtitle with no decoration."
    - "**Feature Card**: #171717 fill, 8px radius, 28–32px padding, no border, no shadow. 20px weight 500 white heading + 14px #a3a3a3 body with 16px gap."
    - "**Eyebrow Label**: 12px Suisse Intl 500 uppercase, letter-spacing +0.10em, color #a3a3a3, 0px below 16–24px display heading."

  similar_brands:

    - "**Midjourney** — Same monochromatic noir canvas with zero UI color, AI-generated imagery as the visual hero, centered display type, pill-shaped CTAs"
    - "**Linear** — Same dark-first, tight-tracked Swiss grotesque typography, flat surface tone elevation, minimal shadow reliance, white-fill + ghost-outline button pairing"
    - "**Runway** — AI creative tool aesthetic — full-bleed dark hero, product mockup as centerpiece, monochrome palette, cinematic atmosphere over UI density"
    - "**Vercel** — Premium dark surface treatment, generous section gaps, compressed display type with negative tracking, pure white as the only accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-midnight: #0b0f15;
          --color-charcoal: #171717;
          --color-graphite: #262626;
          --color-iron: #404040;
          --color-slate: #525252;
          --color-ash: #737373;
          --color-fog: #a3a3a3;
          --color-pearl: #d4d4d5;
          --color-mist: #e5e5e5;
          --color-cloud: #f5f5f5;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading-sm: 20px;
          --leading-subheading-sm: 1.38;
          --tracking-subheading-sm: -0.3px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.54px;
          --text-heading-md: 48px;
          --leading-heading-md: 1.11;
          --tracking-heading-md: -1.2px;
          --text-heading: 60px;
          --leading-heading: 1.05;
          --tracking-heading: -1.5px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.8px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -2.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* 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-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-108: 108px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Layout */
          --section-gap: 80-96px;
          --card-padding: 24-32px;
          --element-gap: 12-20px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
          --radius-largesurfaces: 14-32px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 9px 8px 0px, rgba(0, 0, 0, 0.2) 0px 6px 4px -1px;
        
          /* Surfaces */
          --surface-obsidian: #000000;
          --surface-midnight: #0b0f15;
          --surface-charcoal: #171717;
          --surface-graphite: #262626;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-midnight: #0b0f15;
          --color-charcoal: #171717;
          --color-graphite: #262626;
          --color-iron: #404040;
          --color-slate: #525252;
          --color-ash: #737373;
          --color-fog: #a3a3a3;
          --color-pearl: #d4d4d5;
          --color-mist: #e5e5e5;
          --color-cloud: #f5f5f5;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading-sm: 20px;
          --leading-subheading-sm: 1.38;
          --tracking-subheading-sm: -0.3px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.54px;
          --text-heading-md: 48px;
          --leading-heading-md: 1.11;
          --tracking-heading-md: -1.2px;
          --text-heading: 60px;
          --leading-heading: 1.05;
          --tracking-heading: -1.5px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.8px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -2.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-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-108: 108px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 9px 8px 0px, rgba(0, 0, 0, 0.2) 0px 6px 4px -1px;
        }