oevra___style_reference:
  info: "> sage greenhouse at dawn"

  theme: "light"

  oevra_speaks_in_a_single_quiet_voice: "sage green on white, whispered through enormous light-weight headlines. The chromatic palette is ruthlessly restrained — one muted olive (#778643) does all the talking across text, borders, and the occasional button, while every surface stays a white canvas washed with a soft sage radial gradient. Typography is the show: Suisse Int'l at 300-weight blows up to 90px display sizes that read like a meditation, paired with a 14–15px body in Space Grotesk. Components feel like artifacts in a greenhouse — rounded 15px corners, hairline 1px borders, no shadows, no fills, no decoration. The result is less an interface and more a slow walk through a plant nursery at dawn."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Eucalyptus | `radial-gradient(ellipse at 50% 50%, rgba(119,134,67,0.35) 0%, rgba(119,134,67,0.08) 50%, #ffffff 100%)` | `--color-eucalyptus` | Headline accents, body text emphasis, hairline borders, single filled CTA — the only chromatic voice in the entire system. Muted enough to never shout, present enough to carry the brand; Full-bleed background gradient behind hero and section text. The green is a breath, not a wall — it fades to white at the edges so text remains the focus |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, dividers, image borders, icon strokes. Used at 1px hairline weight almost exclusively — never as a fill |"
    info: "| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Page background, card surfaces, button text on filled green CTAs. The dominant surface color across the entire site |"
    info: "| Graphite | `#4e4e4e` | `--color-graphite` | Secondary body text, muted link borders, helper copy, footer text. Quieter than black but still AA-readable on white |"
    info: "| Mist | `#c8c8c8` | `--color-mist` | Subtle surface wash for elevated panels, image placeholder backgrounds, very faint dividers. Used sparingly to add depth without darkening the page |"

  tokens___typography:

    space_regular___space_regular___detected_in_extracted_data_but_not_described_by_ai____font_space_regular:
      - "**Weights:** 400"
      - "**Sizes:** 8px, 12px, 14px, 15px"
      - "**Line height:** 1.2, 1.25, 1.3, 1.5"
      - "**Role:** space-regular — detected in extracted data but not described by AI"

    suisse_int_l___display_and_headline_face__light_weight_at_45_90px_is_the_signature___headlines_whisper_instead_of_shout__creating_a_contemplative__editorial_tone__used_for_all_section_headlines__hero_copy__and_feature_titles_____font_suisse_intl:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 300 (light), 400 (regular)"
      - "**Sizes:** 34px, 45px, 75px, 90px"
      - "**Line height:** 1.0–1.1"
      - "**Role:** Display and headline face. Light weight at 45–90px is the signature — headlines whisper instead of shout, creating a contemplative, editorial tone. Used for all section headlines, hero copy, and feature titles."

    suisse_int_l___secondary_body_and_footer_text__regular_weight_adds_density_to_descriptions_and_supporting_paragraphs_beneath_light_weight_headlines_____font_suisse_intl:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400 (regular)"
      - "**Sizes:** 12px, 14px, 15px"
      - "**Line height:** 1.2–1.3"
      - "**Role:** Secondary body and footer text. Regular weight adds density to descriptions and supporting paragraphs beneath light-weight headlines."

    space_grotesk___primary_body__ui_labels__buttons__and_navigation_text__the_geometric_counter_forms_pair_with_suisse_to_give_dense_text_a_different_texture_from_the_display_headlines_____font_space_grotesk:
      - "**Substitute:** DM Sans, Inter, General Sans"
      - "**Weights:** 400 (regular)"
      - "**Sizes:** 8px, 12px, 14px, 15px"
      - "**Line height:** 1.2–1.5"
      - "**Role:** Primary body, UI labels, buttons, and navigation text. The geometric counter-forms pair with Suisse to give dense text a different texture from the display headlines."

    system_sans___micro_utility_text__scroll_indicators__and_fine_print_captions_where_a_1_2_word_label_sits_in_the_margins_____font_system_sans:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 8px"
      - "**Line height:** 1.5"
      - "**Role:** Micro-utility text, scroll indicators, and fine-print captions where a 1–2 word label sits in the margins."

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 8px"
      - "**Line height:** 1.5"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    suisse_light___suisse_light___detected_in_extracted_data_but_not_described_by_ai____font_suisse_light:
      - "**Weights:** 400"
      - "**Sizes:** 34px, 45px, 75px, 90px"
      - "**Line height:** 1, 1.1"
      - "**Role:** suisse-light — detected in extracted data but not described by AI"

    suisse_regular___suisse_regular___detected_in_extracted_data_but_not_described_by_ai____font_suisse_regular:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 15px"
      - "**Line height:** 1.2, 1.25, 1.3"
      - "**Role:** suisse-regular — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 15px | 1.3 | — | `--text-body` |"
      info: "| subheading | 34px | 1.1 | — | `--text-subheading` |"
      info: "| heading-sm | 45px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 75px | 1 | — | `--text-heading` |"
      info: "| display | 90px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 83 | 83px | `--spacing-83` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 135 | 135px | `--spacing-135` |"
      info: "| 180 | 180px | `--spacing-180` |"
      info: "| 218 | 218px | `--spacing-218` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 15px |"
      info: "| images | 15px |"
      info: "| buttons | 22.5px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 75px"
      - "**Card padding:** 30px"
      - "**Element gap:** 23px"

  components:

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent, floats over the sage gradient. Logo (glasses icon + 'oevra' wordmark) at left in white at 12–14px. Nav links (ABOUT, LOGIN) in white, 8–12px Space Grotesk, uppercase. SIGN UP button is a white outlined pill at 22.5px radius with 11px padding. No background fill on the bar itself — the gradient shows through."

    display_headline_block:
      role: "Hero and section headlines"

      info: "Text in Suisse Light at 75–90px, line-height 1.0, color #ffffff (on green gradient) or #778643 (on white). Headlines span 3–4 lines, often with a short underline rule breaking the flow. This is the dominant visual element on every section."

    inset_headline_image:
      role: "Photo embedded mid-headline"

      info: "A small square photograph (approximately 60–80px) tucked into a headline, replacing a word or sitting inline with text. The image has 15px border-radius and breaks the typographic flow as a deliberate visual surprise."

    ghost_pill_button:
      role: "Primary call-to-action"

      info: "GET STARTED / GET THE APP. Outlined pill: 22.5px border-radius, 1px stroke, 11–15px vertical padding, 23–30px horizontal padding. Stroke and text in current text color (white on green sections, black on white sections). Arrow glyph (→→) follows the label. No fill, no shadow."

    filled_green_button:
      role: "Sole chromatic CTA (SIGN UP in nav context)"

      info: "The only filled button in the system. Background #778643, text #ffffff, 22.5px border-radius, 1px transparent border, 11px vertical / 23px horizontal padding. Used sparingly — most actions stay ghost/outlined to preserve the airy feel."

    section_label:
      role: "Small uppercase eyebrow above headlines"

      info: "AVAILABLE NOW / APP FEATURES. 8–12px Space Grotesk, uppercase, letter-spacing slightly wide, color matches the current text tone (white on green, #778643 on white). Sits to the left of or above the main headline, aligned to its first line."

    numbered_feature_item:
      role: "Step indicators in feature lists"

      info: "Three-column row at the section base. Each item: 2-digit number (01, 02, 03) in 8px Space Grotesk above a short uppercase label (THE CREATIVE PROCESS, THE FLOW STATE, GET UNBLOCKED) in Suisse Regular at 12–14px. Column gap 60px."

    image_card:
      role: "Product screenshot or photograph container"

      info: "Photograph or product shot placed in the lower-right of sections. 15px border-radius, often with a 1px black hairline border. No shadow, no padding — the image touches the radius edge. Sits at a slight angle or offset from the text grid to feel placed, not gridded."

    body_description_block:
      role: "Supporting paragraph text"

      info: "15px Suisse Regular or Space Grotesk, line-height 1.3–1.5, color #4e4e4e. Max width around 45ch. Sits below the display headline, left-aligned, generous margin-top (23–30px). Accompanied by a ghost CTA below it."

    vertical_scroll_indicator:
      role: "Page-position cue on left margin"

      info: "Word 'SCROLL' rotated 90° counter-clockwise, 8–12px, 1px line above it. Fixed to the left edge of the viewport, color matches the current section text tone."

    footer_link_column:
      role: "Footer navigation list"

      info: "Stack of links in 14–15px Suisse Regular, color #4e4e4, 15px vertical spacing between items. 1px hairline border separates columns. No headings — the list speaks for itself."

    hairline_divider:
      role: "Visual separation"

      info: "1px horizontal line in #000000 or #4e4e4, used inline within headlines to break text flow (e.g. a short rule sits between two headline lines). 30–45px width. Decorative typographic pause, not a structural divider."

  do_s_and_don_ts:

    do:
      - "Use Suisse Int'l at 300/400 weight for all headlines, scaled 45–90px with line-height 1.0–1.1"
      - "Apply the Sage Mist radial gradient as the default page background wash — it should breathe, not saturate"
      - "Reach for #778643 on text, borders, and the single filled CTA — never on large filled surfaces"
      - "Use 15px border-radius on cards and images, 22.5px on all interactive elements (buttons, links, pills)"
      - "Set section gaps at 75px and card padding at 30px — the spaciousness IS the brand"
      - "Keep body text at 15px with 1.3 line-height in #4e4e4 for graphite-toned supporting copy"
      - "Pair every display headline with a short uppercase section label (8–12px) as its anchor"

    don_t:
      - "Do not introduce a second chromatic color — the entire palette is one green and four neutrals"
      - "Do not use bold or semibold weights for headlines; light weight at large size is the signature"
      - "Do not apply box-shadows, glows, or blur effects for elevation — separation comes from whitespace and hairlines"
      - "Do not use sharp corners (0–4px radius) on any surface or interactive element"
      - "Do not use #778643 as a solid page or section background — it must always be diluted by the gradient or rendered as a thin line"
      - "Do not crowd the layout with small text; if a paragraph exceeds 3 lines, the type is too small for the system"
      - "Do not use icon fills or saturated illustrations — the visual language is photography, type, and gradient only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, full-bleed white |"
    info: "| 1 | Sage Mist | `#778643` | Soft radial gradient overlay on canvas — atmospheric, not structural |"
    info: "| 2 | Mist Panel | `#c8c8c8` | Subtle elevated surface for image placeholders and light separators |"

  elevation:

    info: "Elevation does not exist in this system. Surfaces are separated by whitespace, 1px hairlines, and the sage gradient wash — never by shadow. Adding a shadow would shatter the flat, greenhouse-like calm that defines the brand."

  imagery:

    info: "Imagery is restrained and photographic, never illustrated or 3D. Product screenshots (phone in hand, app UI crops) appear in 15px-radius image cards with hairline borders, positioned in the lower-right of sections as visual counterweights to text. One signature move: a small square photo is inset directly into a display headline, breaking the typographic line as a deliberate moment of surprise. Backgrounds are never photographic — they are always the sage radial gradient. No icons, no illustrations, no decorative graphics."

  layout:

    info: "Full-bleed page with a soft sage radial gradient that fills the entire viewport. Content sits in a max-width 1200px container, but sections rarely feel boxed — headlines span 70–80% of the viewport width and breathe against the gradient. Hero opens with a centered/left-aligned display headline (90px) and supporting copy, with a ghost CTA anchored to the bottom-right corner. A vertical 'SCROLL' indicator lives on the far left margin. Subsequent sections alternate between green-wash backgrounds and white, each anchored by a 45–90px Suisse Light headline, a small uppercase section label to its left, and body copy with a ghost CTA below. Numbered feature items (01, 02, 03) sit at section bases in a 3-column row. Image cards break the grid by floating into the lower-right, slightly offset from the text column. Navigation is transparent and floats over the hero gradient. The overall rhythm is slow, vertical, and editorial — a single column of generous sections rather than a dense multi-column dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #ffffff (with #778643 radial gradient wash)"
    - "text: #000000 (primary), #4e4e4e (secondary), #778643 (accent)"
    - "border: #000000 or #4e4e4e at 1px hairline"
    - "accent: #778643"
    - "primary action: #778643 (filled action)"

    example_component_prompts:
    - "*Hero Section*: Full-bleed #ffffff base with radial-gradient(ellipse at 50% 50%, rgba(119,134,67,0.35), rgba(119,134,67,0.08) 50%, #ffffff 100%). Centered display headline at 90px Suisse Int'l weight 300, color #ffffff, line-height 1.0, spanning 3 lines. Below: 15px Space Grotesk weight 400, color #4e4e4e, max-width 45ch. Ghost pill CTA at bottom-right: 1px white stroke, 22.5px radius, 11px/23px padding, 12px Space Grotesk uppercase label + →→ arrow."

    - "*Feature Section on White*: White background. 8px uppercase section label '#778643' left-aligned, 45px Suisse Int'l weight 300 headline in #778643. Small 60px square photograph with 15px radius inset into the headline line. Below: 15px Space Grotesk body in #4e4e4e, 30px gap to ghost outline button (1px #000 stroke, 22.5px radius)."

    - "*Numbered Feature Row*: Three columns at section base, 60px column gap. Each item: 8px '#778643' number (01, 02, 03) above 12px Space Grotesk uppercase label in #000000."

    - "*Product Image Card*: Photograph at 15px border-radius with 1px #000000 hairline border, positioned bottom-right of section, overlapping the text column slightly. No padding, no shadow."

    - "*Navigation Bar*: Transparent over gradient. Left: 12px white logo + 'oevra'. Right: 8–12px white Space Grotesk uppercase nav links (ABOUT, LOGIN) + white outlined pill button (SIGN UP) at 22.5px radius, 1px white stroke, 11px/23px padding."

  similar_brands:

    - "**Headspace** — Same soft, organic atmosphere with a single muted accent color against generous white space and rounded components"
    - "**Calm** — Editorial-grade display headlines at 60–80px+, whisper-light weights, and a nature-evoking palette that relies on whitespace instead of decoration"
    - "**Notion AI** — Monochrome interface with one chromatic accent used in text and thin borders rather than large fills; large confident display type"
    - "**Linear** — Spacious single-column layouts with 15px-radius surfaces, hairline borders, and zero shadow elevation"
    - "**Are.na** — Restrained two-tone palette (neutral + one accent), oversized editorial headlines, and a contemplative, slow-scrolling rhythm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-eucalyptus: #778643;
          --gradient-eucalyptus: radial-gradient(ellipse at 50% 50%, rgba(119,134,67,0.35) 0%, rgba(119,134,67,0.08) 50%, #ffffff 100%);
          --color-ink-black: #000000;
          --color-pure-canvas: #ffffff;
          --color-graphite: #4e4e4e;
          --color-mist: #c8c8c8;
        
          /* Typography — Font Families */
          --font-space-regular: 'space-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-grotesk: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans: 'System Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-light: 'suisse-light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-regular: 'suisse-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 15px;
          --leading-body: 1.3;
          --text-subheading: 34px;
          --leading-subheading: 1.1;
          --text-heading-sm: 45px;
          --leading-heading-sm: 1.1;
          --text-heading: 75px;
          --leading-heading: 1;
          --text-display: 90px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-30: 30px;
          --spacing-38: 38px;
          --spacing-45: 45px;
          --spacing-60: 60px;
          --spacing-83: 83px;
          --spacing-120: 120px;
          --spacing-135: 135px;
          --spacing-180: 180px;
          --spacing-218: 218px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 75px;
          --card-padding: 30px;
          --element-gap: 23px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-2xl: 22.5px;
        
          /* Named Radii */
          --radius-cards: 15px;
          --radius-images: 15px;
          --radius-buttons: 22.5px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-sage-mist: #778643;
          --surface-mist-panel: #c8c8c8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-eucalyptus: #778643;
          --color-ink-black: #000000;
          --color-pure-canvas: #ffffff;
          --color-graphite: #4e4e4e;
          --color-mist: #c8c8c8;
        
          /* Typography */
          --font-space-regular: 'space-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-grotesk: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans: 'System Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-light: 'suisse-light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-regular: 'suisse-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 15px;
          --leading-body: 1.3;
          --text-subheading: 34px;
          --leading-subheading: 1.1;
          --text-heading-sm: 45px;
          --leading-heading-sm: 1.1;
          --text-heading: 75px;
          --leading-heading: 1;
          --text-display: 90px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-23: 23px;
          --spacing-30: 30px;
          --spacing-38: 38px;
          --spacing-45: 45px;
          --spacing-60: 60px;
          --spacing-83: 83px;
          --spacing-120: 120px;
          --spacing-135: 135px;
          --spacing-180: 180px;
          --spacing-218: 218px;
        
          /* Border Radius */
          --radius-xl: 15px;
          --radius-2xl: 22.5px;
        }