earlydog___style_reference:
  info: "> Bauhaus poster pinned to a cloud architect's corkboard — cream paper, primary-color shapes, oversized geometric type."

  theme: "light"

  info: "Earlydog operates as a Bauhaus design lab transplanted into DevOps — warm cream paper backgrounds, near-black typography, one vivid blue accent, and geometric illustrations built from primary-color primitives (circles, squares, checkerboards, starbursts, triangles). The display face (degular-display) sets oversized 52–116px headlines with positive letter-spacing, an unusual choice that gives the type geometric breathing room rather than the tight editorial tension most display fonts chase. Body copy stays at 18px in a humanist sans (usual), keeping reading temperature warm against the eggshell canvas. Components are intentionally sparse: pill-shaped outlined buttons, ghost links with play-triangle markers, and generous 96px section gaps that let the geometric artwork breathe. The functional palette is restricted to three colors — cream, ink, blue — while illustrations carry the full primary-color spectrum as decorative punctuation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cream Paper | `#fff9f0` | `--color-cream-paper` | Page canvas, card surfaces, button fills — warm off-white gives the entire interface a paper-like, print-graphic feel that warms the cool blue accent |"
    info: "| Midnight Ink | `#000609` | `--color-midnight-ink` | Primary text, heading strokes, hairline borders, outlined button frames, logo mark — near-black with a barely-perceptible blue tint keeps it from feeling dead |"
    info: "| Signal Blue | `#0a65db` | `--color-signal-blue` | Accent headings, icon strokes, active nav emphasis, illustration accent shapes — the single chromatic functional color, used sparingly to mark emphasis and brand voice |"
    info: "| Ember Red | `#ee4623` | `--color-ember-red` | Illustration accent — primary-color punctuation in geometric compositions, starbursts, circular forms, and triangle fills |"
    info: "| Saffron Yellow | `#ffd23f` | `--color-saffron-yellow` | Illustration accent — warm primary used in geometric blocks, semicircles, and composition fills alongside Ember Red and Signal Blue |"
    info: "| Blush Pink | `#f4c6c6` | `--color-blush-pink` | Illustration accent — softens the primary-color palette in geometric compositions, used in rectangles and overlapping shapes |"

  tokens___typography:

    degular_display___display_headlines_for_all_section_headings_and_the_hero_title__the_single_weight_700_and_positive_letter_spacing_0_009_0_019em_create_a_wide_set__geometric_presence___letterspacing_increases_with_size__the_opposite_of_conventional_display_type__this_gives_116px_headlines_airy_breathing_room_rather_than_dense_visual_mass__matching_the_bauhaus_illustration_language_of_separated_geometric_forms_____font_degular_display:
      - "**Substitute:** Archivo Black, Space Grotesk, or any wide geometric grotesque"
      - "**Weights:** 700"
      - "**Sizes:** 52px, 80px, 116px"
      - "**Line height:** 1.03–1.23"
      - "**Letter spacing:** 0.009em at 52px, 0.013em at 80px, 0.019em at 116px"
      - "**Role:** Display headlines for all section headings and the hero title. The single weight 700 and positive letter-spacing (0.009–0.019em) create a wide-set, geometric presence — letterspacing INCREASES with size, the opposite of conventional display type. This gives 116px headlines airy breathing room rather than dense visual mass, matching the Bauhaus illustration language of separated geometric forms."

    usual___body_copy__navigation__buttons__links__footer__card_descriptions__the_1_78_1_82_line_height_is_notably_generous_for_sans_serif_body_text___typical_saas_body_sits_at_1_5_1_6__but_earlydog_s_open_leading_reinforces_the_spacious_layout__weight_700_is_used_sparingly_for_inline_emphasis_____font_usual:
      - "**Substitute:** Inter, IBM Plex Sans, or DM Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 16px, 18px, 22px"
      - "**Line height:** 1.78–1.82"
      - "**Letter spacing:** normal"
      - "**Role:** Body copy, navigation, buttons, links, footer, card descriptions. The 1.78–1.82 line-height is notably generous for sans-serif body text — typical SaaS body sits at 1.5–1.6, but Earlydog's open leading reinforces the spacious layout. Weight 700 is used sparingly for inline emphasis."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.78 | — | `--text-caption` |"
      info: "| body | 18px | 1.82 | — | `--text-body` |"
      info: "| subheading | 22px | 1.82 | — | `--text-subheading` |"
      info: "| heading-sm | 52px | 1.23 | 0.47px | `--text-heading-sm` |"
      info: "| heading | 80px | 1.1 | 1.04px | `--text-heading` |"
      info: "| display | 116px | 1.03 | 2.2px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| buttons | 9999px |"
      info: "| illustrations | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 32px"
      - "**Element gap:** 16-32px"

  components:

    outlined_pill_button:
      role: "Primary interactive element — all CTAs and section links use this variant"

      fully_rounded_pill_border_radius: "9999px), 1px solid Midnight Ink (#000609) border, Cream Paper (#fff9f0) fill, text in usual 16px weight 700 Midnight Ink. Horizontal padding 30px, vertical padding 14–20px. No fill, no shadow — the border IS the button. Examples: 'Why you need us', 'What we do', 'Talk to us'."

    ghost_link_with_triangle:
      role: "Minimal navigation and inline text links"

      info: "Plain Midnight Ink text in usual 16px weight 700, followed by a small right-pointing triangle marker (▸) in Midnight Ink. No underline, no background. Used for header CTA ('Talk to us ▶') and inline section links."

    hamburger_menu_icon:
      role: "Top-left navigation trigger"

      info: "Two horizontal black bars (Midnight Ink) stacked with 2px gap. Sits at 44px from top, paired with the vertical EARLYDOG wordmark below it. Clean, minimal — the menu icon is decorative architecture, not a brand mark."

    vertical_wordmark:
      role: "Brand identity anchor in the left rail"

      info: "EARLYDOG rotated 90° counter-clockwise, set in usual 16px weight 700 Midnight Ink, letter-spacing normal. Sits in the left margin as a fixed brand signature, paired with a small geometric 'e' glyph above the rotated text."

    hero_display_heading:
      role: "First-fold headline anchoring the page"

      info: "degular-display 80px weight 700, line-height 1.10, letter-spacing +1.04px. Two-tone treatment: 'Your Cloud' in Midnight Ink, 'Ops Team' in Signal Blue. The blue second-line is the only chromatic text on the page — a deliberate accent that mirrors the blue shapes in the adjacent illustration."

    body_paragraph_block:
      role: "Descriptive copy beneath section headings"

      info: "usual 18px weight 400 Midnight Ink, line-height 1.82, max-width ~480px. Generous leading and short line length create a calm, editorial reading rhythm against the cream background."

    section_heading_sub_display:
      role: "Section-level display text for content blocks like 'Your own Ops Team' and 'Managed Kubernetes'"

      info: "degular-display 52px weight 700, line-height 1.23, letter-spacing +0.47px, Midnight Ink. Smaller than the hero display but follows the same wide-set geometric character."

    geometric_illustration_block:
      role: "Brand-defining visual element — appears in hero and alternating sections"

      info: "Square or near-square composition (~520px) built from Bauhaus primitives: solid color rectangles, circles, semicircles, triangles, checkerboard grids (8×8 black/cream), and thin-line starburst patterns radiating from a point. Color palette restricted to Ember Red, Saffron Yellow, Signal Blue, Blush Pink, Midnight Ink, and Cream Paper. All shapes have sharp 0px corners — no rounded forms. Often contains a 3×3 or 4×4 grid of sub-shapes. Functions as the page's visual identity, not decoration."

    two_column_feature_section:
      role: "Content block layout — alternates illustration-left/text-right and text-left/illustration-right"

      info: "Two equal columns separated by 104px horizontal margin within a max-width container. One column holds a geometric illustration block, the other holds a section heading + body paragraph + pill button. Vertical spacing between sections: 96px. No card backgrounds, no dividers — sections flow directly on the cream canvas."

    starburst_line_pattern:
      role: "Decorative element within illustrations"

      info: "Thin (1px) Midnight Ink lines radiating from a single point at 15° intervals, filling a circular area. Always overlaid on a cream or blue square within the composition. Functions as a visual texture/energy marker, not a stand-alone element."

    checkerboard_grid:
      role: "Decorative geometric element within illustrations"

      info: "8×8 alternating Midnight Ink and Cream Paper squares. Appears as a solid block within larger compositions. No border, sharp 0px edges — the grid IS the shape."

  do_s_and_don_ts:

    do:
      - "Use degular-display 700 for all headings — never substitute a different weight or face for display text"
      - "Set display headings at 52, 80, or 116px with the corresponding positive letter-spacing (0.009–0.019em) — letter-spacing scales WITH size, not against it"
      - "Use border-radius: 9999px for all buttons and tags — pill shape is the only radius in the system"
      - "Build illustrations from Bauhaus primitives: circles, squares, triangles, checkerboards, starbursts, semicircles — all with sharp 0px corners"
      - "Restrict the UI palette to three colors (#fff9f0, #000609, #0a65db) — let illustrations carry the primary-color spectrum"
      - "Maintain 96px vertical gaps between major sections to preserve the spacious, poster-like rhythm"
      - "Pair body text at 18px/1.82 with a max-width of ~480px for editorial readability"

    don_t:
      - "Don't use rounded corners on illustrations, cards, or decorative shapes — everything geometric is sharp 0px"
      - "Don't use filled colored buttons — all interactive elements are outlined pills with 1px Midnight Ink border"
      - "Don't apply negative letter-spacing to display headings — the positive tracking IS the brand voice"
      - "Don't introduce more than one chromatic functional color — Signal Blue is the sole accent; other primary colors live only in illustrations"
      - "Don't use body text below 16px or with line-height tighter than 1.78 — the open leading is part of the warm, spacious feel"
      - "Don't add drop shadows, gradients, or glows — the system is flat, print-graphic, and depthless"
      - "Don't use photographic imagery or realistic illustrations — the visual language is strictly geometric and abstract"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Cream Canvas | `#fff9f0` | Page background across all sections |"
    info: "| 2 | Signal Blue Panel | `#0a65db` | Accent surface for illustration blocks containing the blue base — appears inside artwork, not as page chrome |"

  elevation:

    info: "Earlydog uses zero elevation. The design is deliberately flat — surfaces are defined by color contrast (cream canvas, midnight ink shapes) and geometric composition, not shadows. Depth is implied through overlapping geometric forms within illustrations, not through z-axis shadow stacks. This flatness reinforces the print-poster, Bauhaus-influenced aesthetic."

  imagery:

    info: "Zero photography. The entire visual system is built from flat geometric illustrations: Bauhaus-inspired compositions of circles, squares, triangles, checkerboards, starbursts, and semicircles rendered in a primary-color palette (Ember Red, Saffron Yellow, Signal Blue, Blush Pink, Midnight Ink, Cream Paper). Illustrations are square or near-square blocks (~500–550px), placed as compositional counterparts to text columns. All shapes have sharp corners. The illustrations function as brand identity markers — they are not decorative supporting visuals but the primary visual voice of the site. No icons beyond simple geometric marks; no product screenshots; no photography of any kind."

  layout:

    info: "Two-column alternating layout on a full-bleed cream canvas. The page is not contained in a max-width box — instead, the left rail holds a fixed vertical wordmark and hamburger menu, while content flows in a ~1200px centered column. Hero is text-left/illustration-right with a two-tone display heading ('Your Cloud' in ink, 'Ops Team' in blue). Subsequent sections alternate: illustration-left/text-right, then text-left/illustration-right. No card grids, no pricing tables, no blog feeds. Each section is a single text+illustration pairing with 96px vertical breathing room between them. Navigation is minimal: hamburger menu (left rail) and a single ghost link CTA in the top-right. The layout reads as a curated series of editorial spreads, not a typical SaaS page."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #fff9f0 (Cream Paper)"
    - "text: #000609 (Midnight Ink)"
    - "border: #000609 (Midnight Ink, 1px)"
    - "accent: #0a65db (Signal Blue)"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Hero Section**: Cream Paper (#fff9f0) full-bleed background. Two-column layout: left column holds a display heading in degular-display 80px weight 700, line-height 1.10, letter-spacing +1.04px — first line in Midnight Ink (#000609), second line in Signal Blue (#0a65db). Below: body paragraph in usual 18px weight 400, line-height 1.82, Midnight Ink, max-width 480px. Right column: a 520px square geometric illustration built from flat Bauhaus primitives — circles, squares, triangles, a checkerboard grid, and a starburst — using Ember Red (#ee4623), Saffron Yellow (#ffd23f), Signal Blue (#0a65db), Blush Pink (#f4c6c6), and Midnight Ink on Cream Paper. All shapes have 0px border-radius."

    - "**Outlined Pill Button**: 9999px border-radius, 1px solid Midnight Ink (#000609) border, Cream Paper (#fff9f0) fill, text in usual 16px weight 700 Midnight Ink, padding 14px vertical × 30px horizontal. No shadow, no gradient."

    - "**Section Heading + Body**: degular-display 52px weight 700, line-height 1.23, letter-spacing +0.47px, Midnight Ink. Body below in usual 18px weight 400, line-height 1.82, Midnight Ink, max-width 480px. Vertical spacing from heading to body: 24px. Vertical spacing from section to next section: 96px."

    - "**Geometric Illustration Block**: 520×520px composition on Cream Paper background. Build from: a solid Signal Blue square (upper-left quadrant) containing a white circle with a small black dot (eye motif); a solid Ember Red circle (upper-center); an 8×8 Midnight Ink/Cream Paper checkerboard square (upper-right); a starburst of thin 1px Midnight Ink lines radiating from a point in the lower-left; and assorted triangles and semicircles in Saffron Yellow, Blush Pink, and Signal Blue filling the lower half. All shapes are flat, no shadows, 0px border-radius."

    - "**Ghost Link with Triangle Marker**: Text in usual 16px weight 700 Midnight Ink, followed by a small ▸ triangle in Midnight Ink. No underline, no background, no padding. Used for top-bar CTAs and inline section links."

  similar_brands:

    - "**Pentagram** — Same Bauhaus-influenced geometric illustration language, primary-color compositions, and oversized display type paired with generous white space"
    - "**Figma Config** — Same flat geometric illustration approach with primary colors, bold display headings, and editorial-style section layouts on warm canvas"
    - "**Linear** — Same confident display type at large sizes, generous section spacing, and minimal UI chrome that lets a single accent color carry brand identity"
    - "**Stripe Sessions** — Same editorial-spread layout pattern with alternating text/visual columns, warm off-white canvas, and oversized geometric display headings"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-paper: #fff9f0;
          --color-midnight-ink: #000609;
          --color-signal-blue: #0a65db;
          --color-ember-red: #ee4623;
          --color-saffron-yellow: #ffd23f;
          --color-blush-pink: #f4c6c6;
        
          /* Typography — Font Families */
          --font-degular-display: 'degular-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-usual: 'usual', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.78;
          --text-body: 18px;
          --leading-body: 1.82;
          --text-subheading: 22px;
          --leading-subheading: 1.82;
          --text-heading-sm: 52px;
          --leading-heading-sm: 1.23;
          --tracking-heading-sm: 0.47px;
          --text-heading: 80px;
          --leading-heading: 1.1;
          --tracking-heading: 1.04px;
          --text-display: 116px;
          --leading-display: 1.03;
          --tracking-display: 2.2px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 32px;
          --element-gap: 16-32px;
        
          /* Border Radius */
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-buttons: 9999px;
          --radius-illustrations: 0px;
        
          /* Surfaces */
          --surface-cream-canvas: #fff9f0;
          --surface-signal-blue-panel: #0a65db;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-paper: #fff9f0;
          --color-midnight-ink: #000609;
          --color-signal-blue: #0a65db;
          --color-ember-red: #ee4623;
          --color-saffron-yellow: #ffd23f;
          --color-blush-pink: #f4c6c6;
        
          /* Typography */
          --font-degular-display: 'degular-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-usual: 'usual', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.78;
          --text-body: 18px;
          --leading-body: 1.82;
          --text-subheading: 22px;
          --leading-subheading: 1.82;
          --text-heading-sm: 52px;
          --leading-heading-sm: 1.23;
          --tracking-heading-sm: 0.47px;
          --text-heading: 80px;
          --leading-heading: 1.1;
          --tracking-heading: 1.04px;
          --text-display: 116px;
          --leading-display: 1.03;
          --tracking-display: 2.2px;
        
          /* Spacing */
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-120: 120px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-full: 9999px;
        }