hey_low___style_reference:
  info: "> botanical field journal on cream paper — Measured, organic, and mostly silent, with one lime-green note singing on the page."

  theme: "light"

  info: "Hey Low is an ecological field journal rendered as a website: white paper, forest-ink typography, and a single sprig of chartreuse that makes actions feel alive. The composition is generous and unhurried — most of the canvas stays quiet and near-white, with dark evergreen as the structural color and pale lime appearing only where a system needs to pulse. Headlines are set in a tight, geometric sans with aggressive negative tracking at large sizes, then punctuated by a hand-set italic serif accent that injects warmth into otherwise clinical copy. Cards, buttons, and project tiles are flat and low-elevation; visual weight comes from type contrast and illustration, not shadows or gradients. Everything should feel like a studio that designs for the planet — restrained, botanical, and deliberately spare."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Forest Ink | `#003329` | `--color-forest-ink` | Headlines, body copy, navigation text, illustration strokes, link color — the structural color that carries every page |"
    info: "| Chartreuse Sprig | `#e6ffa3` | `--color-chartreuse-sprig` | Primary CTA button fill, feature card surfaces, highlight washes — the single accent that makes interactive elements feel switched on |"
    info: "| Deep Moss | `#042725` | `--color-deep-moss` | Secondary action button, hover or pressed states where a darker counterweight to the lime CTA is needed |"
    info: "| Vivid Lime | `#9bff48` | `--color-vivid-lime` | Decorative high-energy accent inside illustrations, hover halos, or emphasis marks — louder sibling of Chartreuse Sprig |"
    info: "| Mist Paper | `#e5e7eb` | `--color-mist-paper` | Page canvas, hairline borders across cards/links/images, subtle section backgrounds — the surface that the design breathes on |"
    info: "| White Sheet | `#ffffff` | `--color-white-sheet` | Card surfaces, elevated tiles, button backgrounds, inverse text on dark fills |"
    info: "| Graphite | `#000000` | `--color-graphite` | Occasional true-black fills for SVG details and one dark button variant |"
    info: "| Sage Dust | `#52756e` | `--color-sage-dust` | Muted helper text, secondary descriptions, caption-level copy where full Forest Ink would compete with the headline |"
    info: "| Pine Shadow | `#33544c` | `--color-pine-shadow` | Tertiary text, subdued labels, low-priority annotations |"

  tokens___typography:

    untitledsans___primary_interface_typeface___ui_controls__body__navigation__and_display_headings__the_aggressively_negative_tracking_at_large_sizes_up_to__0_064em_tightens_the_letterforms_into_a_near_poster_density_that_makes_even_short_headlines_feel_like_brand_statements__a_600_weight_is_reserved_for_emphasis_and_cta_labels_____font_untitledsans:
      - "**Substitute:** Inter (closest open match — same geometric grotesque with broad weight range)"
      - "**Weights:** 400, 600"
      - "**Sizes:** 9, 10, 11, 12, 14, 16, 17, 24, 30, 36, 43, 52, 62"
      - "**Line height:** 0.80, 0.90, 1.00, 1.10, 1.13, 1.14, 1.20, 1.40, 1.50, 1.53, 1.60, 1.61"
      - "**Letter spacing:** -3.97px at 62px, -3.07px at 52px, -2.19px at 43px, -1.40px at 36px, -0.93px at 30px, -0.60px at 24px, -0.34px at 17px, -0.26px at 16px, +0.35px at 14px, +0.67px at 12px"
      - "**Role:** Primary interface typeface — UI controls, body, navigation, and display headings. The aggressively negative tracking at large sizes (up to -0.064em) tightens the letterforms into a near-poster density that makes even short headlines feel like brand statements. A 600 weight is reserved for emphasis and CTA labels."

    boogybrutposter___decorative_italic_display_accent_used_for_the_hand_lettered_feel_phrases_that_ride_alongside_the_geometric_headline__for_you___the_planet___fast_by_nature____love__the_contrast_between_this_organic__almost_calligraphic_display_and_untitledsans_s_clinical_geometry_is_the_site_s_signature_typographic_move_____font_boogybrutposter:
      - "**Substitute:** Recoleta Italic or DM Serif Display Italic"
      - "**Weights:** 400"
      - "**Sizes:** 52, 62, 68"
      - "**Line height:** 0.82, 0.83"
      - "**Role:** Decorative italic-display accent used for the hand-lettered-feel phrases that ride alongside the geometric headline ('for You & the Planet', 'Fast by nature', '& love'). The contrast between this organic, almost-calligraphic display and UntitledSans's clinical geometry is the site's signature typographic move."

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

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.67px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.35px | `--text-body-sm` |"
      info: "| body-lg | 17px | 1.5 | -0.34px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.13 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1 | -1.4px | `--text-heading-sm` |"
      info: "| heading | 43px | 0.9 | -2.19px | `--text-heading` |"
      info: "| heading-lg | 52px | 0.83 | -3.07px | `--text-heading-lg` |"
      info: "| display | 62px | 0.8 | -3.97px | `--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: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 9999px |"
      info: "| buttons | 8px |"
      info: "| decorative | 13.89px |"
      info: "| projectImages | 8px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 56-80px"
      - "**Card padding:** 28px"
      - "**Element gap:** 7-14px"

  components:

    top_navigation_bar:
      role: "Site-wide header with brand mark, nav links, and contact CTA"

      info: "White Sheet (#ffffff) background, full-bleed, 28px vertical padding. Logo 'hey low' set left in Forest Ink at 17px weight 600, tracking -0.34px. Center/right cluster holds text nav (Work, About, Blog) in Forest Ink 14px weight 400 with 21px horizontal gaps, followed by a 'Contact' pill button (White Sheet fill, Mist Paper 1px border, 8px radius, 12px 21px padding, Forest Ink text 14px). No shadow, no sticky elevation."

    primary_cta_button___chartreuse_fill:
      role: "Filled action button for the single most important next step on a section"

      info: "Background #e6ffa3, text Forest Ink (#003329), UntitledSans 14px weight 600, tracking 0.35px. Padding 12px 21px, radius 8px. No border, no shadow. Reads as a friendly confident accent against the white canvas."

    secondary_ghost_button:
      role: "Quiet alternative action beneath or beside the primary CTA"

      info: "Transparent background, Forest Ink text 14px, leading arrow glyph in same color, no border, no background. Underline-free, 7px vertical padding. Used for 'Our work', 'Learn More' type links."

    section_eyebrow_label:
      role: "Tiny pre-headline marker that introduces each major section"

      info: "Forest Ink 12px weight 400, tracking 0.67px, prefixed by a small filled dot. Examples: '• The websites we design & build', '• Explore our work'. Sits 7-14px above the headline."

    hero_headline_with_italic_accent:
      role: "Primary page-level statement mixing geometric and calligraphic voices"

      info: "First line in UntitledSans 62px weight 600, tracking -3.97px, line-height 0.80, Forest Ink. Second line in BoogyBrutPoster italic 62px, tracking normal, line-height 0.83, Forest Ink. The pairing of tight grotesque with flowing italic poster face is the page's signature typographic gesture."

    feature_card_chartreuse:
      role: "Tiled value proposition card used in the 3-column grid for sustainability/fast/beautiful claims"

      info: "Background #e6ffa3, padding 28px on all sides, radius 8px. Title in UntitledSans 24px weight 600 tracking -0.6px, Forest Ink. Body in Forest Ink 14px weight 400. Small Forest Ink icon (18-20px) positioned in the top-right corner. No shadow, no border. Cards tile in a 3-column grid with 7-14px gaps."

    project_showcase_card:
      role: "Featured work tile with image, metadata, and performance metrics"

      info: "White Sheet background, 8px radius, no border, no shadow. Top holds a large preview image (rounded 8px) filling the card width. Below image: project name in UntitledSans 17px weight 600 Forest Ink, then 1-2 line description in 14px Sage Dust (#52756e). Bottom-right cluster holds a circular Carbon Rating badge (lime fill, Forest Ink letter grade) and a Speed Index label in Sage Dust 12px. A 'See our case study' Forest Ink 14px link closes the card. 28px internal padding, 24px gap between image and text block."

    carbon_rating_badge:
      role: "Pill badge showing the carbon performance grade of a shipped project"

      info: "Circular or pill shape, Chartreuse Sprig (#e6ffa3) fill, Forest Ink 12px weight 600 letter, 9999px radius. Sits inline with the Speed Index metric in the project card metadata row."

    client_logo_strip:
      role: "Horizontal band of partner/client wordmarks near the top of the page"

      info: "Mist Paper (#e5e7eb) background, full-bleed band, 28-32px vertical padding. Logos rendered in a single row, evenly distributed, each treated as a flat Forest Ink or grayscale mark at roughly 24-30px height. No labels, no dividers between logos — the whitespace is the separator."

    hero_botanical_illustration:
      role: "Hand-drawn nature composition anchoring the hero composition"

      info: "A semicircular arrangement of butterflies, leaves, moths, and seed pods in Forest Ink (#003329) on White Sheet. Linework is organic, hand-inked, with occasional Vivid Lime (#9bff48) accents on individual wing or leaf details. Lives to the left of the hero text block, floats without a container, ~480px diameter."

    decorative_organic_shape:
      role: "Large-radius curved form used as background interest in featured project tiles"

      info: "Some project card image areas use extreme border-radius values (110px, 600px) to create lens-like or pebble-like crops around screenshots. These asymmetric radii are intentional — they break the grid and signal 'this is a portfolio piece, not a product UI'."

  do_s_and_don_ts:

    do:
      - "Set primary headlines in UntitledSans 600 at 43-62px with tracking between -2.19 and -3.97px so the letterforms read as a tight block, not loose type."
      - "Pair every geometric headline with one italic BoogyBrutPoster accent line at matching size — this contrast is the site's typographic signature."
      - "Use Chartreuse Sprig (#e6ffa3) as the filled CTA background with Forest Ink text; never reverse it (dark fill with lime text reads as off-brand urgency)."
      - "Keep cards, buttons, and tiles at 8px radius — do not round to 12px or 16px, the slight crispness is what keeps the design feeling like a field guide rather than a SaaS dashboard."
      - "Lay major sections out at 56-80px vertical gaps and let white space do the structural work; avoid dividers, lines, or colored bands between sections."
      - "Use the Vivid Lime (#9bff48) only as illustration fill or hover halo, never as a UI surface — it is too loud for interface chrome."
      - "Anchor every section with the 12px Forest Ink eyebrow label prefixed by a dot; this is the consistent navigation rhythm across the page."

    don_t:
      - "Do not apply box-shadows to cards or buttons — the design is intentionally flat, and any elevation will fight the botanical paper aesthetic."
      - "Do not introduce gradients anywhere; the palette is deliberately flat and the only 'color movement' should come from the hand-drawn illustration."
      - "Do not use Sage Dust (#52756e) or Pine Shadow (#33544c) for headlines or navigation — those are muted body-text colors only and will look washed out at large sizes."
      - "Do not place more than one Chartreuse Sprig CTA per visible section; the accent loses its function if it repeats."
      - "Do not round the hero illustration container with a standard radius — the organic shapes should float free, not be clipped into a circle or rounded square."
      - "Do not use a sans-serif for the italic accent phrases; the BoogyBrutPoster/serif italic is the contrast that makes the geometric headlines feel intentional."
      - "Do not center body paragraphs wider than 480px — the long-line lockup is a magazine reading rhythm, not a web content width."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Mist Paper | `#e5e7eb` | Page-level canvas and section separators |"
    info: "| 1 | White Sheet | `#ffffff` | Default card and elevated component background |"
    info: "| 2 | Chartreuse Sprig | `#e6ffa3` | Highlighted feature cards and CTA surfaces |"

  elevation:

    info: "The design is intentionally shadowless. Visual hierarchy is built through type scale, whitespace, and the single chartreuse accent — not through elevation. Components sit on the page like pressed leaves on paper; any drop shadow would break that flatness and reintroduce the SaaS product feel the brand is explicitly avoiding."

  imagery:

    info: "The visual language blends two registers: hand-inked botanical illustration and clean product photography. The hero and decorative moments are dominated by line-drawn butterflies, moths, leaves, and seed pods rendered in Forest Ink with occasional Vivid Lime accents — loose, organic, slightly imperfect linework that signals craft over polish. Project showcase cards switch to tight product photography (screenshots of shipped websites) cropped inside the card frame, sometimes with extreme asymmetric border-radii (110-600px) that turn screenshots into pebble-shaped or lens-shaped vignettes. Icons throughout the UI are tiny, single-weight line marks in Forest Ink, 18-20px, used as card top-right markers. The overall density is low — imagery is reserved and editorial, never busy, and the page reads as text-and-illustration first, photography second."

  layout:

    info: "The page is centered and max-width-contained at roughly 1200px, with full-bleed bands for the client logo strip. The hero uses an asymmetric split: a semicircular botanical illustration anchored left, headline-and-CTA block floating right with generous left margin — not a 50/50 split, closer to 45/55. Below the hero, the client logo strip runs full-bleed as a Mist Paper band. The value-props section centers a single headline stack, then drops into a 3-column equal-width card grid with 7-14px gaps. The work showcase shifts to a 2-column grid of large project cards, each card significantly taller than the feature cards, creating a clear rhythm change between the two sections. Section-to-section flow uses 56-80px vertical breathing room with no dividers — the whitespace is the only separator. Navigation is a single thin top bar, not sticky, not shadowed."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #003329"
    - "background: #ffffff"
    - "canvas: #e5e7eb"
    - "border: #e5e7eb"
    - "accent: #e6ffa3"
    - "primary action: #e6ffa3 (filled action)"

    info: "Example Component Prompts:"

    - "Create a hero section: White Sheet (#ffffff) background. Headline 'Websites designed' in UntitledSans 62px weight 600, #003329, letter-spacing -3.97px, line-height 0.80. Below it, italic accent line in BoogyBrutPoster 62px, #003329, normal tracking, line-height 0.83. Subtext paragraph in UntitledSans 17px weight 400, #52756e, 1.5 line-height, max-width 420px. Primary CTA button: #e6ffa3 fill, #003329 text 14px weight 600, 8px radius, 12px 21px padding. Secondary action below as ghost text link with leading arrow in #003329 14px."

    - "Create a feature card: #e6ffa3 background, 8px radius, 28px padding on all sides. Title in UntitledSans 24px weight 600, #003329, letter-spacing -0.6px. Body in UntitledSans 14px weight 400, #003329, line-height 1.5. Small 20px line icon in #003329 positioned top-right corner. No border, no shadow."

    - "Create a project showcase card: #ffffff background, 8px radius, no border, no shadow. Top holds a large preview image filling card width with 8px radius. Below image (24px gap): project name in UntitledSans 17px weight 600, #003329, letter-spacing -0.34px. Description in UntitledSans 14px weight 400, #52756e, line-height 1.5. Bottom-right metadata row: circular Carbon Rating badge (#e6ffa3 fill, #003329 12px weight 600 letter, 9999px radius) beside a 'Speed Index' label in UntitledSans 12px, #52756e. Closing 'See our case study' link in UntitledSans 14px, #003329. 28px card padding."

    - "Create a section eyebrow + headline block: Centered, 14px gap between eyebrow and headline. Eyebrow in UntitledSans 12px weight 400, #003329, letter-spacing 0.67px, prefixed by a small filled dot. Headline in UntitledSans 43px weight 600, #003329, letter-spacing -2.19px, line-height 0.90, followed by an italic accent in BoogyBrutPoster 43px, #003329."

    - "Create the navigation bar: Full-width, #ffffff background, 28px vertical padding. Left: logo 'hey low' in UntitledSans 17px weight 600, #003329, letter-spacing -0.34px. Right cluster with 21px horizontal gap between items: 'Work', 'About', 'Blog' in UntitledSans 14px weight 400, #003329, followed by a 'Contact' pill button — #ffffff fill, #e5e7eb 1px border, 8px radius, 12px 21px padding, #003329 text 14px."

  botanical_illustration_system:

    info: "Hand-drawn linework is a first-class component, not decoration. Style rules: single-weight 1.5-2px strokes, organic curves with visible hand wobble, Forest Ink (#003329) as the default fill with white negative space, Vivid Lime (#9bff48) used sparingly on one or two wing/leaf details per composition. Motif library: butterflies (symmetric wings, antennae), moths (feathered antennae, heavier bodies), leaves (asymmetric, 3-7 lobes), seed pods (oval, vein lines), fern fronds. Compositions should feel arranged, not scattered — typically grouped in semicircular or arc formations to read as a cohesive bouquet rather than floating elements. Never use solid fills, never use gradients, never use multiple stroke weights within one illustration."

  similar_brands:

    - "**Cargo (cargocollective.com)** — Same field-guide typographic approach — a tight geometric sans paired with an italic serif display accent, and a near-monochrome canvas with one bright color used as functional punctuation"
    - "**Apt Studio** — Independent creative agencies that use flat 8px-radius cards on white with a single botanical or organic illustration as the hero anchor"
    - "**Pentagram** — Editorial-style studio sites that rely on aggressive type tracking and asymmetric hero compositions rather than decorative chrome"
    - "**Resn** — Playful agency sites that mix hand-inked nature motifs with crisp UI components and a single lime/green accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-ink: #003329;
          --color-chartreuse-sprig: #e6ffa3;
          --color-deep-moss: #042725;
          --color-vivid-lime: #9bff48;
          --color-mist-paper: #e5e7eb;
          --color-white-sheet: #ffffff;
          --color-graphite: #000000;
          --color-sage-dust: #52756e;
          --color-pine-shadow: #33544c;
        
          /* Typography — Font Families */
          --font-untitledsans: 'UntitledSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-boogybrutposter: 'BoogyBrutPoster', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.67px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.34px;
          --text-subheading: 24px;
          --leading-subheading: 1.13;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -1.4px;
          --text-heading: 43px;
          --leading-heading: 0.9;
          --tracking-heading: -2.19px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.83;
          --tracking-heading-lg: -3.07px;
          --text-display: 62px;
          --leading-display: 0.8;
          --tracking-display: -3.97px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 56-80px;
          --card-padding: 28px;
          --element-gap: 7-14px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 13.8896px;
          --radius-full: 110px;
          --radius-full-2: 600px;
          --radius-full-3: 9000px;
          --radius-full-4: 999999px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 9999px;
          --radius-buttons: 8px;
          --radius-decorative: 13.89px;
          --radius-projectimages: 8px;
        
          /* Surfaces */
          --surface-mist-paper: #e5e7eb;
          --surface-white-sheet: #ffffff;
          --surface-chartreuse-sprig: #e6ffa3;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-ink: #003329;
          --color-chartreuse-sprig: #e6ffa3;
          --color-deep-moss: #042725;
          --color-vivid-lime: #9bff48;
          --color-mist-paper: #e5e7eb;
          --color-white-sheet: #ffffff;
          --color-graphite: #000000;
          --color-sage-dust: #52756e;
          --color-pine-shadow: #33544c;
        
          /* Typography */
          --font-untitledsans: 'UntitledSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-boogybrutposter: 'BoogyBrutPoster', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.67px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.34px;
          --text-subheading: 24px;
          --leading-subheading: 1.13;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -1.4px;
          --text-heading: 43px;
          --leading-heading: 0.9;
          --tracking-heading: -2.19px;
          --text-heading-lg: 52px;
          --leading-heading-lg: 0.83;
          --tracking-heading-lg: -3.07px;
          --text-display: 62px;
          --leading-display: 0.8;
          --tracking-display: -3.97px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 13.8896px;
          --radius-full: 110px;
          --radius-full-2: 600px;
          --radius-full-3: 9000px;
          --radius-full-4: 999999px;
        }