helloivy___style_reference:
  info: "> Risograph-printed design journal on cream paper. A two-color editorial system where personality lives in typography, not color — the cream background, black ink, and one whisper-gray are the entire palette, and the quirky geometric display face carries all the brand energy the restrained palette deliberately withholds."

  theme: "light"

  info: "Helloivy uses a warm-cream editorial canvas with near-monochrome ink-black typography, giving the product a print-magazine feel rather than typical SaaS sterility. The display typeface (Unbounded) is geometric and slightly playful, carrying personality that the restrained palette deliberately withholds; Inter does the quiet labor of body, UI, and labels. Surfaces are flat — no shadows, no gradients — and the only elevation comes from filled black pills sitting on cream, or muted gray cards containing product commentary. Color is rationed: the cream canvas (#faf6f0) anchors the page, black owns headlines and primary actions, a single slate gray (#5e697f) handles secondary text, and white is reserved for product mockup surfaces. Everything else is space, type, and the occasional thin hairline border."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cream Paper | `#faf6f0` | `--color-cream-paper` | Page canvas, section backgrounds, card surfaces — the warm off-white ground that makes the whole site read like a print artifact rather than a screen |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Headlines, body text, primary filled buttons, logo mark, dividers, icons — the dominant structural color carrying almost all information |"
    info: "| Slate Whisper | `#5e697f` | `--color-slate-whisper` | Secondary body text, muted descriptions, helper text, subdued labels — the single desaturated accent that softens body copy without competing with headlines |"
    info: "| Charcoal | `#555555` | `--color-charcoal` | Secondary paragraph text, sub-labels, low-emphasis copy where Slate Whisper isn't deployed — fills the gap between ink-black headlines and whisper-gray annotations |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Product mockup surfaces, card-internal backgrounds, floating badge fills — the crisp inset color that product UI sits on, creating a paper-on-paper layering effect against the cream canvas |"

  tokens___typography:

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

    unbounded___display_and_hero_headlines_only__the_geometric__slightly_quirky_letterforms_are_the_brand_s_only_expressive_color___at_62px_and_82px_they_dominate_screens_with_editorial_confidence__the_slight_positive_tracking__0_01_0_02em_keeps_the_wide_geometric_shapes_from_feeling_cold__substitute__space_grotesk_for_a_similar_geometric_friendliness__or_dm_sans_display_____font_unbounded:
      - "**Substitute:** Space Grotesk"
      - "**Weights:** 400, 500"
      - "**Sizes:** 20px, 34px, 62px, 82px"
      - "**Line height:** 1.10–1.40"
      - "**Letter spacing:** 0.01em to 0.02em"
      - "**Role:** Display and hero headlines only. The geometric, slightly quirky letterforms are the brand's only expressive color — at 62px and 82px they dominate screens with editorial confidence. The slight positive tracking (+0.01–0.02em) keeps the wide geometric shapes from feeling cold. Substitute: Space Grotesk for a similar geometric-friendliness, or DM Sans Display."

    inter___body__ui__navigation__subheadings__button_labels__the_tight_negative_tracking__0_02em_at_all_sizes_gives_inter_a_confident_editorial_density_that_pairs_with_unbounded_s_looser_display_feel__weight_400_is_the_workhorse__500_600_for_subheadings__700_reserved_for_inline_emphasis_____font_inter:
      - "**Substitute:** Inter (Google Fonts)"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 27px, 32px"
      - "**Line height:** 1.20–1.60"
      - "**Letter spacing:** -0.02em across all sizes"
      - "**Role:** Body, UI, navigation, subheadings, button labels. The tight negative tracking (-0.02em) at all sizes gives Inter a confident editorial density that pairs with Unbounded's looser display feel. Weight 400 is the workhorse; 500–600 for subheadings; 700 reserved for inline emphasis."

    inter_bold___inter_bold___detected_in_extracted_data_but_not_described_by_ai____font_inter_bold:
      - "**Weights:** 700"
      - "**Sizes:** 18px"
      - "**Line height:** 1.6"
      - "**Role:** Inter-Bold — detected in extracted data but not described by AI"

    inter_medium___inter_medium___detected_in_extracted_data_but_not_described_by_ai____font_inter_medium:
      - "**Weights:** 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.5"
      - "**Role:** Inter-Medium — 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.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.6 | -0.32px | `--text-body` |"
      info: "| subheading | 18px | 1.6 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.5 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 27px | 1.4 | -0.54px | `--text-heading` |"
      info: "| heading-lg | 34px | 1.2 | 0.34px | `--text-heading-lg` |"
      info: "| display | 62px | 1.2 | 0.62px | `--text-display` |"
      info: "| display-lg | 82px | 1.1 | 1.64px | `--text-display-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| small | 8px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    primary_filled_button:
      role: "Hero CTAs, top-nav 'Get Started', primary conversion actions"

      info: "Filled black (#000000) background, white text, Inter 14px weight 500, fully rounded (9999px radius), horizontal padding 24px, vertical padding 10px. No shadow, no border. The entire button reads as a solid ink stamp on cream paper."

    ghost_pill_button:
      role: "Secondary actions, floating utility actions like 'Try it for free'"

      info: "Filled black (#000000) background with white text, 8px radius, fixed-positioned (bottom-right). Same ink-stamp treatment as the primary button but with a small icon prefix."

    navigation_text_link:
      role: "Top-nav items: Features, Pricing, Log in"

      info: "No fill, no border. Inter 14px weight 500, color #000000. Sits in the header bar with generous horizontal spacing (30px+ between items). The 'Get Started' pill button terminates the nav row."

    logo_wordmark:
      role: "Brand mark in nav and footer"

      info: "Lowercase 'hello ivy' in Inter 14px weight 500, #000000, with a thick black horizontal bar (4px height) underlining only the word 'hello' — the underline is the actual brand identifier, not the type."

    display_headline:
      role: "Hero and section openers"

      info: "Unbounded weight 500 at 62–82px, line-height 1.10–1.20, letter-spacing +0.01–0.02em, color #000000. The geometric letterforms at this scale carry the brand's personality. Never uses color other than black or charcoal."

    section_subhead:
      role: "Mid-page section titles ('Improve visibility, stay in the loop.')"

      info: "Inter weight 600 at 24–32px, line-height 1.40–1.50, color #5e697f. Stays subdued so the body paragraph beneath it can carry the real information."

    body_paragraph:
      role: "All explanatory copy beneath headlines"

      info: "Inter weight 400 at 16px, line-height 1.60, color #5e697f. Generous leading for the editorial feel; never tighter than 1.50."

    featured_card_cream_inset:
      role: "Inline feature callouts within a hero or section, e.g. the 'Instead of work happening all over the place…' block"

      info: "No fill — sits on the cream canvas — with a thin 1px #000000 border or subtle gray background. 24px padding, 8px radius. Contains a short lead phrase in Inter 16px weight 600 black followed by body copy in #5e697f."

    video_preview_tile:
      role: "Embedded \"Meet Hello Ivy in 60 seconds\" teaser"

      info: "Gray circular play button centered on a neutral field, paired with Inter 16px weight 600 title and #5e697f descriptor to the right. The circle is roughly 64px diameter with a 1px border."

    logo_grid_cell:
      role: "Social proof section: \"USED BY THE MOST PRODUCTIVE DESIGN TEAMS AND AGENCIES\""

      info: "Grid of client/agency logos in monochrome (black or 40% black opacity), separated by thin vertical and horizontal hairlines. Logos sit centered in equal-width cells; the grid label is Inter 12px weight 500 uppercase, letter-spacing +0.05em, color #5e697f."

    product_mockup_panel:
      role: "In-context product UI screenshots within feature sections"

      info: "White (#ffffff) background panel with 8px radius, containing a realistic product UI render. Sits on the cream canvas to create a paper-on-paper layering effect. Labeled with a small Inter 12–14px weight 500 caption above."

    feature_split_block:
      role: "Two-column sections pairing a visual on one side with a text column on the other"

      left_column: "product mockup panel with caption. Right column: subhead in #5e697f Inter 24px, body copy in #5e697f Inter 16px, with bold inline emphasis. 80px vertical gap between sections, 24px gap between subhead and body."

    round_badge_stamp:
      role: "Decorative credibility mark (the \"Hi Creative Teams\" circle)"

      info: "Circular text stamp — Inter 10–12px uppercase arranged radially around a center, with a thin 1px border circle. 80–100px diameter. Color #5e697f or #000000. Functions as editorial ornament, not UI element."

    text_inline_link:
      role: "Emphasized terms within body paragraphs (e.g. 'Feed' tool, 'collaboration')"

      info: "Underlined, color #000000 or #5e697f, Inter 16px weight 500. The underline is the only differentiator from body text — no color change, no background."

  do_s_and_don_ts:

    do:
      - "Set every page background to #faf6f0 — the warm cream is the system's signature; pure white pages break the editorial identity"
      - "Use Unbounded for display sizes 34px and above, Inter for everything else — never substitute a different display family"
      - "Apply letter-spacing -0.02em to all Inter text, regardless of size — the tight tracking is what makes the body type feel editorial rather than utilitarian"
      - "Keep filled primary buttons at 9999px radius (fully rounded pill) with #000000 fill and white text — no exceptions"
      - "Use #5e697f for all secondary text; reserve #000000 strictly for headlines, primary actions, and the logo"
      - "Separate sections with generous vertical breathing room (80px+) rather than dividers or background-color shifts"
      - "Render product UI mockups on #ffffff panels with 8px radius to create the paper-on-paper layering against the cream canvas"

    don_t:
      - "Don't introduce a brand color — the entire palette is black, cream, and slate; adding blue, purple, or green breaks the two-color editorial system"
      - "Don't apply drop shadows to cards, buttons, or sections — the flatness is intentional; elevation comes from color contrast only"
      - "Don't use Inter for display headlines above 34px — Unbounded's geometric character is what gives the brand its personality"
      - "Don't tighten body line-height below 1.50 — the generous leading is part of the editorial reading rhythm"
      - "Don't use #000000 for body paragraphs — it must be #5e697f or #555555 to preserve the ink-on-paper hierarchy"
      - "Don't round section cards at large radii (16px+) — keep them at 8px or less; the only fully-rounded elements are action buttons"
      - "Don't add gradients to backgrounds, buttons, or text — the system is strictly flat; gradients would break the print-artifact metaphor"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Canvas | `#faf6f0` | Page background, full-bleed sections — the warm paper ground |"
    info: "| 1 | Pure White Inset | `#ffffff` | Product mockup panels, card-internal backgrounds, floating elements that need to sit forward of the cream |"
    info: "| 2 | Ink Pill | `#000000` | Filled primary action buttons, logo wordmark, high-contrast overlay elements |"

  elevation:

    info: "No shadows. The design uses flat surfaces and color contrast alone for hierarchy — black-on-cream for primary actions, white-on-cream for inset product cards, and thin hairline borders for section dividers. This flatness is core to the print-editorial identity; introducing drop shadows would push the system toward generic SaaS territory."

  imagery:

    info: "The site is overwhelmingly text-and-UI, with imagery limited to two categories: (1) product UI mockups rendered as white panels embedded in the cream canvas — these are tight, unglamorous product crops showing actual interface states, not stylized marketing renders; and (2) a monochrome logo grid for social proof, where client logos are displayed in single-color black at reduced opacity. There is no lifestyle photography, no abstract illustration, no 3D — the visual language is editorial restraint. Decorative elements are limited to a small circular 'Hi Creative Teams' text stamp that functions as an editorial ornament."

  layout:

    info: "Max-width 1200px centered, with a full-bleed cream canvas that extends to viewport edges. The hero is a tall text-first block: a compact top nav (logo left, links right, CTA pill), then a 62–82px Unbounded headline left-aligned spanning nearly the full content width, followed by a single paragraph of body copy. Below the hero, a horizontal card row splits the viewport into two: a cream feature card on the left, a video preview tile on the right. The social proof section is a full-width logo grid with thin hairlines. Feature sections alternate between a 2-column split (product mockup left, text column right) and centered text blocks. Vertical rhythm is spacious — 80px between sections, no colored bands or alternating backgrounds, just the continuous cream canvas. A floating 'Try it for free' pill sits fixed in the bottom-right corner."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #000000"
    - "text (secondary): #5e697f"
    - "background (canvas): #faf6f0"
    - "surface (inset/elevated): #ffffff"
    - "border (hairline): #000000 at 1px or #5e697f at 1px"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Hero headline block*: Background #faf6f0. Headline in Unbounded weight 500, 82px, line-height 1.10, letter-spacing 0.02em, color #000000. Body paragraph beneath in Inter weight 400, 18px, line-height 1.60, letter-spacing -0.02em, color #5e697f. No buttons, no imagery — just type on cream."

    - "*Primary navigation with filled action*: Horizontal nav bar, #faf6f0 background. Left: 'hello ivy' wordmark in Inter 14px weight 500 #000000 with a 4px-thick black bar under 'hello'. Right: 'Features' / 'Pricing' / 'Log in' in Inter 14px weight 500 #000000 with 30px gaps, then a 'Get Started' pill — #000000 background, white Inter 14px weight 500 text, 9999px radius, 10px vertical / 24px horizontal padding."

    - "*Feature split section*: Two-column layout, 1200px max-width, #faf6f0 background. Left column (55%): white (#ffffff) product mockup panel, 8px radius, 24px padding internally. Right column (45%): subhead in Inter 24px weight 600 #5e697f, 24px gap, body in Inter 16px weight 400 #5e697f, line-height 1.60. No card background on the text column."

    - "*Logo grid social proof*: Full-width section, #faf6f0 background. Label above in Inter 12px weight 500 uppercase #5e697f with +0.05em tracking, reading 'USED BY THE MOST PRODUCTIVE DESIGN TEAMS AND AGENCIES'. Below: 4-column grid of client logos, each cell 200px wide, 80px tall, logos in #000000 at 60% opacity, separated by 1px #5e697f hairlines."

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

  similar_brands:

    - "**Notion** — Both use a single-color product UI palette where the product screenshot is the main visual element on a minimal background, though Notion uses white instead of cream and Inter instead of a display face"
    - "**Linear** — Same restrained near-monochrome approach with flat surfaces, generous spacing, and no shadows — though Linear is dark-mode and uses purple as its only accent"
    - "**Are.na** — Both embrace a print-editorial visual language with warm off-white backgrounds, serif/geometric display type, and a near-absence of color — a deliberate anti-SaaS aesthetic"
    - "**Read.cv** — Same warm cream canvas, same monochrome ink approach, same editorial typography pairing where personality comes from type choices rather than color"
    - "**Pitch** — Both use a single dominant product color (black for Pitch's dark mode, cream for Helloivy) with the display typeface doing the brand work, and both prioritize flat surfaces over elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-paper: #faf6f0;
          --color-ink-black: #000000;
          --color-slate-whisper: #5e697f;
          --color-charcoal: #555555;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-unbounded: 'Unbounded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-bold: 'Inter-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-medium: 'Inter-Medium', 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.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.5;
          --tracking-heading-sm: -0.48px;
          --text-heading: 27px;
          --leading-heading: 1.4;
          --tracking-heading: -0.54px;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 0.34px;
          --text-display: 62px;
          --leading-display: 1.2;
          --tracking-display: 0.62px;
          --text-display-lg: 82px;
          --leading-display-lg: 1.1;
          --tracking-display-lg: 1.64px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 100px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-small: 8px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-cream-canvas: #faf6f0;
          --surface-pure-white-inset: #ffffff;
          --surface-ink-pill: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-paper: #faf6f0;
          --color-ink-black: #000000;
          --color-slate-whisper: #5e697f;
          --color-charcoal: #555555;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-unbounded: 'Unbounded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-bold: 'Inter-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-medium: 'Inter-Medium', 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.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.5;
          --tracking-heading-sm: -0.48px;
          --text-heading: 27px;
          --leading-heading: 1.4;
          --tracking-heading: -0.54px;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 0.34px;
          --text-display: 62px;
          --leading-display: 1.2;
          --tracking-display: 0.62px;
          --text-display-lg: 82px;
          --leading-display-lg: 1.1;
          --tracking-display-lg: 1.64px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-40: 40px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 100px;
          --radius-full-2: 9999px;
        }