dash_digital_studio___style_reference:
  info: "> Editorial museum on warm paper. A gallery where giant whisper-weight typography floats over off-white walls and full-bleed product photography does all the talking."

  theme: "light"

  info: "Dash Digital Studio runs a strictly achromatic editorial system — warm off-white canvases, near-black type, and absolutely zero chromatic accent. The entire visual language is carried by two type weights of Founders Grotesk at extreme sizes: whisper-light 300 for monumental display headlines (70–101px) and regular 400 for body and navigation. Letter-spacing tightens aggressively at large sizes (-0.0600em at display) while line-heights compress to 0.80–0.88, making the giant headlines feel architectural and sculptural rather than promotional. Work is presented like a gallery: full-bleed product photography inside 2-up case study frames, minimal UI chrome, pill-shaped dark badges for actions, and hairline rules separating brand lists. The absence of color is the system — every signal (hierarchy, emphasis, interaction) must be built from type weight, scale, spacing, and the tonal shift between #fafafa, #f0f0f0, and #2a2a2a."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Carbon Black | `#2a2a2a` | `--color-carbon-black` | Primary text, nav links, body copy, badge text, footer copy — the near-black that carries every word on the site |"
    info: "| Bone | `#f0f0f0` | `--color-bone` | Page canvas and primary surface — the warm off-white that fills every section background |"
    info: "| Ink | `#000000` | `--color-ink` | Maximum-contrast text and hard borders, reserved for the strongest emphasis moments |"
    info: "| Linen | `#fafafa` | `--color-linen` | Subtle elevated surface and section dividers — one step lighter than the canvas for soft separation |"
    info: "| Ash | `#d6d6d6` | `--color-ash` | Muted fills, hairline borders, and disabled/inactive surface treatments |"
    info: "| Parchment | `#f0edea` | `--color-parchment` | Alternate warm section background — introduces a barely-perceptible cream tint to break the neutral flow |"
    info: "| Stone | `#bcbcb4` | `--color-stone` | Deepest mid-gray — used for low-emphasis supporting text and the dimmest UI separators |"
    info: "| Clay | `#ccc4b9` | `--color-clay` | Warm mid-gray for transitional surfaces between bone and parchment |"

  tokens___typography:

    founders_grotesk___sole_brand_typeface__weight_300_at_70_101px_for_the_monumental_editorial_hero_and_section_titles__weight_400_at_12_22px_for_body__nav__meta_labels__and_case_study_descriptions__the_extreme_weight_contrast_300_vs_400_and_the_5__size_jump_from_body_to_display_are_the_core_typographic_moves___no_other_type_system_in_the_palette_____font_founders_grotesk:
      - "**Substitute:** Söhne, Inter, GT America, Neue Haas Grotesk"
      - "**Weights:** 300, 400"
      - "**Sizes:** 12, 14, 16, 17, 22, 40, 70, 101"
      - "**Line height:** 0.80–1.20"
      - "**Letter spacing:** -0.0600em at 101px, -0.0300em at 70px, -0.0230em at 40px, -0.0200em at 22px, -0.0180em at 16–17px, -0.0180em at 12–14px"
      - "**OpenType features:** `\"ss01\" on, \"ss02\" on, \"tnum\" on`"
      - "**Role:** Sole brand typeface. Weight 300 at 70–101px for the monumental editorial hero and section titles; weight 400 at 12–22px for body, nav, meta labels, and case study descriptions. The extreme weight contrast (300 vs 400) and the 5× size jump from body to display are the core typographic moves — no other type system in the palette."

    editorial_neue___secondary_editorial_serif_used_sparingly_as_an_accent_counterpoint_to_founders_grotesk___appears_in_specific_body_or_pull_text_moments_to_break_the_grotesque_monotony_with_a_classical_note__tight__0_0600em_tracking_and_0_90_line_height_match_the_display_discipline_____font_editorial_neue:
      - "**Substitute:** Tiempos Text, Lyon Display, Source Serif Pro"
      - "**Weights:** 400"
      - "**Sizes:** 16"
      - "**Line height:** 0.90"
      - "**Letter spacing:** -0.0600em"
      - "**Role:** Secondary editorial serif used sparingly as an accent counterpoint to Founders Grotesk — appears in specific body or pull-text moments to break the grotesque monotony with a classical note. Tight -0.0600em tracking and 0.90 line-height match the display discipline."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.17 | -0.018px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | -0.018px | `--text-body-sm` |"
      info: "| body-lg | 17px | 1.2 | -0.018px | `--text-body-lg` |"
      info: "| subheading | 22px | 1.17 | -0.02px | `--text-subheading` |"
      info: "| heading-sm | 40px | 0.9 | -0.023px | `--text-heading-sm` |"
      info: "| display | 70px | 0.88 | -0.03px | `--text-display` |"
      info: "| display-xl | 101px | 0.8 | -0.06px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| inputs | 4px |"
      info: "| buttons | 999px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 20-24px"
      - "**Element gap:** 12-20px"

  components:

    pill_action_button:
      role: "Primary call-to-action for case studies and work links"

      info: "Solid #2a2a2a background with #fafafa text in Founders Grotesk 400 at 12px, uppercase tracked label. Fully rounded 999px radius. Horizontal padding ~14px, vertical padding ~4px. No border, no shadow. Reads as a small dark dot against the warm canvas."

    text_nav_link:
      role: "Top navigation primary items (Work, Case Studies, Services, About, Insights, Contact)"

      info: "Founders Grotesk 400 at 12–14px, #2a2a2a, uppercase. No underline, no background, no border. Hover state may shift to #000000. Separated by 29px horizontal padding. No active state indicator beyond color shift."

    brand_mark_wordmark:
      role: "Top-left logo"

      info: "DashDigital in Founders Grotesk 400 at 12–14px, #2a2a2a, followed by a superscript registered trademark glyph (®). No icon. Sits flush left in the header."

    editorial_display_heading:
      role: "Hero and section-level headlines"

      info: "Founders Grotesk 300 at 70–101px, #2a2a2a, uppercase. Line-height 0.80–0.88, letter-spacing -0.0300em to -0.0600em. Sets across the full content width with no max-line constraint — lines are intentionally long to feel monumental. No subheading, no eyebrow above."

    case_study_card:
      role: "Portfolio project tile in the work grid"

      info: "Two-up grid layout. Each card has a 20px top padding block containing meta tags (uppercase, 12px, #2a2a2a) and a project name (uppercase, 22px, weight 400). Below sits a full-bleed square/landscape product photograph with 0px radius, no border, no shadow — the image is the card. Cards separated by ~29px column gap."

    meta_tag_row:
      role: "Discipline/service labels above case study titles"

      info: "Founders Grotesk 400 at 12px, uppercase, #2a2a2a. Multiple tags joined with middot or middle-dot separators (e.g. \"DIGITAL DESIGN · WEB DEVELOPMENT\"). No background, no border. Sits 20px above the project title."

    brand_list_row:
      role: "Client roster table in the brands section"

      info: "Horizontal row with 1px solid #2a2a2a bottom border, full width. Left column: brand name in Founders Grotesk 400, 12–14px, uppercase. Right column: service tags uppercase 12px, then \"MORE +\" in same style as Pill Action Button. Row height ~40px. Hairline-only separation, no alternating fills."

    project_image_frame:
      role: "Full-bleed product photography holder"

      info: "Raw 0px-radius image containers, no border, no shadow, no overlay. Photographs extend edge-to-edge within their grid column. Aspect ratios vary (portrait, landscape, square) to match the work's content. This is the only place visual content lives — the UI never decorates around the image."

    section_divider_rule:
      role: "Horizontal separator between major page sections"

      info: "1px solid #2a2a2a or #000000, full-bleed width. Used sparingly — most sections separate by generous whitespace (~115px gap) rather than lines. When a line appears, it is absolute and structural, not decorative."

    footer_wordmark:
      role: "Page footer signature"

      info: "Founders Grotesk 400 at 12–14px, #2a2a2a, uppercase. Contains the studio address or contact line, separated from content by a hairline rule. Minimal — no social icons, no nav repeat."

    text_input:
      role: "Contact form fields (inferred from the 4px radius data)"

      info: "1px solid #2a2a2a border, 4px corner radius, no background fill. Founders Grotesk 400 at 16px. No focus ring color visible — likely shifts to #000000 border on focus. Underlined appearance from the strict border discipline."

  do_s_and_don_ts:

    do:
      - "Set hero and section titles in Founders Grotesk 300 at 70–101px with line-height 0.80–0.88 and letter-spacing -0.0300em to -0.0600em — the tight tracking and compressed leading are what make the type feel architectural."
      - "Use only #2a2a2a for body text and #f0f0f0 for the page background — maintain the 18:1 contrast ratio by never introducing a mid-gray for running text."
      - "Apply 999px border-radius exclusively to pill buttons and the \"MORE +\" tags; keep all images, cards, and content blocks at 0px radius for the editorial edge."
      - "Separate content sections with 80–120px vertical gap rather than dividers — the system breathes on whitespace alone."
      - "Use 29px as the standard horizontal padding inside nav rows and as the column gap between case study cards."
      - "Render every action label (VIEW CASE STUDY, VIEW WORK, MORE +) in uppercase 12px Founders Grotesk 400 inside a solid #2a2a2a pill."
      - "Place discipline tags (DIGITAL DESIGN · WEB DEVELOPMENT) as uppercase 12px meta above each project title with 20px of vertical space between them."

    don_t:
      - "Never introduce a chromatic color — the 0% colorfulness is the brand. Any hue breaks the editorial contract."
      - "Never set body copy in weight 300; reserve weight 300 exclusively for display sizes 40px and above. Body stays at 400."
      - "Never apply a drop shadow, glow, or gradient to any element — the system is flat, paper-like, and shadowless by design."
      - "Never round image corners or add borders to product photography — full-bleed 0px edges are the rule."
      - "Never use line-height above 1.20 on any text size; the display sizes specifically need 0.80–0.88 to feel sculpted."
      - "Never underline text links; navigation and inline links use color contrast alone, with the registered-trademark glyph as the only typographic ornament."
      - "Never place a CTA button in a chromatic color or with a soft background — actions are always solid #2a2a2a pills with #fafafa text."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Bone Canvas | `#f0f0f0` | Default page background |"
    info: "| 1 | Linen Sheet | `#fafafa` | Elevated card and section surface |"
    info: "| 2 | Parchment Block | `#f0edea` | Alternate warm section band |"
    info: "| 3 | Ash Mat | `#d6d6d6` | Muted inactive or disabled fill |"

  elevation:

    info: "The system is deliberately shadowless. All surface separation is achieved through tonal shifts between #fafafa, #f0f0f0, and #f0edea, and through hairline 1px borders in #2a2a2a. Elevation is implied by tonal warmth, not by depth."

  imagery:

    info: "Full-bleed product photography is the only imagery — no illustration, no icons, no decorative graphics. Photographs sit at 0px corner radius, no border, no overlay, no duotone treatment. Shots are tight, editorial-grade product crops (laptops, phones, packaging, venues) with strong color contrast of their own — the studio lets the work carry visual energy so the UI can stay neutral. Photography occupies roughly 40–50% of the viewport on case study pages, arranged in 2-up grids with generous 29px column gaps. No lifestyle or people photography. No masked or shaped images."

  layout:

    info: "Full-bleed light page on a #f0f0f0 canvas with a max-width content track around 1440px. The hero is a pure typographic block: massive 70–101px uppercase headline left-aligned, with a small uppercase tag line below, no hero image. Navigation is a single top bar with a left wordmark and right-aligned text links at 12–14px, separated by horizontal padding. Below the hero, a 2-up case study grid shows large product photographs with meta tags and project titles above each image. Further down, a 4-up client testimonial/log-row grid displays brand wordmarks with short descriptions and dark pill \"VIEW CASE STUDY\" buttons. A \"BRANDS WE'VE WORKED WITH\" table follows with hairline 1px row separators, left-aligned brand names, right-aligned service tags and \"MORE +\" actions. Section spacing is generous (~115px between major bands). The rhythm alternates between wide whitespace and dense content rows but never uses alternating background colors — everything stays on the same warm off-white."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #2a2a2a"
    - "background: #f0f0f0"
    - "surface: #fafafa"
    - "border: #2a2a2a"
    - "accent: none (monochromatic system)"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "**Case Study Card** — 2-up grid column, 29px column gap. Top: meta tag row \"DIGITAL DESIGN · WEB DEVELOPMENT\" in Founders Grotesk 400, 12px, uppercase, #2a2a2a. 20px gap. Project title in Founders Grotesk 400, 22px, uppercase, #2a2a2a. Below: full-bleed 0px-radius product photograph, no border, no shadow. Dark pill button \"VIEW CASE STUDY\" at 12px Founders Grotesk 400, #fafafa text on #2a2a2a background, 999px radius, 14px horizontal padding."
    - "**Editorial Hero** — full-width block on #f0f0f0 background. Display headline in Founders Grotesk 300 at 101px, #2a2a2a, uppercase, line-height 0.80, letter-spacing -0.0600em. No eyebrow, no supporting visual. 80–120px vertical space, then a 12px uppercase tag line in weight 400."
    - "**Brand List Row** — full-width row with 1px solid #2a2a2a bottom border. Left: brand name in Founders Grotesk 400, 14px, uppercase, #2a2a2a. Right: service tags (e.g. \"RESEARCH · STRATEGY · DESIGN · DEVELOPMENT\") in 12px uppercase, followed by a \"MORE +\" pill button matching the primary pill spec."
    - "**Top Nav Bar** — left-aligned \"DashDigital®\" wordmark in Founders Grotesk 400, 12–14px, #2a2a2a with a superscript ® glyph. Right-aligned nav links (WORK, CASE STUDIES, SERVICES, ABOUT, INSIGHTS, CONTACT) in 12px uppercase, #2a2a2a, separated by 29px horizontal padding. No background, no border, no underline."
    - "**Section Divider** — 1px solid #2a2a2a horizontal rule, full-bleed, used sparingly between major content bands. Prefer 80–120px of whitespace over the rule when possible."

  similar_brands:

    - "**Locomotive (locomotive.ca)** — Same achromatic editorial palette with massive tight-tracked display type and zero accent color"
    - "**Pentagram** — Monochrome grid-based agency sites with uppercase meta tags and large product-photography case studies"
    - "**Manual (manual.co)** — Strictly off-white canvas, hairline rules, and weight-300 display headlines in a grotesque"
    - "**Resn (resn.co.nz)** — Gallery-style presentation of work with full-bleed photography and minimal UI chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon-black: #2a2a2a;
          --color-bone: #f0f0f0;
          --color-ink: #000000;
          --color-linen: #fafafa;
          --color-ash: #d6d6d6;
          --color-parchment: #f0edea;
          --color-stone: #bcbcb4;
          --color-clay: #ccc4b9;
        
          /* Typography — Font Families */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-neue: 'Editorial Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.17;
          --tracking-caption: -0.018px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.018px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.2;
          --tracking-body-lg: -0.018px;
          --text-subheading: 22px;
          --leading-subheading: 1.17;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: -0.023px;
          --text-display: 70px;
          --leading-display: 0.88;
          --tracking-display: -0.03px;
          --text-display-xl: 101px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -0.06px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80-120px;
          --card-padding: 20-24px;
          --element-gap: 12-20px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 4px;
          --radius-buttons: 999px;
        
          /* Surfaces */
          --surface-bone-canvas: #f0f0f0;
          --surface-linen-sheet: #fafafa;
          --surface-parchment-block: #f0edea;
          --surface-ash-mat: #d6d6d6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon-black: #2a2a2a;
          --color-bone: #f0f0f0;
          --color-ink: #000000;
          --color-linen: #fafafa;
          --color-ash: #d6d6d6;
          --color-parchment: #f0edea;
          --color-stone: #bcbcb4;
          --color-clay: #ccc4b9;
        
          /* Typography */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorial-neue: 'Editorial Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.17;
          --tracking-caption: -0.018px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.018px;
          --text-body-lg: 17px;
          --leading-body-lg: 1.2;
          --tracking-body-lg: -0.018px;
          --text-subheading: 22px;
          --leading-subheading: 1.17;
          --tracking-subheading: -0.02px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 0.9;
          --tracking-heading-sm: -0.023px;
          --text-display: 70px;
          --leading-display: 0.88;
          --tracking-display: -0.03px;
          --text-display-xl: 101px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -0.06px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 999px;
        }