Upstatement Careers

# Design brief: the Upstatement Careers 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/12080950/upstatement-com-jobs-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12080950/upstatement-com-jobs-featured.webp
- On DesignMunk: https://designmunk.com/upstatement-careers-page/

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

# Upstatement: Careers as White-on-Black Type Specimen

## Overview

Editorial, confident, and restrained. The interface is dark-first with high contrast and generous spacing. It should feel calm, readable, and precise—more like a magazine layout than a marketing splash. When a token doesn't specify, prefer typography and whitespace over decoration.

## Colors

- Primary (#ffffff): Core text and icon color on dark surfaces.
- Secondary (#7c7c7c): Muted copy, timestamps, helper text, and less important links.
- Neutral (#000000): Base canvas, modal and section backgrounds, and default button fills.
- Border (#374151): Hairline rules, input borders, and subtle separators.
- brand-desired-dawn (#d8d8d8): Soft highlight and low-contrast accents for hover states and captions.
- surface (#000000): Page and card surfaces in dark mode.
- on-surface (#ffffff): Default readable color on the surface black.

## Typography

- Diatype (custom/self-hosted): The workhorse for UI and long-form text. Use body-md (20px, 300, 1.5) for paragraphs and list items. headline-lg (42px, 700) is reserved for major page titles; headline-sm (29px, 300) and headline-xs (24px, 300) cover section and sub-section heads.
  Substitutes: Inter, IBM Plex Sans, Work Sans.
- Rizoma (custom/self-hosted): Display voice used for notable headlines and pull lines at headline-md (35px, 300, 1.26) for elegant contrast.
  Substitutes: Playfair Display, Cormorant Garamond, DM Serif Display.
Use tight negative letterspacing only where provided (headline-md -0.012em). Keep body copy generous; avoid sizes below 20px.

## Layout

Spacing follows a 4–120px scale. Use xl (120px) for major section paddings, lg (40px) for block spacing and grid gaps, and md (20px) for paragraph and item spacing. sm (12px) tightens within components; xs (4px) is for micro-adjustments. Content reads best in two columns on wide screens (copy column plus a supporting rail), collapsing to a single column on mobile.

## Elevation & Depth

The system is largely flat. Only a faint sm shadow is available; md/lg/xl are none. Emphasize hierarchy with whitespace, type size, and thin rules in Border (#374151). Use borders for inputs and section dividers; avoid heavy shadows.

## Shapes

Corners are quiet and consistent. Cards and media use rounded sm (8px). Interactive elements like buttons use rounded full (9999px) to read as intentional, minimal pills. Square corners (0px) are reserved for text links and rules.

## Components

Buttons
- Primary: #000000 background, #ffffff text, pill radius (9999px), 41px height, padding 9px 15px 10px. Use for primary actions on lighter or tinted surfaces.
- Secondary: Same construction as Primary; apply when two adjacent actions need equal weight.
- Link: Text-only with #ffffff, no radius. Use inline within paragraphs and lists.

Card
- #000000 background, #ffffff text, 8px radius, 16px inner padding. Use for media or grouped content blocks on dark backgrounds.

### Hero Statement Block
- Headline: Rizoma at 35px/1.26 (headline-md). Supporting copy: Diatype 20px/1.5 (body-md). Place a 1px rule in #374151 below the headline with lg (40px) spacing.

### Benefits Grid
- Four items presented as dense copy. Use body-md (20px) for text with a bold lead phrase per item. Arrange as two columns with lg (40px) column gap and md (20px) row gap.

### Values Aside Card
- A small media card with image and caption link. Card uses 8px corners and 16px padding; caption is a button-link inline (white text). Place alongside the hero or benefits using lg (40px) gutter.

### Newsletter Signup
- Title in headline-xs (24px). Use body-md for helper copy. Input borders in #374151 with 8px radii; action may be a text link if no solid button is required.

### Contact Form
- Labels and inputs in body-md (20px). Field borders #374151, 8px radius. Vertical spacing md (20px) between fields. Submit action may use the pill Primary button (41px height).

### Header Navigation
- Left-aligned wordmark with right-aligned links. Links use #ffffff with sm (12px) horizontal spacing; keep the header visually flat (no shadow) and rely on whitespace.

### Footer
- Multi-column link lists with secondary (#7c7c7c) for metadata. Separate from the page with a rule in #374151 and xl (120px) top padding.

## Do's and Don'ts

- Do keep body copy at 20px with 1.5 line height for comfortable reading on dark backgrounds.
- Do use #374151 hairlines to separate sections; avoid heavy shadows.
- Do reserve headline-lg (42px, 700) for true page titles to maintain hierarchy.
- Do use pill buttons only where contrast is sufficient; prefer text links on pure black surfaces.
- Don't introduce colored backgrounds; the palette is grayscale-first.
- Don't mix additional display faces; Rizoma is the only display voice and Diatype runs the UI.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #d8d8d8

1) Build a dark hero
- Canvas #000000 with xl (120px) top/bottom padding.
- Headline in Rizoma, 35px, weight 300, line-height 1.26, letter-spacing -0.012em, color #ffffff.
- Supporting paragraph in Diatype, 20px, weight 300, line-height 1.5, color #ffffff, max-width comfortable for reading.
- Add a 1px divider below the copy in #374151 with lg (40px) spacing above and below.
- Primary action as a button-link (text-only, #ffffff) or reserve the pill button for lighter surfaces.

2) Compose the benefits grid
- Two columns with lg (40px) column gap and md (20px) row gap on desktop; stack to one column on mobile.
- Each item: first sentence acts as a bold lead, followed by body in Diatype 20px/1.5, color #ffffff.
- Keep overall section padding xl (120px) and separate from neighbors with a #374151 rule.

3) Values aside card
- Use the Card component: background #000000, text #ffffff, padding 16px, radius 8px.
- Place an image with 8px corners inside; add a caption link styled as button-link (#ffffff).
- Position to the left or right of main copy with a lg (40px) gutter.

4) Contact form block
- Labels and inputs: Diatype 20px/1.5, color #ffffff on #000000.
- Inputs have 1px borders in #374151 and 8px radius; stack fields with md (20px) spacing.
- Submit uses Primary button: #000000 background, #ffffff text, 41px height, 9999px radius, padding 9px 15px 10px.

5) Footer layout
- Top border 1px #374151 and xl (120px) top padding.
- Link lists in #ffffff; metadata in #7c7c7c.
- Maintain lg (40px) column gaps between groups.

## Similar Brands

- Instrument — Type-led, often dark canvases with generous spacing; Instrument leans more on motion and color accents.
- Work & Co — Restrained grayscale and editorial rhythm; more grid-forward and typically lighter backgrounds.
- Stink Studios — Black-first palettes with bold typography; more experimental animation and art direction.
- Pentagram — Strong typographic voice and culture-forward content; uses lighter backgrounds and more varied color moments.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-desired-dawn: #d8d8d8;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 42px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.19;
  --text-headline-md-size: 35px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.26;
  --text-headline-md-tracking: -0.012em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 20px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.5;
  --font-diatype: "Diatype";
  --font-rizoma: "Rizoma";

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

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

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9px 15px 10px;
  --button-primary-height: 41px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9px 15px 10px;
  --button-secondary-height: 41px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-desired-dawn: #d8d8d8;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Diatype";
  --font-headline-md: "Rizoma";
  --font-headline-sm: "Diatype";
  --font-headline-xs: "Diatype";
  --font-body-md: "Diatype";
  --text-headline-lg: 42px;
  --text-headline-md: 35px;
  --text-headline-sm: 29px;
  --text-headline-xs: 24px;
  --text-body-md: 20px;
  --tracking-headline-md: -0.012em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 120px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-desired-dawn": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.847,
                    0.847,
                    0.847
                ],
                "hex": "#d8d8d8"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Diatype",
                "fontSize": {
                    "value": 42,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Rizoma",
                "fontSize": {
                    "value": 35,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": -0.012,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Diatype",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Diatype",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Diatype",
                "fontSize": {
                    "value": 20,
                    "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 Upstatement Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Upstatement
description: "Upstatement: all brands are digital, and systems tell stories."
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  neutral: "#000000"
  border: "#374151"
  brand-desired-dawn: "#d8d8d8"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Diatype
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: Rizoma
    fontSize: 35px
    fontWeight: 300
    lineHeight: 1.26
    letterSpacing: -0.012em
  headline-sm:
    fontFamily: Diatype
    fontSize: 29px
    fontWeight: 300
    lineHeight: 1.21
  headline-xs:
    fontFamily: Diatype
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.21
  body-md:
    fontFamily: Diatype
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 12px
  md: 20px
  lg: 40px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 15px 10px
    height: 41px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 15px 10px
    height: 41px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Upstatement: Careers as White-on-Black Type Specimen

## Overview

Editorial, confident, and restrained. The interface is dark-first with high contrast and generous spacing. It should feel calm, readable, and precise—more like a magazine layout than a marketing splash. When a token doesn't specify, prefer typography and whitespace over decoration.

## Colors

- Primary (#ffffff): Core text and icon color on dark surfaces.
- Secondary (#7c7c7c): Muted copy, timestamps, helper text, and less important links.
- Neutral (#000000): Base canvas, modal and section backgrounds, and default button fills.
- Border (#374151): Hairline rules, input borders, and subtle separators.
- brand-desired-dawn (#d8d8d8): Soft highlight and low-contrast accents for hover states and captions.
- surface (#000000): Page and card surfaces in dark mode.
- on-surface (#ffffff): Default readable color on the surface black.

## Typography

- Diatype (custom/self-hosted): The workhorse for UI and long-form text. Use body-md (20px, 300, 1.5) for paragraphs and list items. headline-lg (42px, 700) is reserved for major page titles; headline-sm (29px, 300) and headline-xs (24px, 300) cover section and sub-section heads.
  Substitutes: Inter, IBM Plex Sans, Work Sans.
- Rizoma (custom/self-hosted): Display voice used for notable headlines and pull lines at headline-md (35px, 300, 1.26) for elegant contrast.
  Substitutes: Playfair Display, Cormorant Garamond, DM Serif Display.
Use tight negative letterspacing only where provided (headline-md -0.012em). Keep body copy generous; avoid sizes below 20px.

## Layout

Spacing follows a 4–120px scale. Use xl (120px) for major section paddings, lg (40px) for block spacing and grid gaps, and md (20px) for paragraph and item spacing. sm (12px) tightens within components; xs (4px) is for micro-adjustments. Content reads best in two columns on wide screens (copy column plus a supporting rail), collapsing to a single column on mobile.

## Elevation & Depth

The system is largely flat. Only a faint sm shadow is available; md/lg/xl are none. Emphasize hierarchy with whitespace, type size, and thin rules in Border (#374151). Use borders for inputs and section dividers; avoid heavy shadows.

## Shapes

Corners are quiet and consistent. Cards and media use rounded sm (8px). Interactive elements like buttons use rounded full (9999px) to read as intentional, minimal pills. Square corners (0px) are reserved for text links and rules.

## Components

Buttons
- Primary: #000000 background, #ffffff text, pill radius (9999px), 41px height, padding 9px 15px 10px. Use for primary actions on lighter or tinted surfaces.
- Secondary: Same construction as Primary; apply when two adjacent actions need equal weight.
- Link: Text-only with #ffffff, no radius. Use inline within paragraphs and lists.

Card
- #000000 background, #ffffff text, 8px radius, 16px inner padding. Use for media or grouped content blocks on dark backgrounds.

### Hero Statement Block
- Headline: Rizoma at 35px/1.26 (headline-md). Supporting copy: Diatype 20px/1.5 (body-md). Place a 1px rule in #374151 below the headline with lg (40px) spacing.

### Benefits Grid
- Four items presented as dense copy. Use body-md (20px) for text with a bold lead phrase per item. Arrange as two columns with lg (40px) column gap and md (20px) row gap.

### Values Aside Card
- A small media card with image and caption link. Card uses 8px corners and 16px padding; caption is a button-link inline (white text). Place alongside the hero or benefits using lg (40px) gutter.

### Newsletter Signup
- Title in headline-xs (24px). Use body-md for helper copy. Input borders in #374151 with 8px radii; action may be a text link if no solid button is required.

### Contact Form
- Labels and inputs in body-md (20px). Field borders #374151, 8px radius. Vertical spacing md (20px) between fields. Submit action may use the pill Primary button (41px height).

### Header Navigation
- Left-aligned wordmark with right-aligned links. Links use #ffffff with sm (12px) horizontal spacing; keep the header visually flat (no shadow) and rely on whitespace.

### Footer
- Multi-column link lists with secondary (#7c7c7c) for metadata. Separate from the page with a rule in #374151 and xl (120px) top padding.

## Do's and Don'ts

- Do keep body copy at 20px with 1.5 line height for comfortable reading on dark backgrounds.
- Do use #374151 hairlines to separate sections; avoid heavy shadows.
- Do reserve headline-lg (42px, 700) for true page titles to maintain hierarchy.
- Do use pill buttons only where contrast is sufficient; prefer text links on pure black surfaces.
- Don't introduce colored backgrounds; the palette is grayscale-first.
- Don't mix additional display faces; Rizoma is the only display voice and Diatype runs the UI.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #d8d8d8

1) Build a dark hero
- Canvas #000000 with xl (120px) top/bottom padding.
- Headline in Rizoma, 35px, weight 300, line-height 1.26, letter-spacing -0.012em, color #ffffff.
- Supporting paragraph in Diatype, 20px, weight 300, line-height 1.5, color #ffffff, max-width comfortable for reading.
- Add a 1px divider below the copy in #374151 with lg (40px) spacing above and below.
- Primary action as a button-link (text-only, #ffffff) or reserve the pill button for lighter surfaces.

2) Compose the benefits grid
- Two columns with lg (40px) column gap and md (20px) row gap on desktop; stack to one column on mobile.
- Each item: first sentence acts as a bold lead, followed by body in Diatype 20px/1.5, color #ffffff.
- Keep overall section padding xl (120px) and separate from neighbors with a #374151 rule.

3) Values aside card
- Use the Card component: background #000000, text #ffffff, padding 16px, radius 8px.
- Place an image with 8px corners inside; add a caption link styled as button-link (#ffffff).
- Position to the left or right of main copy with a lg (40px) gutter.

4) Contact form block
- Labels and inputs: Diatype 20px/1.5, color #ffffff on #000000.
- Inputs have 1px borders in #374151 and 8px radius; stack fields with md (20px) spacing.
- Submit uses Primary button: #000000 background, #ffffff text, 41px height, 9999px radius, padding 9px 15px 10px.

5) Footer layout
- Top border 1px #374151 and xl (120px) top padding.
- Link lists in #ffffff; metadata in #7c7c7c.
- Maintain lg (40px) column gaps between groups.

## Similar Brands

- Instrument — Type-led, often dark canvases with generous spacing; Instrument leans more on motion and color accents.
- Work & Co — Restrained grayscale and editorial rhythm; more grid-forward and typically lighter backgrounds.
- Stink Studios — Black-first palettes with bold typography; more experimental animation and art direction.
- Pentagram — Strong typographic voice and culture-forward content; uses lighter backgrounds and more varied color moments.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-desired-dawn: #d8d8d8;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 42px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.19;
  --text-headline-md-size: 35px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.26;
  --text-headline-md-tracking: -0.012em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 20px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.5;
  --font-diatype: "Diatype";
  --font-rizoma: "Rizoma";

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

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

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9px 15px 10px;
  --button-primary-height: 41px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9px 15px 10px;
  --button-secondary-height: 41px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Upstatement: all brands are digital, and systems tell stories.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-desired-dawn": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.847,
          0.847,
          0.847
        ],
        "hex": "#d8d8d8"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 120,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Diatype",
        "fontSize": {
          "value": 42,
          "unit": "px"
        },
        "fontWeight": 700
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Rizoma",
        "fontSize": {
          "value": 35,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.012,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Diatype",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Diatype",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Diatype",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 300
      }
    }
  }
}

@theme {
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-desired-dawn: #d8d8d8;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Diatype";
  --font-headline-md: "Rizoma";
  --font-headline-sm: "Diatype";
  --font-headline-xs: "Diatype";
  --font-body-md: "Diatype";
  --text-headline-lg: 42px;
  --text-headline-md: 35px;
  --text-headline-sm: 29px;
  --text-headline-xs: 24px;
  --text-body-md: 20px;
  --tracking-headline-md: -0.012em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 120px;
}