status___style_reference:
  info: "> encrypted vault behind midnight glass — a dark security console where the only color is a single violet signal lamp"

  theme: "dark"

  info: "Status presents an encrypted-vault aesthetic: a near-black canvas (#09101c) with steel-toned borders and elevated slate surfaces that read as private infrastructure rather than consumer app. Color is rationed tightly — Status Violet (#7140fd) owns brand identity moments while Signal Blue (#2a4af5) carries the only filled action, and everything else stays in an achromatic 95% palette. Inter handles every typographic role, with display 88px headlines tracking at -0.021em that feel engineered rather than set. Comfortable 4px-based rhythm, 20-24px card radii, and 12px pill-shaped controls create a deliberate, security-first surface language. Product mockups (wallet, messenger) are the primary visual content — the device IS the hero, not lifestyle photography."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#09101c` | `--color-midnight-ink` | Page canvas, card backgrounds, primary surface — the near-black base that absorbs everything else |"
    info: "| Slate Depth | `#131d2f` | `--color-slate-depth` | Elevated surface for buttons and interactive containers, one step above the canvas |"
    info: "| Steel Edge | `#1b273d` | `--color-steel-edge` | Primary border color, link underlines, nav separators — defines structural edges at very high frequency |"
    info: "| Graphite Plate | `#3a4049` | `--color-graphite-plate` | Secondary card surface, subtle elevation tier above Midnight Ink |"
    info: "| Slate Mist | `#647084` | `--color-slate-mist` | Muted body text, helper copy, secondary labels — readable but recessive |"
    info: "| Ash Light | `#a1abbd` | `--color-ash-light` | Icon fills, tertiary text, nav inactive states — the lightest non-white neutral |"
    info: "| Pale Mist | `#dce0e5` | `--color-pale-mist` | Light-section borders, hairline dividers, outlines on light backgrounds |"
    info: "| Cloud | `#f0f2f5` | `--color-cloud` | Lightest neutral border, soft dividers in light sections |"
    info: "| Paper | `#ffffff` | `--color-paper` | Light-section canvas, primary text on dark, inverted surface — dual-role neutral |"
    info: "| Signal Blue | `#2a4af5` | `--color-signal-blue` | Primary action fill, brand-action emphasis — the only saturated button color, single violet-blue signal against the dark canvas |"
    info: "| Status Violet | `#7140fd` | `--color-status-violet` | Violet text accent for links, tags, and emphasized short phrases |"
    info: "| Deep Teal | `linear-gradient(78deg, rgb(42, 121, 155) -30%, rgb(246, 176, 60) 8%, rgb(255, 51, 163) 98%)` | `--color-deep-teal` | Accent hue in gradient washes, illustrative moments, secondary brand color in art; Brand gradient wash for decorative sections, hero accents, and section backgrounds |"
    info: "| Amber Glow | `#f6b03c` | `--color-amber-glow` | Warm accent in gradient compositions and illustrative highlights — the yellow stop in tri-color gradients |"

  tokens___typography:

    inter___sole_typeface_across_every_role__inter_is_chosen_for_its_monospace_adjacent_neutrality___it_doesn_t_compete_with_the_device_mockups_that_dominate_the_page__the_aggressive_negative_tracking_on_display_sizes__0_021em_at_88px_tightens_headlines_into_dense_blocks_of_type_that_feel_machined_rather_than_editorial__weight_500_is_the_workhorse_for_ui__700_is_reserved_for_primary_headlines_and_emphasis__no_serif__no_display_face___the_system_is_deliberately_sans_only_and_mono_personality_____font_inter:
      - "**Substitute:** Inter (Google Fonts), fallback: system-ui, -apple-system, sans-serif"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 11px, 13px, 15px, 16px, 19px, 27px, 64px, 88px"
      - "**Line height:** 0.95, 1.06, 1.19, 1.40, 1.42, 1.45, 1.47, 1.50"
      - "**Letter spacing:** -0.0210em at 88px display, -0.0200em at 64px, -0.0160em at 27px, -0.0090em at 19px, -0.0050em at 15-16px body, -0.0030em at 11-13px caption"
      - "**Role:** Sole typeface across every role. Inter is chosen for its monospace-adjacent neutrality — it doesn't compete with the device mockups that dominate the page. The aggressive negative tracking on display sizes (-0.021em at 88px) tightens headlines into dense blocks of type that feel machined rather than editorial. Weight 500 is the workhorse for UI; 700 is reserved for primary headlines and emphasis. No serif, no display face — the system is deliberately sans-only and mono-personality."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 16 | -0.03px | `--text-caption` |"
      info: "| body-md | 16px | 23.5 | -0.08px | `--text-body-md` |"
      info: "| subheading | 19px | 26.6 | -0.17px | `--text-subheading` |"
      info: "| heading-sm | 27px | 32.1 | -0.43px | `--text-heading-sm` |"
      info: "| heading | 64px | 67.8 | -1.28px | `--text-heading` |"
      info: "| display | 88px | 83.6 | -1.85px | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| pills | 9999px |"
      info: "| images | 24px |"
      info: "| buttons | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(9, 16, 28, 0.08) 0px 4px 20px 0px` | `--shadow-lg` |"
      info: "| lg-2 | `rgba(9, 16, 28, 0.04) 0px 2px 20px 0px` | `--shadow-lg-2` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8-16px"

  components:

    download_cta_button_filled:
      role: "Primary download action for desktop and mobile platforms"

      info: "Filled button with Signal Blue (#2a4af5) background, white text, 12px radius, 8-16px padding. Contains platform icon (Apple/Windows/Android) left of label. Weight 500, 15px text."

    download_cta_button_outlined:
      role: "Secondary download action, ghost variant"

      info: "Transparent background with 1px Steel Edge (#1b273d) border on dark surfaces or Pale Mist (#dce0e5) on light surfaces. 12px radius, 8-16px padding, 15px weight 500 text. Platform icon left of label."

    pill_tag:
      role: "Category labels, section markers, product tags"

      info: "Full-pill radius (9999px), 4-8px vertical padding, 12px horizontal padding. 13px weight 500 text. Background: Slate Depth (#131d2f) on dark, Cloud (#f0f2f5) on light. Text: Ash Light (#a1abbd) or Signal Blue (#2a4af5) for active."

    top_announcement_banner:
      role: "Site-wide promotional/announcement bar"

      info: "Full-width strip at top of page, Paper (#ffffff) background, 88% opacity overlay. 13px centered text with embedded link styled as underlined. Fixed/sticky positioning."

    navigation_bar:
      role: "Primary site navigation"

      info: "Transparent on hero, Midnight Ink (#09101c) on scroll. Logo left, nav links center (15px weight 500, Steel Edge color for inactive, Paper for active), download buttons right. 1px Steel Edge bottom border. Height ~64px."

    feature_card:
      role: "Grid item in 'Built different' feature sections"

      info: "3-column grid card on light Paper (#ffffff) background. No visible card surface — flat layout with generous 40px row gap. Icon at top (32-40px, full color or Status Violet), 27px weight 600 heading, 15px weight 400 body in Slate Mist (#647084)."

    product_showcase_card:
      role: "Device mockup containers — phone, tablet, desktop wallet UI"

      info: "Screenshot/device mockup on Midnight Ink canvas, 20-24px radius, subtle shadow rgba(9,16,28,0.08) 0px 4px 20px. Mockups maintain aspect ratio, often overlapping with float effect."

    onramp_info_card:
      role: "Payment method information callout"

      info: "Light section card with Cloud (#f0f2f5) background, 20px radius, 16-24px padding. Contains heading + body + payment method icon row (Visa, Mastercard, Apple Pay, Google Pay at 32px)."

    wallet_asset_list_item:
      role: "Individual asset row in wallet interface preview"

      info: "Horizontal row, 16px vertical padding, Paper background. Token icon (colored circle, 32-40px) left, token name + balance center, fiat value right. Hairline Steel Edge (#1b273d) bottom border."

    section_divider:
      role: "Visual separation between major page sections"

      info: "No hard line — sections flow with background color transitions (dark to light to dark). Where needed, 1px Steel Edge (#1b273d) horizontal line with 40-80px vertical margin."

    link_text:
      role: "Inline links, nav items, footer links"

      info: "15px weight 500, Steel Edge (#1b273d) default on dark surfaces, Pale Mist (#dce0e5) on light. 1px underline at offset 4px. Hover: Signal Blue (#2a4af5) or Paper (#ffffff) with no underline shift."

    decorative_gradient_orb:
      role: "Background atmospheric gradient in hero/section backgrounds"

      info: "Large radial gradient (300-600px) positioned absolutely, 70% transparency to transparent. Colors cycle through Status Violet (#7140fd), Signal Blue (#2a4af5), Deep Teal (#2a799b), and Amber Glow (#f6b03c). Creates depth without imagery."

  do_s_and_don_ts:

    do:
      - "Use Inter for all text — no secondary typefaces, no serif, no display face"
      - "Set display headlines at 88px with -1.85px letter-spacing and 0.95 line-height for tight, machined blocks of type"
      - "Reserve Signal Blue (#2a4af5) exclusively for filled primary actions — never use it for decoration, icons, or text emphasis"
      - "Apply 12px radius to all buttons, 20px to cards, 9999px to tags and pills"
      - "Build the surface stack as Midnight Ink (#09101c) → Slate Depth (#131d2f) → Graphite Plate (#3a4049) for elevation"
      - "Use device mockups as the primary visual content — the product UI carries the page, not photography"
      - "Alternate dark and light sections with 80px gaps to create breathing rhythm across the page"

    don_t:
      - "Don't use Status Violet (#7140fd) for buttons, links, or actions — it is brand-identity only (logo, gradients, decorative moments)"
      - "Don't introduce shadows stronger than rgba(9,16,28,0.08) 0px 4px 20px — the system avoids heavy elevation"
      - "Don't use lifestyle photography, stock imagery, or contextual scenes — device mockups and abstract gradients only"
      - "Don't set body text above 16px or below 13px — the 15-16px range is the readable sweet spot"
      - "Don't apply gradients to text — gradients are atmospheric backgrounds only"
      - "Don't use saturated colors for icons in feature grids unless they represent a specific brand token (crypto symbol, etc.)"
      - "Don't mix light and dark within a single section — section background must be uniform, transitions happen at section boundaries"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Midnight Ink | `#09101c` | Base page canvas, the near-black foundation of all dark sections |"
    info: "| 1 | Slate Depth | `#131d2f` | First elevation tier — buttons, interactive containers, subtle card lift |"
    info: "| 2 | Graphite Plate | `#3a4049` | Second elevation tier — card surfaces that need to read as lifted from the canvas |"
    info: "| 3 | Paper | `#ffffff` | Inverted surface for light feature sections, maximum contrast moment |"

  elevation:

    - "**Card (Product Showcase):** `rgba(9, 16, 28, 0.08) 0px 4px 20px 0px`"
    - "**Link (Hover/Focus):** `rgba(9, 16, 28, 0.04) 0px 2px 20px 0px`"

  imagery:

    product_first_visual_language: "device mockups (phone, tablet, desktop) showing the Status wallet and messenger UI are the dominant imagery. The device IS the hero — no lifestyle photography, no people, no contextual scenes. Illustrations are expressive and surreal (e.g., a hand reaching through space for floating crypto coins) in a flat, line-art style with full color fills. Icons in feature grids are small (32-40px), flat, and multicolored — each representing a concept (security shield, megaphone, gift box). Background atmosphere comes from large radial gradient orbs in brand colors. No stock photography anywhere."

  layout:

    info: "Max-width 1200px centered container with 24px horizontal padding. Hero is full-bleed dark with centered text-left headline (88px display) and right-aligned device mockup that extends partially beyond the container. The page alternates between dark sections (#09101c) and light sections (#ffffff) with generous 80px vertical gaps. Feature sections use a 3-column grid with 40px gaps on light backgrounds. Product showcase sections are 2-column (text left, mockup right) with asymmetric device sizing. Navigation is a fixed top bar that transitions from transparent to Midnight Ink on scroll. The rhythm is: dark hero → light features → dark product → light features → dark illustration footer."

  agent_prompt_guide:

    primary_action: "#2a4af5 (filled action)"
    create_a_primary_action_button: "#2a4af5 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

  similar_brands:

    - "**Phantom** — Same dark canvas + single violet/blue action accent + device mockup hero approach for crypto wallet identity"
    - "**Rainbow Wallet** — Dark-mode product UI with gradient atmospheric backgrounds and device-first hero compositions"
    - "**MetaMask** — Deep-near-black canvas, orange/violet brand accent, and product-mockup-dominant visual language for web3 audience"
    - "**Element (Matrix)** — Encrypted-messaging aesthetic with midnight canvas, steel borders, and deliberate security-infrastructure surface language"
    - "**Linear** — Same 4px-based comfortable spacing rhythm, pill-shaped controls, and tight Inter type scale at all sizes"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #09101c;
          --color-slate-depth: #131d2f;
          --color-steel-edge: #1b273d;
          --color-graphite-plate: #3a4049;
          --color-slate-mist: #647084;
          --color-ash-light: #a1abbd;
          --color-pale-mist: #dce0e5;
          --color-cloud: #f0f2f5;
          --color-paper: #ffffff;
          --color-signal-blue: #2a4af5;
          --color-status-violet: #7140fd;
          --color-deep-teal: #2a799b;
          --gradient-deep-teal: linear-gradient(78deg, rgb(42, 121, 155) -30%, rgb(246, 176, 60) 8%, rgb(255, 51, 163) 98%);
          --color-amber-glow: #f6b03c;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 16;
          --tracking-caption: -0.03px;
          --text-body-md: 16px;
          --leading-body-md: 23.5;
          --tracking-body-md: -0.08px;
          --text-subheading: 19px;
          --leading-subheading: 26.6;
          --tracking-subheading: -0.17px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 32.1;
          --tracking-heading-sm: -0.43px;
          --text-heading: 64px;
          --leading-heading: 67.8;
          --tracking-heading: -1.28px;
          --text-display: 88px;
          --leading-display: 83.6;
          --tracking-display: -1.85px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-48: 48px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-pills: 9999px;
          --radius-images: 24px;
          --radius-buttons: 12px;
        
          /* Shadows */
          --shadow-lg: rgba(9, 16, 28, 0.08) 0px 4px 20px 0px;
          --shadow-lg-2: rgba(9, 16, 28, 0.04) 0px 2px 20px 0px;
        
          /* Surfaces */
          --surface-midnight-ink: #09101c;
          --surface-slate-depth: #131d2f;
          --surface-graphite-plate: #3a4049;
          --surface-paper: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #09101c;
          --color-slate-depth: #131d2f;
          --color-steel-edge: #1b273d;
          --color-graphite-plate: #3a4049;
          --color-slate-mist: #647084;
          --color-ash-light: #a1abbd;
          --color-pale-mist: #dce0e5;
          --color-cloud: #f0f2f5;
          --color-paper: #ffffff;
          --color-signal-blue: #2a4af5;
          --color-status-violet: #7140fd;
          --color-deep-teal: #2a799b;
          --color-amber-glow: #f6b03c;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 16;
          --tracking-caption: -0.03px;
          --text-body-md: 16px;
          --leading-body-md: 23.5;
          --tracking-body-md: -0.08px;
          --text-subheading: 19px;
          --leading-subheading: 26.6;
          --tracking-subheading: -0.17px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 32.1;
          --tracking-heading-sm: -0.43px;
          --text-heading: 64px;
          --leading-heading: 67.8;
          --tracking-heading: -1.28px;
          --text-display: 88px;
          --leading-display: 83.6;
          --tracking-display: -1.85px;
        
          /* 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-48: 48px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-lg: rgba(9, 16, 28, 0.08) 0px 4px 20px 0px;
          --shadow-lg-2: rgba(9, 16, 28, 0.04) 0px 2px 20px 0px;
        }