arcadia___style_reference:
  info: "> forest observatory at dawn — deep evergreen authority on warm cream paper, one mint LED accent and pale violet data orbs suspended in soft morning light."

  theme: "light"

  info: "Arcadia is a clean-energy observatory rendered in warm light: an off-white cream canvas with deep forest-green authority, one electric-mint accent that switches actions on like an LED, and violet used sparingly for decorative data-orb highlights. The system feels measured and considered — DM Sans at restrained weights, generous 24-40px breathing room, and a 16px radius that rounds corners enough to feel modern but not playful. Hero sections dissolve into ultra-soft sage-to-cream gradients, and product surfaces are flat white with thin sage borders rather than shadowed cards. Decorative moments — floating orb networks, isometric energy illustrations, bar charts — carry the visual interest, while the interface itself stays quiet, editorial, and high-trust."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canopy | `#104336` | `--color-canopy` | Primary brand — announcement bar, nav strip, primary CTA fill, section borders. The deep evergreen reads as institutional and environmental at once: it is the only saturated color the interface wears as a uniform, giving every page an authoritative dark-green header band |"
    info: "| Mint Pulse | `#0fff87` | `--color-mint-pulse` | Accent / secondary action — vivid electric-mint button fill, eyebrow label text, decorative highlights. Against the forest-green chrome, mint reads as a switched-on LED; use it only where the UI needs to feel powered or selected |"
    info: "| Orb Violet | `#7c18d3` | `--color-orb-violet` | Decorative data accent — floating sphere fills, chart highlights, illustrated node markers. Violet is the only non-green chromatic and appears only on ornamental 3D orbs and chart accents, never on controls |"
    info: "| Cream Paper | `#f3f1ec` | `--color-cream-paper` | Canvas / soft surface — primary page background on hero and section bands. Slightly warm so the page never reads as sterile white |"
    info: "| Sheet White | `#ffffff` | `--color-sheet-white` | Card and elevated surface — product cards, dashboard mockups, nav bar. Stacked on Cream Paper to create a one-step surface lift without shadows |"
    info: "| Bark | `#101f1e` | `--color-bark` | Body text and high-contrast headings — a near-black with the faintest green cast that ties the text to the brand forest |"
    info: "| Ink | `#000000` | `--color-ink` | Maximum-contrast heading color — used for the largest display headlines where pure black is needed for presence |"
    info: "| Slate | `#535e5d` | `--color-slate` | Secondary body text, muted labels, card sub-copy. Cool gray-green that sits one step down from Bark |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Dark UI text, footer copy, dense secondary lines |"
    info: "| Sage Mist | `#afc4bf` | `--color-sage-mist` | Hairline borders and dividers — card outlines, rule lines, table separators. The desaturated sage reads as an extension of the brand greens without competing with them |"
    info: "| Pale Sage | `#c2cec8` | `--color-pale-sage` | Lighter border for inputs and subtle separators |"
    info: "| Muted Slate | `#798281` | `--color-muted-slate` | Tertiary text, helper copy, disabled link states |"
    info: "| Hero Wash | `linear-gradient(212.12deg, #afc4bf 14.83%, #e8e7f5 52.99%, #f1eee9 79.47%)` | `--color-hero-wash` | Mid-stop of hero gradient — pale lavender bridging sage to cream |"

  tokens___typography:

    dm_sans___sole_brand_typeface__weight_300_carries_display_headlines_48_56px___the_light_stroke_weight_is_the_signature_restraint__headlines_feel_confident_without_shouting__weight_400_holds_all_body_and_ui_labels__weight_500_is_used_for_sub_headlines_and_stat_values__weight_700_is_reserved_for_short_uppercase_eyebrow_labels_e_g___how_we_deliver_results___enterprise_solutions__which_get__0_07em_tracking_to_function_as_section_punctuation__the_same_family_at_all_sizes_keeps_the_typographic_voice_uniform_across_10px_micro_copy_and_56px_display_____font_dm_sans:
      - "**Substitute:** Inter, Söhne, or General Sans"
      - "**Weights:** 300, 400, 500, 700"
      - "**Sizes:** 10, 13, 14, 15, 16, 18, 20, 24, 36, 48, 56"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** -0.02em at 48-56px display; 0.01em at 18-24px sub-headlines; 0.07em at 13-14px uppercase eyebrows"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Role:** Sole brand typeface. Weight 300 carries display headlines (48-56px) — the light stroke weight is the signature restraint: headlines feel confident without shouting. Weight 400 holds all body and UI labels. Weight 500 is used for sub-headlines and stat values. Weight 700 is reserved for short uppercase eyebrow labels (e.g. 'HOW WE DELIVER RESULTS', 'ENTERPRISE SOLUTIONS') which get +0.07em tracking to function as section punctuation. The same family at all sizes keeps the typographic voice uniform across 10px micro-copy and 56px display."

    helvetica___helvetica___detected_in_extracted_data_but_not_described_by_ai____font_helvetica:
      - "**Weights:** 400, 700"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Role:** Helvetica — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.2 | 0.07px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.29 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | 0.01px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.15 | -0.02px | `--text-heading` |"
      info: "| display | 56px | 1.1 | -0.02px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| pills | 9999px |"
      info: "| inputs | 4px |"
      info: "| buttons | 8px |"

    layout:

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

  components:

    announcement_bar:
      role: "Top-of-page system message"

      info: "Full-bleed Canopy (#104336) band, 8-12px vertical padding, centered white DM Sans 13-14px weight 400, optional right-arrow link. Used for acquisitions, events, releases."

    top_navigation:
      role: "Primary site nav"

      info: "Sheet White background, 64-72px height, Arcadia wordmark left in Canopy (#104336), DM Sans 14-15px weight 400 nav items with caret dropdowns, Sign in as ghost button, Request demo as filled Canopy CTA (8px radius, 15-16px vertical / 24px horizontal padding, white text). Sticky on scroll."

    primary_cta_button:
      role: "Filled action"

      info: "Canopy (#104336) background, white text, DM Sans 14-15px weight 500, 8px radius, 15-16px vertical and 24px horizontal padding. Single solid block — no gradient, no shadow."

    mint_accent_button:
      role: "High-attention action"

      info: "Mint Pulse (#0fff87) background, Bark (#101f1e) text, 8px radius, same padding as primary. Reserved for the single most important action on a hero or in a featured card."

    ghost___outlined_button:
      role: "Secondary action"

      info: "Transparent background, 1px Canopy or Sheet White border, brand-color text, 8px radius, same padding as primary. Used for Sign in, secondary nav, cancel actions."

    eyebrow_label:
      role: "Section super-heading"

      info: "DM Sans 13px weight 700, 0.07em letter-spacing, uppercase. Color is either Canopy, Mint Pulse, or Orb Violet depending on section. Functions as a 1-word or 3-word punctuation above each major heading."

    hero_section:
      role: "Top-of-page brand statement"

      info: "Cream Paper base washed with the diagonal sage→lavender→cream gradient (212deg, #afc4bf → #e8e7f5 → #f1eee9). Centered headline at 48-56px weight 300 letter-spacing -0.02em in Ink, supporting copy at 16-18px weight 400 in Slate, optional CTA below."

    product_dashboard_card:
      role: "Embedded UI mockup"

      info: "Sheet White, 16px radius, 1px Sage Mist border (no shadow). Contains a left vertical icon rail in Canopy and a content area with stat tiles using 36px weight 500 numerics. Internal padding 24-40px."

    stat_tile:
      role: "Key-metric display"

      info: "Sheet White card with 8-16px radius, sage-green leaf or icon accent at 20-24px, label in 13px uppercase 0.07em tracking, primary value at 24-36px weight 500 in Bark, delta in 13-14px weight 500 with up/down arrow. 24px internal padding."

    logo_strip:
      role: "Social proof row"

      info: "Single row of 6-8 monochrome dark partner logos evenly distributed with 40-80px column gap, no captions, no card chrome. Logos rendered in Bark (#101f1e)."

    network_diagram:
      role: "Decorative data-viz section"

      info: "Light cream background with thin dotted line connections between 3D orb nodes. Orb fills mix Orb Violet, Mint Pulse, and pale lavender. Each orb is paired with a small uppercase label tag (DM Sans 13px weight 700 0.07em) on a white pill. No borders or cards — the diagram floats in open space."

    isometric_feature_section:
      role: "3D illustration showcase"

      info: "Mint-tinted green gradient background (#e8f0ec to #f1eee9). Isometric 3D renders of wind turbines, power lines, and trees sit on white platform blocks with Canopy labels. No card borders — the illustration is the chrome."

    bar___column_chart_card:
      role: "Data visualization container"

      info: "Sheet White, 16px radius, 1px Sage Mist border. Bars use Canopy, Mint Pulse, Orb Violet, and Slate at 8-12px width with 4-8px gap. Axis labels 13px Slate, legend 13px uppercase."

    footer:
      role: "Site footer"

      info: "Canopy (#104336) background, white DM Sans 13-15px text, multi-column link lists, Arcadia wordmark in white, social icons in white outline. 80-120px vertical padding."

  do_s_and_don_ts:

    do:
      - "Use Canopy (#104336) for all primary CTA fills and the announcement bar — it is the brand's structural color."
      - "Reserve Mint Pulse (#0fff87) for a single most-important action per screen; never scatter it across multiple buttons."
      - "Set display headlines at 48-56px DM Sans weight 300 with -0.02em letter-spacing in Ink (#000000)."
      - "Use uppercase 13px DM Sans weight 700 with 0.07em tracking for eyebrow labels in Mint Pulse, Canopy, or Orb Violet."
      - "Separate cards from the Cream Paper canvas with a 1px Sage Mist (#afc4bf) border, not a drop shadow."
      - "Maintain 80-120px vertical gap between major sections; let screens breathe."
      - "Center hero text stacks at max-width 1200px and keep CTAs directly under the supporting copy."

    don_t:
      - "Don't use drop shadows on cards or buttons — the system relies on color-step and hairline borders, not elevation shadows."
      - "Don't introduce new saturated colors; the chromatic palette is exactly Canopy, Mint Pulse, and Orb Violet."
      - "Don't use weight 700 for body or long-form copy — reserve 700 for short uppercase eyebrows only."
      - "Don't apply Mint Pulse to a full-width background or large surface; it is a small-attention accent, not a canvas color."
      - "Don't place text directly on the hero gradient without testing contrast — pair the gradient with centered black or Bark text on its lightest stop."
      - "Don't use border-radius larger than 16px on standard cards; the soft-but-not-rounded feel depends on this restraint."
      - "Don't add photography to sections that already have 3D illustrations or diagrammatic content — mixing styles breaks the editorial mood."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Paper | `#f3f1ec` | Primary page canvas — hero and section bands |"
    info: "| 1 | Sheet White | `#ffffff` | Cards, dashboards, nav bar — one-step lift without shadow |"
    info: "| 2 | Sage Tint | `#e8e7f5` | Gradient mid-stop and section wash |"

  elevation:

    info: "Elevation is achieved by surface color step and 1px sage borders rather than drop shadows. Cards never cast shadow; they sit on the cream canvas and are separated by hairline Sage Mist rules. This keeps the system flat, editorial, and print-like — closer to a sustainability report than a typical SaaS dashboard."

  imagery:

    info: "Imagery is sparingly used and highly stylized. The hero relies on a subtle diagonal gradient rather than photography. Two featured sections use 3D isometric illustrations (energy infrastructure on a mint-green platform) and floating 3D orb networks connected by thin dotted lines — both brand-colored rather than photographic. Partner logos are monochrome Bark wordmarks on white. Product surfaces appear as flat UI mockups (dashboard cards, stat tiles, bar charts) rather than screenshots. Photography is absent from the above-the-fold flow; the visual language is diagrammatic and illustrative, with violet orb accents providing the only saturated punctuation."

  layout:

    info: "Page is max-width 1200px centered, but hero and announcement bar run full-bleed. Hero is a centered text stack (headline, sub-copy, CTA) on a soft diagonal gradient, followed by a product dashboard mockup centered at roughly 80% page width. Sections alternate between Cream Paper and Sheet White bands with 80-120px vertical gap. The 'How we deliver results' section uses centered headline + a wide network diagram floating in open space with no container. The isometric feature section is a 2-column split: 3D illustration left, text block right. Logo strip and CTA blocks are full-bleed centered. Navigation is a single sticky top bar with no sidebar. Overall density is comfortable — one focused idea per screen, generous vertical breathing, no masonry or card-grid overload."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #101f1e (Bark) for body, #000000 (Ink) for display"
    - "background: #f3f1ec (Cream Paper) for canvas, #ffffff (Sheet White) for cards"
    - "border: #afc4bf (Sage Mist) hairlines"
    - "accent: #0fff87 (Mint Pulse) for highlights"
    - "primary action: #0fff87 (filled action)"

    info: "Example Component Prompts:"
    - "Hero section: Cream Paper (#f3f1ec) base with diagonal gradient wash (#afc4bf → #e8e7f5 → #f1eee9). Centered 56px DM Sans weight 300 headline in Ink (#000000) with -0.02em tracking. 18px weight 400 sub-copy in Slate (#535e5d). Canopy (#104336) primary CTA below at 8px radius, 15px 24px padding, white 14px weight 500 text."
    - "Create a Primary Action Button: #0fff87 background, #101f1e text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."
    - "Eyebrow + heading block: 13px DM Sans weight 700 uppercase 0.07em tracking in Mint Pulse (#0fff87), 8px margin-bottom. Then 48px DM Sans weight 300 in Ink with -0.02em tracking. Centered."
    - "Navigation bar: Sheet White (#ffffff) 72px height. 'Arcadia' wordmark in Canopy (#104336) at 20px weight 500. Nav items in Bark 14px weight 400. Ghost 'Sign in' button with 1px Canopy border, 8px radius. 'Request demo' as filled Canopy button with white 14px weight 500 text."
    - "Network diagram section: Cream Paper background. Centered eyebrow + 48px weight 300 headline. Below, floating 3D-style orbs (16-24px radius) at Orb Violet (#7c18d3), Mint Pulse (#0fff87), and pale lavender fills, connected by thin 1px dotted Sage Mist lines. Each orb pairs with a white pill label: DM Sans 13px weight 700 uppercase 0.07em in Bark, 4px 12px padding, 9999px radius."

  gradient_system:

    info: "Two signature gradients carry atmospheric weight: (1) the hero wash — a 212.12deg diagonal from #afc4bf through #e8e7f5 to #f1eee9, a 5-stop sage→lavender→cream melt that gives the hero its dawn-light feeling; (2) the isometric section gradient — a softer mint tint supporting 3D energy illustrations. Both gradients are decorative only; they never appear on buttons, cards, or text backgrounds. Keep them to 3-5 color stops and stay within the sage/cream/lavender family — no rainbow gradients."

  radius_logic:

    two_radii_do_the_heavy_lifting: "16px for cards and elevated surfaces, 8px for buttons and tags. Inputs tighten to 4px. There is no 24px or pill-radius default in the core system — the only time 9999px appears is on the small inline label pills in the network diagram. This 16/8/4 hierarchy is what makes the system feel modern without going soft or playful."

  similar_brands:

    - "**Watershed** — Same sustainability-report aesthetic — cream paper canvas, forest-green chrome, monochrome dashboard cards with hairline sage borders and almost no shadows."
    - "**Patch** — Same energy/climate domain language with a deep brand-green primary, soft gradient hero washes, and generous editorial spacing."
    - "**Stripe** — Same restrained 16/8px radius discipline and clean white-product-surface treatment, though Arcadia swaps Stripe's purple for forest green."
    - "**Notion** — Same generous vertical rhythm, centered text-stack heroes, and eyebrow-label punctuation above section headings."
    - "**Lime** — Same use of a single vivid electric accent (lime green) against a deep brand color to make CTAs feel switched on."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canopy: #104336;
          --color-mint-pulse: #0fff87;
          --color-orb-violet: #7c18d3;
          --color-cream-paper: #f3f1ec;
          --color-sheet-white: #ffffff;
          --color-bark: #101f1e;
          --color-ink: #000000;
          --color-slate: #535e5d;
          --color-charcoal: #333333;
          --color-sage-mist: #afc4bf;
          --color-pale-sage: #c2cec8;
          --color-muted-slate: #798281;
          --color-hero-wash: #e8e7f5;
          --gradient-hero-wash: linear-gradient(212.12deg, #afc4bf 14.83%, #e8e7f5 52.99%, #f1eee9 79.47%);
        
          /* Typography — Font Families */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.07px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.29;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.01px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -0.02px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -0.02px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24-40px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-pills: 9999px;
          --radius-inputs: 4px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-cream-paper: #f3f1ec;
          --surface-sheet-white: #ffffff;
          --surface-sage-tint: #e8e7f5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canopy: #104336;
          --color-mint-pulse: #0fff87;
          --color-orb-violet: #7c18d3;
          --color-cream-paper: #f3f1ec;
          --color-sheet-white: #ffffff;
          --color-bark: #101f1e;
          --color-ink: #000000;
          --color-slate: #535e5d;
          --color-charcoal: #333333;
          --color-sage-mist: #afc4bf;
          --color-pale-sage: #c2cec8;
          --color-muted-slate: #798281;
          --color-hero-wash: #e8e7f5;
        
          /* Typography */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.07px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.29;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.01px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -0.02px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -0.02px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
        }