safepal___style_reference:
  info: "> Electric violet cosmos with mint stars. SafPal lives in a deep indigo night where the only warmth is a neon mint accent and a single violet that burns like a signal flare."

  theme: "dark"

  info: "SafePal speaks in a cosmic violet vernacular: deep indigo canvases recede into atmospheric space while mint-green punctuation snaps focus back to the surface. The visual system rides on a vivid electric violet (#4a21ef) that saturates mid-page sections, paired with a luminous mint (#79efbd) that functions as the sole chromatic accent for headings, tags, and outlined action borders. Typography is monumental and assertive — the display headline at 80px with weight 800 demands ownership of the viewport, while body copy sits at a calm 16px. The 100px pill radius on buttons is the most recognizable shape signature, creating a soft contrast against the 24px card radius and the angular isometric illustrations of hardware wallets and phones that float in deep space. Surfaces stack from white cards over violet fields, with almost no shadows — depth is communicated through color contrast and illustrative floating elements rather than elevation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Violet | `linear-gradient(154.24deg, rgb(191, 255, 228) 11.19%, rgb(74, 33, 239) 62.38%)` | `--color-signal-violet` | Page backgrounds, section bands, gradient anchor — the dominant chromatic field that defines brand presence across mid-page sections; Hero atmospheric gradient bridging mint into violet — sets the cosmic mood |"
    info: "| Mint Pulse | `#79efbd` | `--color-mint-pulse` | Headline text on violet fields, outlined action borders, pill button fills, accent highlights — the sole warm punctuation against the cool violet |"
    info: "| Terminal Green | `#18d26e` | `--color-terminal-green` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color |"
    info: "| Deep Indigo | `linear-gradient(124.15deg, rgb(13, 11, 51) 0%, rgb(75, 62, 211) 218.07%)` | `--color-deep-indigo` | Hero background, darkest surface layer, text on light surfaces, gradient terminus; Dark section backgrounds, depth gradient behind illustrations |"
    info: "| Carbon | `#1d1d1d` | `--color-carbon` | Body text, heading text on light surfaces, high-contrast typography color |"
    info: "| Lavender Mist | `#f7f6ff` | `--color-lavender-mist` | Light card surfaces, subtle tints, nav backgrounds, gentle surface lift over white |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, text on dark backgrounds, footer surfaces, badge fills |"
    info: "| Steel Gray | `#666666` | `--color-steel-gray` | Muted body text, secondary labels, dividers, icon strokes at rest |"

  tokens___typography:

    alibabapuhuiti_2___all_interface_text___custom_geometric_sans_with_extreme_weight_range__display_uses_800_for_assertive_headlines__body_sits_at_400_with_comfortable_1_5__line_height__the_137px_size_enables_wall_scale_hero_typography__heavy_weights_800_1000_are_used_sparingly_to_avoid_visual_fatigue_____font_alibabapuhuiti_2:
      - "**Substitute:** Inter, DM Sans, or Poppins at matching weights"
      - "**Weights:** 400, 700, 800, 900, 1000"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 32px, 48px, 80px, 137px"
      - "**Line height:** 1.00–1.60"
      - "**Role:** All interface text — custom geometric sans with extreme weight range. Display uses 800 for assertive headlines; body sits at 400 with comfortable 1.5+ line-height. The 137px size enables wall-scale hero typography. Heavy weights (800–1000) are used sparingly to avoid visual fatigue."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.57 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.5 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 48px | 1.17 | — | `--text-heading-lg` |"
      info: "| display | 80px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 180 | 180px | `--spacing-180` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 24px |"
      info: "| other | 48px |"
      info: "| buttons | 100px |"

    layout:

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

  components:

    pill_primary_button:
      role: "Main call-to-action"

      info: "Fully rounded 100px radius, mint (#79efbd) fill, Deep Indigo (#0d0b33) text, weight 700, 16px size, 12px 24px padding. The pill shape is the most recognizable interaction element."

    pill_ghost_button:
      role: "Secondary or navigation action"

      info: "100px radius, transparent or white fill, mint (#79efbd) border at 1-2px, white or mint text. Used for download CTAs in nav."

    hero_headline:
      role: "Display-level section heading"

      info: "80px size, weight 800, white or Deep Indigo text depending on field, line-height 1.0. Sets the monumental, ownership-staking tone of the brand."

    section_heading:
      role: "Mid-page section title"

      info: "48px size, weight 800, white text on violet or mint text on dark. Centered alignment with generous above-spacing."

    wallet_card:
      role: "Product showcase card"

      info: "24px radius, white (#ffffff) fill, no visible shadow, 24px padding. Contains product imagery with floating illustration treatment."

    testimonial_card:
      role: "Social proof card"

      info: "24px radius, white fill, 24-32px padding, no border, no shadow. Contains quote text, avatar circle, and attribution with role label."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent over hero, white surface on scroll. 12px radius on dropdown elements. Logo left, links centered, language selector and pill download button right."

    announcement_bar:
      role: "Site-wide news strip"

      info: "Violet (#4a21ef) fill, white text, centered, thin height. Link text underlined with mint accent."

    isometric_illustration_set:
      role: "Decorative hero and section visuals"

      info: "Angular isometric renders of hardware wallets, phones, and crypto objects. Deep indigo outlines with mint and white fills. Float in space at varied scales with no ground plane."

    feature_card:
      role: "Product feature highlight"

      info: "24px radius, lavender (#f7f6ff) or white fill, generous padding, icon at top, heading + body text below. Minimal decoration."

    badge_tag:
      role: "Category or status label"

      info: "Pill or 12px radius, mint fill with dark text, small 12px size, 4-8px padding. Used for token tags and status indicators."

    footer_surface:
      role: "Bottom site navigation"

      info: "White or dark surface, multi-column link grid, logo, social icons. Generous 48-64px padding top and bottom."

  do_s_and_don_ts:

    do:
      - "Use 100px border-radius on all buttons and tags — the pill shape is the system's most recognizable signature"
      - "Set hero headlines at 80px weight 800 in white over Deep Indigo (#0d0b33) or mint (#79efbd) over violet — never dilute the display weight below 700"
      - "Use #4a21ef as the dominant mid-page section background — let violet breathe across large vertical bands rather than appearing as small accents"
      - "Pair mint (#79efbd) exclusively as accent text or outlined actions on violet fields — mint should never appear on white surfaces as a fill"
      - "Maintain 80-113px between major sections to preserve the cosmic spaciousness — dense stacking breaks the atmospheric rhythm"
      - "Use isometric illustrations of wallet hardware and phones as floating objects in space, not grounded product shots"
      - "Keep all surfaces shadowless — communicate depth through color contrast and illustration layering only"
      - "Center-align section headings and hero text — asymmetric layouts break the poster-like clarity"

    don_t:
      - "Never use #4a21ef as a small accent — it must dominate sections or not appear"
      - "Do not apply drop shadows to cards or buttons — the system is flat by design"
      - "Avoid body text below 14px — the scale starts at 12px for captions only"
      - "Never use the mint (#79efbd) as a large background fill for content sections — reserve it for accents and pill buttons"
      - "Do not mix multiple gradient directions in one screen — each gradient should anchor one atmospheric moment"
      - "Avoid outlined rectangular buttons — all interactive elements must use 100px pill radius"
      - "Do not place white text on #f7f6ff — the contrast fails at that combination"
      - "Never use weight 400 for headlines — the system demands 700+ for any heading level"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cosmic Canvas | `#0d0b33` | Hero and dark section base — deepest surface |"
    info: "| 1 | Signal Field | `#4a21ef` | Primary brand section backgrounds — mid-page bands |"
    info: "| 2 | Mint Accent | `#79efbd` | Highlight surfaces, pill button fills, accent zones |"
    info: "| 3 | Lavender Lift | `#f7f6ff` | Subtle card tint over white |"
    info: "| 4 | Paper | `#ffffff` | Top-level card and content surfaces |"

  elevation:

    info: "Elevation is communicated through color contrast and floating isometric illustrations rather than drop shadows. Surfaces separate by hue and saturation step — white cards sit on violet fields, mint pills sit on indigo — with no visible shadow stacks. This flat-elevation approach keeps the visual system graphic and poster-like."

  imagery:

    info: "Illustration-driven with strong isometric perspective. Hardware wallets, smartphones, and crypto coins are rendered as angular 3D objects with deep indigo outlines, white faces, and mint-green accent details. Objects float in space without ground planes, scattered at varied scales and rotations. No photography of people or environments. The treatment is graphic-poster style — think vector illustration meets product render. Sparkle marks and small star shapes add cosmic atmosphere around larger objects. Decorative purple gradient orbs appear behind some compositions to add depth."

  layout:

    info: "Full-bleed sections with no max-width constraint on backgrounds — only text and content containers are constrained to ~1200px. Hero is dark with centered headline over isometric illustration cluster. Mid-page sections alternate between solid violet (#4a21ef) bands and lighter treatments with centered headings. Card grids are 3-column for testimonials and product showcases, with generous gutters (24-32px). Navigation is a fixed top bar with transparent-on-hero behavior. Sections flow seamlessly with no visible dividers — transitions are marked by color field changes. Content rhythm is spacious: 80-113px between sections creates breathing room for the cosmic atmosphere."

  agent_prompt_guide:

  quick_color_reference:
    - "background (dark): #0d0b33"
    - "background (brand): #4a21ef"
    - "surface (light): #ffffff"
    - "accent/text on violet: #79efbd"
    - "body text: #1d1d1d"
    - "primary action: #79efbd (filled action)"

  example_component_prompts:

    - "**Hero Section**: Full-bleed Deep Indigo (#0d0b33) background. Centered headline at 80px AlibabaPuHuiTi-2 weight 800 in white, line-height 1.0. Subtext at 18px weight 400 in #79efbd. Floating isometric illustration of a hardware wallet and phone below the headline. 80-113px vertical padding."

    - "**Pill Outline Button**: 100px border-radius, transparent fill, 2px #79efbd border, #79efbd text, 16px size weight 700, 12px 24px padding. Used for download or secondary actions."

    - "**Violet Section Banner**: Full-bleed #4a21ef background, 113px vertical padding. Centered section heading at 48px weight 800 in white. Centered body text at 16px weight 400 in white with 0.8 opacity. 3-column card grid below with white cards at 24px radius and 24px padding."

    - "**Testimonial Card**: White (#ffffff) fill, 24px border-radius, 32px padding, no shadow. Quote text at 16px weight 400 in #1d1d1d. Attribution block at bottom with 40px circular avatar, name in 14px weight 700 #1d1d1d, role in 14px weight 400 #666666."

    - "**Navigation Bar**: Transparent background over hero, 12px radius on dropdown elements. Logo left (white), nav links centered in 16px weight 400 white, language globe icon + 'English' label, and a ghost pill button (100px radius, white border, white text) on the far right."

  similar_brands:

    - "**Ledger** — Same dark cosmic crypto-wallet visual language with hardware product illustrations and a single brand color dominating sections"
    - "**Phantom Wallet** — Similar violet-and-dark crypto branding with pill-shaped CTAs and bold display headlines"
    - "**Trust Wallet** — Dark hero sections with floating 3D product illustrations and vibrant gradient transitions"
    - "**MetaMask** — Crypto product showcase style with monochromatic hero and illustration-driven product pages"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-violet: #4a21ef;
          --gradient-signal-violet: linear-gradient(154.24deg, rgb(191, 255, 228) 11.19%, rgb(74, 33, 239) 62.38%);
          --color-mint-pulse: #79efbd;
          --color-terminal-green: #18d26e;
          --color-deep-indigo: #0d0b33;
          --gradient-deep-indigo: linear-gradient(124.15deg, rgb(13, 11, 51) 0%, rgb(75, 62, 211) 218.07%);
          --color-carbon: #1d1d1d;
          --color-lavender-mist: #f7f6ff;
          --color-paper-white: #ffffff;
          --color-steel-gray: #666666;
        
          /* Typography — Font Families */
          --font-alibabapuhuiti-2: 'AlibabaPuHuiTi-2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.17;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
          --font-weight-black: 900;
          --font-weight-w1000: 1000;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-160: 160px;
          --spacing-180: 180px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-113px;
          --card-padding: 24px;
          --element-gap: 12-16px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 24px;
          --radius-other: 48px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-cosmic-canvas: #0d0b33;
          --surface-signal-field: #4a21ef;
          --surface-mint-accent: #79efbd;
          --surface-lavender-lift: #f7f6ff;
          --surface-paper: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-violet: #4a21ef;
          --color-mint-pulse: #79efbd;
          --color-terminal-green: #18d26e;
          --color-deep-indigo: #0d0b33;
          --color-carbon: #1d1d1d;
          --color-lavender-mist: #f7f6ff;
          --color-paper-white: #ffffff;
          --color-steel-gray: #666666;
        
          /* Typography */
          --font-alibabapuhuiti-2: 'AlibabaPuHuiTi-2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.5;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.17;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-160: 160px;
          --spacing-180: 180px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        }