Reevo Careers

# Design brief: the Reevo 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/12085755/reevo-ai-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12085755/reevo-ai-careers-featured.webp
- On DesignMunk: https://designmunk.com/reevo-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

# Reevo Careers: Monochrome Blocks, One Word—"Builder"

## Overview

Reevo's UI is blunt, technical, and efficient—black, white, and graphite with minimal ornament. The intended feel is serious and confident, with generous whitespace and clear hierarchy. Content should read fast and direct, prioritizing scannability over decoration. When tokens leave room for interpretation, choose the simpler treatment and keep density moderate to spacious.

## Colors

- Primary (#3c3c3c): Graphite text for most copy and UI labels.
- Tertiary (#000000): Absolute black for high-impact headings, icons, and strong emphasis.
- Neutral (#ffffff): Paper white background and card surfaces.
- Border (#e5e7eb): Subtle gray for dividers, input strokes, and table rules.
- Surface ({colors.neutral}): Default surface color; use for cards and sections.
- On-surface ({colors.primary}): Default text atop surfaces; pair with white backgrounds for comfortable contrast.

## Typography

- GT America Mono (custom): Used for headline-lg and headline-md. Monospaced, utilitarian tone suitable for technical messaging. Not freely hosted via Google; substitutes: IBM Plex Mono, Space Mono, or Roboto Mono.
- Haltung (custom): Used for headline-sm, headline-xs, and body-md. Grotesk sans with compact rhythm and tight letterspacing (body has -0.07em). Not freely hosted via Google; substitutes: Inter, Manrope, or Work Sans.
- Hierarchy: Use headline-lg for page titles, headline-md for section leads, headline-sm/xs for subheads and labels, and body-md for paragraphs. Maintain the provided line-heights to preserve the airy feel.

## Layout

The spacing scale is 8/16/32/64/96px, encouraging an 8px rhythm. Build sections with md (32px) inner padding and lg–xl (64–96px) vertical separation for major breaks. A simple responsive grid works best: 12 columns on desktop with 32px gutters; collapse to a single column on mobile with sm (16px) side padding. Keep copy widths comfortable (60–70ch) and let display headings breathe with lg spacing above and md below.

## Elevation & Depth

No shadows are used (all measured shadows are none). Hierarchy relies on whitespace, strong typography, and subtle borders (#e5e7eb). Containers can use the Surface (white) against the page background with a border or increased outer spacing. Use black text sparingly to pull focus; otherwise stick to Graphite for body content.

## Shapes

Corners are small and utilitarian: 4px for interactive controls (buttons, inputs) and 8px for larger surfaces (cards, media). Use square corners (0px) only for text links and hard-edged artwork to keep the visual language consistent and crisp.

## Components

- Button — Primary: Text-only emphasis using textColor #3c3c3c, 36px height, 11px 12px padding, 4px radius. Use for standard actions on light surfaces.
- Button — Secondary: High-contrast action with #121212 background and white text, 36px height, 11px 12px padding, 4px radius. Reserve for primary CTAs like "Get started".
- Button — Link: Inline action with #121212 text, 0px radius. No background; pairs with body copy.
- Card: White surface, Graphite text, 8px radius, 16px padding. Add a #e5e7eb border when placed on white backgrounds.

### Careers Hero
- Layout: xl (96px) top/bottom spacing. Title in headline-lg, color #000000; supporting line in body-md. A single brand artwork block sits below with md (32px) gap.

### Operating Principles Block
- Section heading in headline-md. Each principle starts with a bolded sentence (body-md) followed by paragraph copy (body-md). Use md (32px) vertical gaps between principles.

### Values List
- Five short value statements presented as a vertical stack. Headings in headline-sm with body-md descriptions. Use lg (64px) outer spacing.

### Teams Filter Bar
- Horizontal list of team anchors styled as Button — Link. 16px gaps, wrap on small screens, and maintain 4px focus outlines where applicable.

### Job Listing Row
- Role title as headline-sm linking out; location beneath in body-md. Rows separated by a 1px #e5e7eb divider with 16px vertical padding.

### Header Navigation
- Compact top bar with product menus on the left and two actions at right: "Log in" (Button — Link) and "Get started" (Button — Secondary).

### Compliance Strip in Footer
- Small line of certifications set in body-md, separated by #e5e7eb dividers; keep md (32px) padding and center alignment.

## Do's and Don'ts

- Do use Graphite (#3c3c3c) for most text and reserve black (#000000) for key headlines or critical emphasis.
- Do separate major sections with lg–xl spacing; avoid stacking dense blocks without clear breathing room.
- Do use 4px radii for controls and 8px for cards; keep links square (0px).
- Don't introduce drop shadows; use borders (#e5e7eb) or whitespace to differentiate layers.
- Don't add extra accent colors; the system is monochrome-first with occasional brand artwork.
- Don't mix headline families; use GT America Mono for primary headings and Haltung for all other text.

## Agent Prompt Guide

Quick color reference
- Text: #3c3c3c
- Background: #ffffff
- Border: #e5e7eb
- Accent/Emphasis: #000000

1) Build a careers hero
- Container: 100% width, background #ffffff, padding-top/bottom 96px.
- H1: font GT America Mono, size 20px, weight 400, line-height 1.2, color #000000.
- Subtext: font Haltung, size 16px, weight 400, line-height 3.68, letter-spacing -0.07em, color #3c3c3c.
- Primary action: Button — Secondary (36px height, 11px 12px, background #121212, text #ffffff, radius 4px).

2) Operating principles section
- Section heading: GT America Mono, 19px, line-height 1.21, color #000000, margin-bottom 32px.
- Each principle: lead sentence in Haltung 16px, line-height 3.68, letter-spacing -0.07em, color #3c3c3c; paragraph follows. Stack items with 32px gaps and add a bottom border #e5e7eb.

3) Job listings list
- For each role: title in Haltung 18px (headline-sm), color #000000; location in Haltung 16px body, color #3c3c3c.
- Row padding 16px vertical, divider 1px #e5e7eb. Group by team with 32px headers.

4) Footer compliance strip
- Background #ffffff, 32px vertical padding.
- Items set in Haltung 16px body, color #3c3c3c; separate items with 1px #e5e7eb dividers. Links use Button — Link styling (#121212, radius 0px).

## Similar Brands

- Vercel: Black-and-white, developer-forward tone; Reevo is stricter about borders and uses fewer gradients.
- Linear: Stark typography and minimal color; Reevo leans more industrial with monospaced headings and block artwork.
- Retool: Technical aesthetic with utilitarian components; Reevo's palette is leaner and shadows are fully absent.
- GitHub (marketing pages): Monochrome emphasis and roomy spacing; Reevo is bolder in display type and uses a tighter component set.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #3c3c3c;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 20px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 19px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 18px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.22;
  --text-headline-xs-size: 17px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.18;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 3.68;
  --text-body-md-tracking: -0.07em;
  --font-gtamericamono: "GTAmericaMono";
  --font-haltung: "Haltung";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11px 12px;
  --button-primary-height: 36px;
  --button-secondary-background-color: #121212;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11px 12px;
  --button-secondary-height: 36px;
  --button-link-text-color: #121212;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #3c3c3c;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #3c3c3c;
  --font-headline-lg: "GTAmericaMono";
  --font-headline-md: "GTAmericaMono";
  --font-headline-sm: "Haltung";
  --font-headline-xs: "Haltung";
  --font-body-md: "Haltung";
  --text-headline-lg: 20px;
  --text-headline-md: 19px;
  --text-headline-sm: 18px;
  --text-headline-xs: 17px;
  --text-body-md: 16px;
  --tracking-body-md: -0.07em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.235,
                    0.235
                ],
                "hex": "#3c3c3c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.235,
                    0.235
                ],
                "hex": "#3c3c3c"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "GTAmericaMono",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "GTAmericaMono",
                "fontSize": {
                    "value": 19,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Haltung",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Haltung",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Haltung",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.07,
                    "unit": "em"
                }
            }
        }
    }
}
```

## 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 Reevo Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Reevo
description: Eliminate the stack tax, multiply your pipeline & close faster
colors:
  primary: "#3c3c3c"
  tertiary: "#000000"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: GTAmericaMono
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: GTAmericaMono
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  headline-sm:
    fontFamily: Haltung
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  headline-xs:
    fontFamily: Haltung
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Haltung
    fontSize: 16px
    fontWeight: 400
    lineHeight: 3.68
    letterSpacing: -0.07em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 96px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 11px 12px
    height: 36px
  button-secondary:
    backgroundColor: "#121212"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 11px 12px
    height: 36px
  button-link:
    textColor: "#121212"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Reevo Careers: Monochrome Blocks, One Word—"Builder"

## Overview

Reevo's UI is blunt, technical, and efficient—black, white, and graphite with minimal ornament. The intended feel is serious and confident, with generous whitespace and clear hierarchy. Content should read fast and direct, prioritizing scannability over decoration. When tokens leave room for interpretation, choose the simpler treatment and keep density moderate to spacious.

## Colors

- Primary (#3c3c3c): Graphite text for most copy and UI labels.
- Tertiary (#000000): Absolute black for high-impact headings, icons, and strong emphasis.
- Neutral (#ffffff): Paper white background and card surfaces.
- Border (#e5e7eb): Subtle gray for dividers, input strokes, and table rules.
- Surface ({colors.neutral}): Default surface color; use for cards and sections.
- On-surface ({colors.primary}): Default text atop surfaces; pair with white backgrounds for comfortable contrast.

## Typography

- GT America Mono (custom): Used for headline-lg and headline-md. Monospaced, utilitarian tone suitable for technical messaging. Not freely hosted via Google; substitutes: IBM Plex Mono, Space Mono, or Roboto Mono.
- Haltung (custom): Used for headline-sm, headline-xs, and body-md. Grotesk sans with compact rhythm and tight letterspacing (body has -0.07em). Not freely hosted via Google; substitutes: Inter, Manrope, or Work Sans.
- Hierarchy: Use headline-lg for page titles, headline-md for section leads, headline-sm/xs for subheads and labels, and body-md for paragraphs. Maintain the provided line-heights to preserve the airy feel.

## Layout

The spacing scale is 8/16/32/64/96px, encouraging an 8px rhythm. Build sections with md (32px) inner padding and lg–xl (64–96px) vertical separation for major breaks. A simple responsive grid works best: 12 columns on desktop with 32px gutters; collapse to a single column on mobile with sm (16px) side padding. Keep copy widths comfortable (60–70ch) and let display headings breathe with lg spacing above and md below.

## Elevation & Depth

No shadows are used (all measured shadows are none). Hierarchy relies on whitespace, strong typography, and subtle borders (#e5e7eb). Containers can use the Surface (white) against the page background with a border or increased outer spacing. Use black text sparingly to pull focus; otherwise stick to Graphite for body content.

## Shapes

Corners are small and utilitarian: 4px for interactive controls (buttons, inputs) and 8px for larger surfaces (cards, media). Use square corners (0px) only for text links and hard-edged artwork to keep the visual language consistent and crisp.

## Components

- Button — Primary: Text-only emphasis using textColor #3c3c3c, 36px height, 11px 12px padding, 4px radius. Use for standard actions on light surfaces.
- Button — Secondary: High-contrast action with #121212 background and white text, 36px height, 11px 12px padding, 4px radius. Reserve for primary CTAs like "Get started".
- Button — Link: Inline action with #121212 text, 0px radius. No background; pairs with body copy.
- Card: White surface, Graphite text, 8px radius, 16px padding. Add a #e5e7eb border when placed on white backgrounds.

### Careers Hero
- Layout: xl (96px) top/bottom spacing. Title in headline-lg, color #000000; supporting line in body-md. A single brand artwork block sits below with md (32px) gap.

### Operating Principles Block
- Section heading in headline-md. Each principle starts with a bolded sentence (body-md) followed by paragraph copy (body-md). Use md (32px) vertical gaps between principles.

### Values List
- Five short value statements presented as a vertical stack. Headings in headline-sm with body-md descriptions. Use lg (64px) outer spacing.

### Teams Filter Bar
- Horizontal list of team anchors styled as Button — Link. 16px gaps, wrap on small screens, and maintain 4px focus outlines where applicable.

### Job Listing Row
- Role title as headline-sm linking out; location beneath in body-md. Rows separated by a 1px #e5e7eb divider with 16px vertical padding.

### Header Navigation
- Compact top bar with product menus on the left and two actions at right: "Log in" (Button — Link) and "Get started" (Button — Secondary).

### Compliance Strip in Footer
- Small line of certifications set in body-md, separated by #e5e7eb dividers; keep md (32px) padding and center alignment.

## Do's and Don'ts

- Do use Graphite (#3c3c3c) for most text and reserve black (#000000) for key headlines or critical emphasis.
- Do separate major sections with lg–xl spacing; avoid stacking dense blocks without clear breathing room.
- Do use 4px radii for controls and 8px for cards; keep links square (0px).
- Don't introduce drop shadows; use borders (#e5e7eb) or whitespace to differentiate layers.
- Don't add extra accent colors; the system is monochrome-first with occasional brand artwork.
- Don't mix headline families; use GT America Mono for primary headings and Haltung for all other text.

## Agent Prompt Guide

Quick color reference
- Text: #3c3c3c
- Background: #ffffff
- Border: #e5e7eb
- Accent/Emphasis: #000000

1) Build a careers hero
- Container: 100% width, background #ffffff, padding-top/bottom 96px.
- H1: font GT America Mono, size 20px, weight 400, line-height 1.2, color #000000.
- Subtext: font Haltung, size 16px, weight 400, line-height 3.68, letter-spacing -0.07em, color #3c3c3c.
- Primary action: Button — Secondary (36px height, 11px 12px, background #121212, text #ffffff, radius 4px).

2) Operating principles section
- Section heading: GT America Mono, 19px, line-height 1.21, color #000000, margin-bottom 32px.
- Each principle: lead sentence in Haltung 16px, line-height 3.68, letter-spacing -0.07em, color #3c3c3c; paragraph follows. Stack items with 32px gaps and add a bottom border #e5e7eb.

3) Job listings list
- For each role: title in Haltung 18px (headline-sm), color #000000; location in Haltung 16px body, color #3c3c3c.
- Row padding 16px vertical, divider 1px #e5e7eb. Group by team with 32px headers.

4) Footer compliance strip
- Background #ffffff, 32px vertical padding.
- Items set in Haltung 16px body, color #3c3c3c; separate items with 1px #e5e7eb dividers. Links use Button — Link styling (#121212, radius 0px).

## Similar Brands

- Vercel: Black-and-white, developer-forward tone; Reevo is stricter about borders and uses fewer gradients.
- Linear: Stark typography and minimal color; Reevo leans more industrial with monospaced headings and block artwork.
- Retool: Technical aesthetic with utilitarian components; Reevo's palette is leaner and shadows are fully absent.
- GitHub (marketing pages): Monochrome emphasis and roomy spacing; Reevo is bolder in display type and uses a tighter component set.

:root {
  /* Colors */
  --color-primary: #3c3c3c;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 20px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 19px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 18px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.22;
  --text-headline-xs-size: 17px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.18;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 3.68;
  --text-body-md-tracking: -0.07em;
  --font-gtamericamono: "GTAmericaMono";
  --font-haltung: "Haltung";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11px 12px;
  --button-primary-height: 36px;
  --button-secondary-background-color: #121212;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11px 12px;
  --button-secondary-height: 36px;
  --button-link-text-color: #121212;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Eliminate the stack tax, multiply your pipeline & close faster",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.235,
          0.235,
          0.235
        ],
        "hex": "#3c3c3c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.235,
          0.235,
          0.235
        ],
        "hex": "#3c3c3c"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 96,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "GTAmericaMono",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "GTAmericaMono",
        "fontSize": {
          "value": 19,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Haltung",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Haltung",
        "fontSize": {
          "value": 17,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Haltung",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.07,
          "unit": "em"
        }
      }
    }
  }
}

@theme {
  --color-primary: #3c3c3c;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #3c3c3c;
  --font-headline-lg: "GTAmericaMono";
  --font-headline-md: "GTAmericaMono";
  --font-headline-sm: "Haltung";
  --font-headline-xs: "Haltung";
  --font-body-md: "Haltung";
  --text-headline-lg: 20px;
  --text-headline-md: 19px;
  --text-headline-sm: 18px;
  --text-headline-xs: 17px;
  --text-body-md: 16px;
  --tracking-body-md: -0.07em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;
}