The Residency

# Design brief: the The Residency design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/04165320/livetheresidency-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04165320/livetheresidency-com-featured.webp
- On DesignMunk: https://designmunk.com/the-residency/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# The Residency: Serif–Sans Hero With a Single Black Pill

## Overview

A focused, monochrome system aimed at ambitious builders. The tone is confident, minimal, and modern; whitespace and a single strong CTA reduce friction. Density is low; content breathes in centered columns with large type and restrained color. When tokens are absent, default to black text on paper-white backgrounds with minimal accents.

## Colors

- **primary (#181818):** Deep ink for headlines, navigation, and primary text.
- **secondary (#60605f):** Supporting copy and muted labels; avoid on buttons.
- **tertiary (#211f54):** Accent indigo for small emphasis, chapter markers, or links on light backgrounds.
- **neutral (#f8f8f8):** Site background and section bands; keeps the page bright without pure white glare.
- **brand-shoe-wax (#2c2c2c):** Rich charcoal for illustrations, overlines, and strong rules when pure black would be too stark.
- **brand-namara-grey (#7c7c7c):** Subtle borders, dividers, and metadata text.
- **surface (#f8f8f8):** Default surface color; use behind cards or full-bleed sections.
- **on-surface (#181818):** Standard text on neutral surfaces.

## Typography

- Manrope (Google; freely available). Roles: primary UI sans for headings (74px/28px/18px), nav, buttons, and body (16px, light). Substitutes when Manrope is unavailable: Inter, IBM Plex Sans, or System UI/SF Pro.
- STIX Two Text (Google; freely available). Role: display serif for elevated headlines at 64px, often italicized for contrast. Substitutes: Source Serif 4, IBM Plex Serif, or Georgia for system fallback.
- Weight strategy: keep headlines light (300–500) to preserve elegance; tighten tracking as specified (-0.022em for the large sans, -0.014em for the serif).

## Layout

Spacing follows a roomy scale: 12/20 for tight inline gaps, 40 for block spacing, 56–80 for section padding and hero margins. Use a centered single column for copy sections with generous max-width; switch to 2–3 columns for resident stories on larger screens. Keep vertical rhythm consistent—stack sections with multiples of 40px and avoid micro-adjustments off the scale.

## Elevation & Depth

Depth is subtle. Cards float on the neutral background with light shadows: md (rgba(122,122,122,0.14) 1px 3px 20px 0) for interactive cards, sm for passive surfaces. Where shadows are absent, rely on 16px radii, tonal contrast (#ffffff on #f8f8f8), and fine borders in #7c7c7c.

## Shapes

Two radii define the language: 16px for cards and content blocks; 9999px for pill buttons and input chips. Square edges (0px) are reserved for text links and underlines to contrast against the rounded CTAs.

## Components

Buttons
- Primary Button: #000000 background, #ffffff text, 44px height, full radius, padding 9px 26px 11px. Use for the main Apply action in nav and standout CTAs.
- Secondary Button: text-only in #181818, full radius; pair with a thin border in #7c7c7c if additional affordance is needed.
- Link Button: text-only with 0px radius; use as inline actions under headlines (e.g., hero "apply now").

Card
- White (#ffffff) surface with 16px radius and 48/50/56 padding; pair with md shadow for prominence or sm for quiet lists.

Distinctive components
### Top Navigation with Pill CTA
- Minimal text links flanking a single 44px, full-radius black Apply pill. Use 20px gaps and #181818 text on a #f8f8f8 bar.
### Hero Headline Pairing
- Line 1: STIX Two Text 64px, light, tight tracking; Line 2: Manrope 74px, medium, -0.022em. Centered, with an inline link-style CTA below.
### Hero Statue Visual
- Dark, high-contrast illustration anchored below the headline; keep adequate top/bottom spacing (56–80px) so it doesn't crowd the CTA.
### Expectation List
- Short, declarative lines stacked with 12–20px gaps; emphasize key nouns in #181818 and sparing #211f54 accents.
### Resident Story Cards
- Grid of profiles using the card spec; headings in Manrope 28px, body at 16px. Apply md shadow on hover.
### FAQ Accordion
- Questions set in Manrope 18px; dividers and chevrons in #7c7c7c; answers in 16px body with 20px vertical padding.
### Join the Movement Signup
- Compact card using 16px radius and sm shadow; tertiary accents for the action link.
### Final Apply CTA Band
- Centered copy over #f8f8f8 with a single primary button; use 80px vertical padding and 20px element gaps.

## Do's and Don'ts

- Do pair STIX Two Text (64px) over Manrope (74px) for marquee headlines; keep weights at 300–500.
- Do reserve the black primary button for the most important Apply actions only.
- Do space sections in 40–80px increments; keep inline gaps at 12–20px.
- Don't introduce additional brand colors; use #211f54 only for subtle emphasis.
- Don't mix radii—cards at 16px, pills at full; links stay square.
- Don't stack multiple shadows; choose sm or md per component state.

## Agent Prompt Guide

Quick color reference
- Text: #181818
- Background: #f8f8f8
- Border/divider: #7c7c7c
- Accent: #211f54

1) Build the hero
- Background #f8f8f8; center a two-line headline.
- Line 1: STIX Two Text, 64px, weight 300, letter-spacing -0.014em, color #181818.
- Line 2: Manrope, 74px, weight 500, letter-spacing -0.022em, color #181818.
- Place a link-style CTA below: Manrope 18px, color #181818, underline; 20px gap from the headline; 56px gap to the hero image.

2) Navigation with primary pill
- Row with Manrope 16px links (#181818) spaced by 20px.
- Primary Apply button: background #000000, text #ffffff, height 44px, padding 9px 26px 11px, border-radius 9999px.
- Page background remains #f8f8f8.

3) Resident story cards grid
- Each card: background #ffffff, text #181818, border-radius 16px, padding 48px 50px 56px, shadow md (rgba(122,122,122,0.14) 1px 3px 20px 0).
- Title: Manrope 28px; body: Manrope 16px. Use #211f54 for small chapter labels.
- Grid gaps: 40px; section padding: 80px top/bottom.

4) FAQ accordion
- Question rows: Manrope 18px #181818 with 20px vertical padding between items.
- Answer text: Manrope 16px #181818 on #f8f8f8; use #7c7c7c for dividers and icons.
- Section margin: 56px above and below.

5) Final CTA band
- Centered block on #f8f8f8 with 80px vertical padding.
- Headline: Manrope 28px; supporting copy: 16px.
- Primary button per spec (#000000/#ffffff, 44px height, 9999px radius), spaced 20px from text.

## Similar Brands

- Y Combinator: similarly minimal and conversion-focused; YC is bolder with orange, while The Residency stays monochrome with a single black pill.
- On Deck: uses serif–sans pairing and generous spacing; On Deck leans warmer with color accents where The Residency stays cool and neutral.
- Pioneer: sparse, type-driven with strong CTAs; Pioneer's gradients contrast with this site's flat inks.
- Reforge: education-meets-community framing and large type; Reforge uses heavier illustration and branded color beyond this site's restrained palette.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #181818;
  --color-secondary: #60605f;
  --color-tertiary: #211f54;
  --color-neutral: #f8f8f8;
  --color-brand-shoe-wax: #2c2c2c;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 74px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.022em;
  --text-headline-md-size: 64px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.16;
  --text-headline-md-tracking: -0.014em;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --font-manrope: "Manrope";
  --font-stix-two-text: "STIX Two Text";

  /* Rounded */
  --radius-sm: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: #000000;
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9px 26px 11px;
  --button-primary-height: 44px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9px 26px 11px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: #ffffff;
  --card-rounded: var(--radius-sm);
  --card-padding: 48px 50px 56px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #181818;
  --color-secondary: #60605f;
  --color-tertiary: #211f54;
  --color-neutral: #f8f8f8;
  --color-brand-shoe-wax: #2c2c2c;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: #f8f8f8;
  --color-on-surface: #181818;
  --font-headline-lg: "Manrope";
  --font-headline-md: "STIX Two Text";
  --font-headline-sm: "Manrope";
  --font-headline-xs: "Manrope";
  --font-body-md: "Manrope";
  --text-headline-lg: 74px;
  --text-headline-md: 64px;
  --text-headline-sm: 28px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.022em;
  --tracking-headline-md: -0.014em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 16px;
  --radius-full: 9999px;
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.094,
                    0.094,
                    0.094
                ],
                "hex": "#181818"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.376,
                    0.376,
                    0.373
                ],
                "hex": "#60605f"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.129,
                    0.122,
                    0.329
                ],
                "hex": "#211f54"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.973,
                    0.973,
                    0.973
                ],
                "hex": "#f8f8f8"
            }
        },
        "brand-shoe-wax": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.173,
                    0.173,
                    0.173
                ],
                "hex": "#2c2c2c"
            }
        },
        "brand-namara-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.973,
                    0.973,
                    0.973
                ],
                "hex": "#f8f8f8"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.094,
                    0.094,
                    0.094
                ],
                "hex": "#181818"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope",
                "fontSize": {
                    "value": 74,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.022,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "STIX Two Text",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.014,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Manrope",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as The Residency**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: The Residency
description: Live and grow with ambitious builders through 3-month residencies.
colors:
  primary: "#181818"
  secondary: "#60605f"
  tertiary: "#211f54"
  neutral: "#f8f8f8"
  brand-shoe-wax: "#2c2c2c"
  brand-namara-grey: "#7c7c7c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Manrope
    fontSize: 74px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.022em
  headline-md:
    fontFamily: STIX Two Text
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.16
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Manrope
    fontSize: 28px
    fontWeight: 300
    lineHeight: 1.2
  headline-xs:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.22
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 300
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 12px
  sm: 20px
  md: 40px
  lg: 56px
  xl: 80px
components:
  button-primary:
    backgroundColor: "#000000"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 9px 26px 11px
    height: 44px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 26px 11px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 48px 50px 56px
---

# The Residency: Serif–Sans Hero With a Single Black Pill

## Overview

A focused, monochrome system aimed at ambitious builders. The tone is confident, minimal, and modern; whitespace and a single strong CTA reduce friction. Density is low; content breathes in centered columns with large type and restrained color. When tokens are absent, default to black text on paper-white backgrounds with minimal accents.

## Colors

- **primary (#181818):** Deep ink for headlines, navigation, and primary text.
- **secondary (#60605f):** Supporting copy and muted labels; avoid on buttons.
- **tertiary (#211f54):** Accent indigo for small emphasis, chapter markers, or links on light backgrounds.
- **neutral (#f8f8f8):** Site background and section bands; keeps the page bright without pure white glare.
- **brand-shoe-wax (#2c2c2c):** Rich charcoal for illustrations, overlines, and strong rules when pure black would be too stark.
- **brand-namara-grey (#7c7c7c):** Subtle borders, dividers, and metadata text.
- **surface (#f8f8f8):** Default surface color; use behind cards or full-bleed sections.
- **on-surface (#181818):** Standard text on neutral surfaces.

## Typography

- Manrope (Google; freely available). Roles: primary UI sans for headings (74px/28px/18px), nav, buttons, and body (16px, light). Substitutes when Manrope is unavailable: Inter, IBM Plex Sans, or System UI/SF Pro.
- STIX Two Text (Google; freely available). Role: display serif for elevated headlines at 64px, often italicized for contrast. Substitutes: Source Serif 4, IBM Plex Serif, or Georgia for system fallback.
- Weight strategy: keep headlines light (300–500) to preserve elegance; tighten tracking as specified (-0.022em for the large sans, -0.014em for the serif).

## Layout

Spacing follows a roomy scale: 12/20 for tight inline gaps, 40 for block spacing, 56–80 for section padding and hero margins. Use a centered single column for copy sections with generous max-width; switch to 2–3 columns for resident stories on larger screens. Keep vertical rhythm consistent—stack sections with multiples of 40px and avoid micro-adjustments off the scale.

## Elevation & Depth

Depth is subtle. Cards float on the neutral background with light shadows: md (rgba(122,122,122,0.14) 1px 3px 20px 0) for interactive cards, sm for passive surfaces. Where shadows are absent, rely on 16px radii, tonal contrast (#ffffff on #f8f8f8), and fine borders in #7c7c7c.

## Shapes

Two radii define the language: 16px for cards and content blocks; 9999px for pill buttons and input chips. Square edges (0px) are reserved for text links and underlines to contrast against the rounded CTAs.

## Components

Buttons
- Primary Button: #000000 background, #ffffff text, 44px height, full radius, padding 9px 26px 11px. Use for the main Apply action in nav and standout CTAs.
- Secondary Button: text-only in #181818, full radius; pair with a thin border in #7c7c7c if additional affordance is needed.
- Link Button: text-only with 0px radius; use as inline actions under headlines (e.g., hero "apply now").

Card
- White (#ffffff) surface with 16px radius and 48/50/56 padding; pair with md shadow for prominence or sm for quiet lists.

Distinctive components
### Top Navigation with Pill CTA
- Minimal text links flanking a single 44px, full-radius black Apply pill. Use 20px gaps and #181818 text on a #f8f8f8 bar.
### Hero Headline Pairing
- Line 1: STIX Two Text 64px, light, tight tracking; Line 2: Manrope 74px, medium, -0.022em. Centered, with an inline link-style CTA below.
### Hero Statue Visual
- Dark, high-contrast illustration anchored below the headline; keep adequate top/bottom spacing (56–80px) so it doesn't crowd the CTA.
### Expectation List
- Short, declarative lines stacked with 12–20px gaps; emphasize key nouns in #181818 and sparing #211f54 accents.
### Resident Story Cards
- Grid of profiles using the card spec; headings in Manrope 28px, body at 16px. Apply md shadow on hover.
### FAQ Accordion
- Questions set in Manrope 18px; dividers and chevrons in #7c7c7c; answers in 16px body with 20px vertical padding.
### Join the Movement Signup
- Compact card using 16px radius and sm shadow; tertiary accents for the action link.
### Final Apply CTA Band
- Centered copy over #f8f8f8 with a single primary button; use 80px vertical padding and 20px element gaps.

## Do's and Don'ts

- Do pair STIX Two Text (64px) over Manrope (74px) for marquee headlines; keep weights at 300–500.
- Do reserve the black primary button for the most important Apply actions only.
- Do space sections in 40–80px increments; keep inline gaps at 12–20px.
- Don't introduce additional brand colors; use #211f54 only for subtle emphasis.
- Don't mix radii—cards at 16px, pills at full; links stay square.
- Don't stack multiple shadows; choose sm or md per component state.

## Agent Prompt Guide

Quick color reference
- Text: #181818
- Background: #f8f8f8
- Border/divider: #7c7c7c
- Accent: #211f54

1) Build the hero
- Background #f8f8f8; center a two-line headline.
- Line 1: STIX Two Text, 64px, weight 300, letter-spacing -0.014em, color #181818.
- Line 2: Manrope, 74px, weight 500, letter-spacing -0.022em, color #181818.
- Place a link-style CTA below: Manrope 18px, color #181818, underline; 20px gap from the headline; 56px gap to the hero image.

2) Navigation with primary pill
- Row with Manrope 16px links (#181818) spaced by 20px.
- Primary Apply button: background #000000, text #ffffff, height 44px, padding 9px 26px 11px, border-radius 9999px.
- Page background remains #f8f8f8.

3) Resident story cards grid
- Each card: background #ffffff, text #181818, border-radius 16px, padding 48px 50px 56px, shadow md (rgba(122,122,122,0.14) 1px 3px 20px 0).
- Title: Manrope 28px; body: Manrope 16px. Use #211f54 for small chapter labels.
- Grid gaps: 40px; section padding: 80px top/bottom.

4) FAQ accordion
- Question rows: Manrope 18px #181818 with 20px vertical padding between items.
- Answer text: Manrope 16px #181818 on #f8f8f8; use #7c7c7c for dividers and icons.
- Section margin: 56px above and below.

5) Final CTA band
- Centered block on #f8f8f8 with 80px vertical padding.
- Headline: Manrope 28px; supporting copy: 16px.
- Primary button per spec (#000000/#ffffff, 44px height, 9999px radius), spaced 20px from text.

## Similar Brands

- Y Combinator: similarly minimal and conversion-focused; YC is bolder with orange, while The Residency stays monochrome with a single black pill.
- On Deck: uses serif–sans pairing and generous spacing; On Deck leans warmer with color accents where The Residency stays cool and neutral.
- Pioneer: sparse, type-driven with strong CTAs; Pioneer's gradients contrast with this site's flat inks.
- Reforge: education-meets-community framing and large type; Reforge uses heavier illustration and branded color beyond this site's restrained palette.

:root {
  /* Colors */
  --color-primary: #181818;
  --color-secondary: #60605f;
  --color-tertiary: #211f54;
  --color-neutral: #f8f8f8;
  --color-brand-shoe-wax: #2c2c2c;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 74px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.022em;
  --text-headline-md-size: 64px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.16;
  --text-headline-md-tracking: -0.014em;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --font-manrope: "Manrope";
  --font-stix-two-text: "STIX Two Text";

  /* Rounded */
  --radius-sm: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: #000000;
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9px 26px 11px;
  --button-primary-height: 44px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9px 26px 11px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: #ffffff;
  --card-rounded: var(--radius-sm);
  --card-padding: 48px 50px 56px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Live and grow with ambitious builders through 3-month residencies.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.094,
          0.094,
          0.094
        ],
        "hex": "#181818"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.376,
          0.376,
          0.373
        ],
        "hex": "#60605f"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.129,
          0.122,
          0.329
        ],
        "hex": "#211f54"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.973,
          0.973,
          0.973
        ],
        "hex": "#f8f8f8"
      }
    },
    "brand-shoe-wax": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.173,
          0.173,
          0.173
        ],
        "hex": "#2c2c2c"
      }
    },
    "brand-namara-grey": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.973,
          0.973,
          0.973
        ],
        "hex": "#f8f8f8"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.094,
          0.094,
          0.094
        ],
        "hex": "#181818"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 56,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 74,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.022,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "STIX Two Text",
        "fontSize": {
          "value": 64,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.014,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 28,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 300
      }
    }
  }
}

@theme {
  --color-primary: #181818;
  --color-secondary: #60605f;
  --color-tertiary: #211f54;
  --color-neutral: #f8f8f8;
  --color-brand-shoe-wax: #2c2c2c;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: #f8f8f8;
  --color-on-surface: #181818;
  --font-headline-lg: "Manrope";
  --font-headline-md: "STIX Two Text";
  --font-headline-sm: "Manrope";
  --font-headline-xs: "Manrope";
  --font-body-md: "Manrope";
  --text-headline-lg: 74px;
  --text-headline-md: 64px;
  --text-headline-sm: 28px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.022em;
  --tracking-headline-md: -0.014em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 16px;
  --radius-full: 9999px;
  --spacing-xs: 12px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;
}