mother_design___style_reference:
  info: "> broadsheet manifesto in black ink"

  theme: "light"

  info: "Mother Design treats the browser as an editorial broadsheet: near-total monochrome, type doing all the expressive work, structure drawn in 1px ink rules rather than shadows or panels. The single chromatic note — a deep forest green at #306f09 — is so restrained it almost disappears, surfacing only as a near-invisible code-level accent. Display sizes push to 226px, making typography the hero of every screen; supporting text is set in a tight, slightly negative-tracked grotesque that reads as confident, not loud. Components are raw: bordered tabs, unframed thumbnails, vertical hairlines dividing the grid. The Times serif appears as a quiet editorial counterpoint, never as decoration. The result feels like a printed manifesto given a fixed URL — grids of ink on warm gray paper, where restraint IS the visual identity."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Newsprint | `#f4f4f4` | `--color-newsprint` | Soft section background, alternate surface, and quiet card fill. |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Navigation background, card surfaces, button fills, inverted text — pushes forward off the gray canvas |"
    info: "| Press Black | `#000000` | `--color-press-black` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. |"
    info: "| Foil Gray | `#808080` | `--color-foil-gray` | Secondary text, subdued link borders, metadata — sits behind Press Black as quiet annotation |"
    info: "| Ink Green | `#306f09` | `--color-ink-green` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"

  tokens___typography:

    basis___primary_typeface_across_all_ui__weight_400_for_body__links__and_most_running_text__weight_600_used_sparingly_for_the_small_uppercase_ish_labels_and_the_navigation_tabs__the_226px_size_at_1_0_line_height_is_the_signature___display_type_behaves_like_a_poster_headline__not_a_web_heading__negative_tracking_tightens_as_size_grows___0_04em_at_display___0_02em_at_mid___0_01em_at_body_____font_basis:
      - "**Substitute:** Inter, Suisse Int'l, or Neue Haas Grotesk"
      - "**Weights:** 400, 600"
      - "**Sizes:** 10, 14, 16, 48, 60, 110, 226"
      - "**Line height:** 1.00–1.50 (context-dependent: 1.0 for display, 1.5 for body)"
      - "**Letter spacing:** -0.04em at 226px, -0.04em at 110px, -0.02em at 60px, -0.02em at 48px, -0.01em at 16px, 0 at 14px and below"
      - "**Role:** Primary typeface across all UI. Weight 400 for body, links, and most running text; weight 600 used sparingly for the small uppercase-ish labels and the navigation tabs. The 226px size at 1.0 line-height is the signature — display type behaves like a poster headline, not a web heading. Negative tracking tightens as size grows: -0.04em at display, -0.02em at mid, -0.01em at body."

    basis_mono___used_for_technical_labels__metadata__timestamps__and_small_annotations__the__0_06em_letter_spacing_gives_it_the_feel_of_a_printed_caption_set_in_a_typewriter_face___a_deliberate_counterpoint_to_basis_s_tight_grotesque_____font_basis_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Berkeley Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.06em (8.4px at 14px)"
      - "**Role:** Used for technical labels, metadata, timestamps, and small annotations. The +0.06em letter-spacing gives it the feel of a printed caption set in a typewriter face — a deliberate counterpoint to Basis's tight grotesque."

    times___system_serif_used_as_a_rare_editorial_accent___appears_in_icon_and_small_body_contexts_where_a_note_of__newspaper__or__footnotes__is_wanted__its_presence_is_felt_more_than_seen__the_choice_signals_print_lineage_rather_than_decoration_____font_times:
      - "**Substitute:** Times New Roman, EB Garamond, or Source Serif"
      - "**Weights:** 400"
      - "**Sizes:** 14"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.06em"
      - "**Role:** System serif used as a rare editorial accent — appears in icon and small body contexts where a note of 'newspaper' or 'footnotes' is wanted. Its presence is felt more than seen; the choice signals print lineage rather than decoration."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| heading-sm | 48px | 1.1 | -0.96px | `--text-heading-sm` |"
      info: "| heading | 60px | 1 | -1.2px | `--text-heading` |"
      info: "| heading-lg | 110px | 1 | -4.4px | `--text-heading-lg` |"
      info: "| display | 226px | 1 | -9.04px | `--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: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tabs | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 160-200px"
      - "**Card padding:** 0px"
      - "**Element gap:** 20px"

  components:

    navigation_tab:
      role: "Top-level page links (Work, Information, News, Contact)"

      info: "A Basis 14px / weight 600 / -0.01em text label inside a 1px Press Black border, Bone White fill, no radius, 16px horizontal padding, 2px vertical padding. Multiple tabs sit edge-to-edge forming a segmented control. The brand mark (heart icon) sits in its own bordered cell to the left of the tab group. Tabs are rectangular, unornamented — they read as printed tabs on a file folder."

    brand_mark_cell:
      role: "Logo container at the far left of the nav row"

      info: "A small square (~32px) Bone White cell with a 1px Press Black border containing a Press Black heart glyph. Mirrors the visual weight of the nav tabs and anchors the brand within the same grid as the navigation."

    news_marquee_bar:
      role: "Headline/news ticker running across the top right"

      info: "Bone White fill, 1px Press Black border, Basis Mono 14px / weight 400 / +0.06em tracking, Press Black text. Headlines sit in a horizontal row separated by thin vertical Press Black rules. Reads as a printed dateline."

    theme_toggle_cluster:
      role: "Icon-only controls in the top-right corner"

      info: "Four small square cells (~32px each), 1px Press Black border, Bone White fill, each containing a single Press Black icon stroke (sun, moon, gear, etc.). Tiles sit edge-to-edge with no gap, forming a second segmented control. Icons are 1.5px stroke, geometric, no fill."

    portfolio_thumbnail:
      role: "Project preview tiles in the work grid"

      info: "Raw image tiles with zero border, zero radius, zero shadow, zero caption treatment above or below. Each tile fills its grid cell exactly; the image IS the card. Project titles and credits appear outside the grid in a small caption role. The lack of chrome lets the work — not the UI — carry attention."

    project_caption_block:
      role: "Title + role text below the work grid"

      info: "Left-aligned, no border. Project name in Basis 14px / weight 600, role/category text in Basis 14px / weight 400, both Press Black, line-height 1.2. Sits far below the grid with generous whitespace — the relationship is a footnote, not a label."

    manifesto_block:
      role: "Large editorial paragraph introducing the studio's voice"

      info: "Basis at display sizes (60–110px) / weight 400 / line-height 1.0 / letter-spacing -0.02em to -0.04em, Press Black. Flows full-width with no max-width constraint — the line length is controlled by the column count, not by a container. Inline links underlined in 1px Press Black. This is the closest the site comes to a 'hero' and it is pure type."

    section_display_header:
      role: "Monumental section titles (Rigor, Rebellion, Depth, Care)"

      info: "Basis 226px / weight 400 / line-height 1.0 / letter-spacing -0.04em, Press Black. Center-aligned within its grid cell. The cell is defined by 1px Press Black horizontal and vertical rules that frame the entire section like a table. The text floats inside the cell with ~120px of padding on all sides — the type breathes in negative space."

    grid_section_frame:
      role: "Container for 2-up section displays and content"

      info: "Full-bleed, no padding, no background, no radius. Divided by a single 1px Press Black vertical rule at the column midpoint. The vertical line is the only structural element — no cards, no fills, no spacing tricks. Top and bottom 1px Press Black horizontal rules bracket the section."

    service_list_item:
      role: "Vertical list of capabilities (Brand Strategy, Naming, etc.)"

      info: "Basis 60px / weight 400 / line-height 1.0 / letter-spacing -0.02em, Press Black. Left-aligned, stacked vertically with ~8px row gap. No bullets, no borders between items — the type rhythm itself creates separation. Sits in the right column of a 2-column grid; left column contains the section display header and descriptive body copy in a small mono label role."

    inline_link:
      role: "Hyperlinks within manifesto and body copy"

      info: "Press Black text with a 1px Press Black underline. No hover color change, no background, no arrow icon. Underline thickness matches the system's hairline border — links read as underlined copy in a print layout, not as interactive web affordances."

    section_label:
      role: "Small all-caps-style label above content blocks (e.g. 'How we do it', 'What we do')"

      info: "Basis Mono 14px / weight 400 / +0.06em tracking, Press Black. Sits at the top-left of a content area, establishing the section's category before the display type takes over."

  do_s_and_don_ts:

    do:
      - "Set display type at 226px with -0.04em letter-spacing and line-height 1.0 — the extreme scale is the signature, not an exception."
      - "Use only the five colors: #f4f4f4 canvas, #ffffff surface, #000000 text and rules, #808080 secondary, #306f09 as the only chromatic note."
      - "Structure all layout with 1px Press Black rules — vertical, horizontal, and as borders on interactive cells. Never use shadows or fills to separate regions."
      - "Use Basis Mono with +0.06em tracking for metadata, labels, and the news ticker. Reserve Basis for everything else; bring in Times only for the occasional editorial annotation."
      - "Keep card and thumbnail padding at 0px. Let raw images sit edge-to-edge in their grid cells with no chrome, border, or radius."
      - "Anchor the nav with a 1px-bordered segmented control: brand mark cell + tab group on the left, theme toggle cluster on the right. Bone White fill, no radius."
      - "Treat whitespace as a structural element — large vertical gaps (160-200px) between the portfolio grid and the next section are part of the system, not negative space to be filled."

    don_t:
      - "Do not introduce additional colors. Any new hue, even a desaturated one, will dilute the broadsheet identity. The green is a printer's mark, not a palette swatch."
      - "Do not add box-shadows, blurs, or any form of elevation. The system has no z-axis — depth is typographic."
      - "Do not round corners. Every border, button, and cell stays at 0px radius. Curvature would betray the printed-page metaphor."
      - "Do not cap display type at conventional web sizes (48-72px). The 226px / 110px scale is the point — shrinking it to 'feel more modern' removes the signature."
      - "Do not use weight 700 or 800. Basis 600 is the heaviest weight in the system; 400 does the work at display sizes because the size itself provides weight."
      - "Do not add icons inside buttons or cards. Icons live only in the theme toggle cluster and the brand mark cell."
      - "Do not center body copy or set paragraphs to a narrow max-width. The manifesto reads full-bleed; column width is controlled by the grid, not by a content container."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Newsprint | `#f4f4f4` | Page canvas — the warm gray 'paper' everything sits on |"
    info: "| 1 | Bone White | `#ffffff` | Navigation bar, button surfaces, and the few elevated card containers that need to step forward from the canvas |"

  elevation:

    info: "The system rejects elevation entirely. There are no drop shadows, no surface lifts, no depth illusions. Structure is communicated through 1px Press Black rules that slice the layout into a grid, and through the tonal step from Newsprint (#f4f4f4) to Bone White (#ffffff) for the navigation bar. Depth is typographic, not architectural — the 226px display type carries the weight that shadows would in a conventional UI."

  imagery:

    the_work_grid_is_the_imagery: "diverse, unframed, full-bleed thumbnails spanning product photography (soda can held against a rainbow sky), editorial poster design (Brooklyn Orioles type-heavy poster), brand identity systems (Babies type specimen), and 3D product render (Rolfr camera-can). No consistent photographic treatment — each project's thumbnail arrives raw, at full color, with no overlay, duotone, or filter. The page itself is text-dominant; imagery appears only in the portfolio grid and is treated as evidence of capability rather than atmosphere. Iconography is minimal: 1.5px stroke geometric glyphs confined to the theme toggle cluster and the heart brand mark. The visual language of the site is the visual language of a printed portfolio — let the work speak in full color against the otherwise black-on-gray page."

  layout:

    info: "Full-bleed edge-to-edge layout with no max-width container. The page is organized as a strict grid divided by 1px Press Black rules. The top row contains the nav (left: brand mark + segmented tabs, right: news marquee + theme toggles) in a fixed-height bar. Below the nav, the work grid is a 5-column row of thumbnail tiles with zero gap between cells — images touch. A large vertical gap (160-200px) separates the grid from the manifesto section, which is a full-width block of display-size running text. The 'How we do it' and 'What we do' sections use a 2-column grid split by a 1px vertical rule at the midpoint; the left column carries a small section label and body copy, the right column carries the monumental display type (Rigor/Rebellion, Depth/Care) or a vertical service list. Each major section is bracketed by 1px horizontal Press Black rules top and bottom. The page reads top-to-bottom as a printed document: header bar, portfolio spread, manifesto column, sectioned grid pages."

  editorial_system:

    info: "Mother Design's UI borrows its logic from print — specifically from broadsheet newspapers and design annuals. The signature moves: display type at poster scale (226px) with aggressive negative tracking, 1px ink rules instead of cards or shadows, a single warm-gray 'newsprint' canvas, and a Times serif used as quiet editorial counterpoint to the Basis grotesque. The only color in the system is Press Black; everything else is paper. An AI building a new page should treat the layout as a typeset page, not a web app: no max-width container, no centered body text, no rounded corners, no elevation. The grid is the chrome."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #f4f4f4"
    - "surface: #ffffff"
    - "border: #000000 (1px)"
    - "secondary text: #808080"
    - "accent: #306f09"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "*Section display header*: Render 'Rigor' at 226px Basis weight 400, color #000000, letter-spacing -0.04em, line-height 1.0, centered in a grid cell framed by 1px #000000 rules on all sides with ~120px internal padding."
    - "*Navigation tab*: Basis 14px weight 600, text 'Work', color #000000, background #ffffff, 1px #000000 border, 16px horizontal padding, 2px vertical padding, 0px radius. Place in a row of similar tabs edge-to-edge."
    - "*Service list item*: Basis 60px weight 400, text 'Brand Strategy', color #000000, letter-spacing -0.02em, line-height 1.0, left-aligned, stacked vertically with 8px row gap, no bullet, no border."
    - "*Portfolio thumbnail*: Full-bleed image filling a 5-column grid cell, 0px border, 0px radius, 0px padding, no caption inside the cell."
    - "*Section label*: Basis Mono 14px weight 400, text 'What we do', color #000000, letter-spacing 0.06em, line-height 1.2, positioned at the top-left of a content area."

  similar_brands:

    - "**Pentagram** — Same editorial agency tradition: 1px rules structuring the page, monochromatic canvas, display type doing the work of decoration, and a portfolio grid that lets the work arrive unframed."
    - "**Bureau Borsche** — Same broadsheet sensibility — massive type set tight, warm-gray backgrounds, and a refusal to round corners or add elevation. Both treat the browser as a typeset page."
    - "**Studio Dumbar** — Shared commitment to restrained color (essentially monochrome with one accent), grotesque sans-serif at extreme display sizes, and structural grids drawn in hairline rules rather than built from cards."
    - "**Anagrama** — Editorial agency sites that use the same playbook: canvas-light layout, oversized display headings with negative tracking, bordered segmented navigation, and a portfolio grid with no thumbnail chrome."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-newsprint: #f4f4f4;
          --color-bone-white: #ffffff;
          --color-press-black: #000000;
          --color-foil-gray: #808080;
          --color-ink-green: #306f09;
        
          /* Typography — Font Families */
          --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basis-mono: 'Basis Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.96px;
          --text-heading: 60px;
          --leading-heading: 1;
          --tracking-heading: -1.2px;
          --text-heading-lg: 110px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -4.4px;
          --text-display: 226px;
          --leading-display: 1;
          --tracking-display: -9.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-200: 200px;
        
          /* Layout */
          --section-gap: 160-200px;
          --card-padding: 0px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-tabs: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-newsprint: #f4f4f4;
          --surface-bone-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-newsprint: #f4f4f4;
          --color-bone-white: #ffffff;
          --color-press-black: #000000;
          --color-foil-gray: #808080;
          --color-ink-green: #306f09;
        
          /* Typography */
          --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basis-mono: 'Basis Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.96px;
          --text-heading: 60px;
          --leading-heading: 1;
          --tracking-heading: -1.2px;
          --text-heading-lg: 110px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -4.4px;
          --text-display: 226px;
          --leading-display: 1;
          --tracking-display: -9.04px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-200: 200px;
        }