Retool Careers

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

# Retool: Sage Careers Canvas and One Black Pill CTA

## Overview

Retool's careers UI is calm, text-led, and efficient. A pale sage surface sets a friendly baseline, while near-black text conveys confidence and clarity. Spacing is generous and rhythmic, leaning spacious rather than dense. Interactions are minimal; hierarchy is achieved with size, weight, and a single filled black pill for primary actions.

## Colors

- **primary (#151515):** Deep graphite for all core text, icons, and filled button backgrounds.
- **neutral (#E9EBDF):** Pale sage used as the base page canvas and card surface.
- **border (#E5E7EB):** Light gray for dividers, input outlines, and subtle section rules.
- **surface (#E9EBDF):** Surface alias; use for page and card backgrounds to keep tone consistent.
- **on-surface (#151515):** Text-on-surface alias; pair with the sage background for strong readability.

## Typography

- Headline levels (lg/md/sm) use Saans Font at 60/48/36px, weight 380, tight 1.05 line height and slight negative tracking. Saans Font is custom/self-hosted; if unavailable, substitute Inter, IBM Plex Sans, or Public Sans for a similar neo-grotesk feel. Map weight 380 to 400 in substitutes.
- Headline-xs uses the ui-sans-serif system stack at 18px/1.22 for compact section labels and subheads. This is safe to use in any environment.
- Body-md uses Saans Font at 16px with a long 1.69 line height and slight positive letter-spacing (0.014em) for comfortable reading on sage surfaces. Use the same Inter/IBM Plex Sans/Public Sans fallbacks when Saans isn't available.
- Noto Color Emoji (Google) is available for emoji rendering in copy when needed.
- Px Grotesk Font is listed as custom; if a display alternative is required, consider Space Grotesk or Archivo as obtainable substitutes with comparable geometry.

## Layout

Spacing scales to roomy sections: xs 4px for hairlines, sm 14px for small gaps, md 34px for block spacing, lg 60px for section padding, and xl 128px for hero bands. Use a standard 12-column grid with wide gutters; center headlines and constrain text blocks for comfortable measure. Prefer vertical rhythm in 14/34px increments to align headings, lists, and dividers. Allow generous above/below spacing on section titles (md to lg) to keep content scannable.

## Elevation & Depth

Depth is almost entirely tonal. Shadows are off by default (md–xl: none); the only available shadow is a very light sm for subtle lifts when essential. Use border #E5E7EB rules and whitespace to separate sections. Filled black pills and imagery provide focal points instead of heavy elevation.

## Shapes

The system is rounded-but-practical. Core cards use 8px corners. Buttons and key CTAs are fully pill-shaped (9999px) at a fixed 40px height, signaling interactivity and priority without extra decoration. Links remain square (0 radius) when styled as button-link.

## Components

- Buttons
  - Primary (text-only): text color #151515, 0 radius. Use for inline and secondary actions.
  - Secondary (filled): background #151515, text #E9EBDF, pill radius 9999px, 40px height, 13x20px padding. Use as the main CTA on light surfaces.
  - Link: #151515 text, no radius; pair with chevrons or underlines as needed.
- Card: Sage surface (#E9EBDF), 8px radius, 16px padding, #151515 text; use for compact content groupings on the same sage canvas.

### Careers hero
Centered block on the sage surface with a pretitle, a 60px headline (weight 380, -0.023em), 16px body copy at 1.69 line height, and one filled black pill (40px tall). Vertical padding: xl (128px) top and bottom.

### Team photo strip
A full-width, horizontally scrolling image row directly beneath the hero. Low or no shadow; edges align to the grid. Include an unobtrusive play/pause control for motion management.

### Values list
Two subsections ("Who we are", "How we work") set with headline-sm (36px) and body-md paragraphs. Use md (34px) spacing between bullets and lg (60px) from section title to content.

### Interview steps
Numbered list (1–3) with each step titled in headline-xs (18px/1.22) and explained in body-md. Separate steps with a border #E5E7EB rule and md (34px) gaps.

### Locations & hybrid notice
Compact paragraph about office hubs and hybrid policy followed by inline city labels. Use sm (14px) gaps and button-link styling for any location filters.

### Perks grid
Multi-column text grid of short blurbs. Set each perk title in headline-xs (18px) with body-md below; grid gap md (34px). Avoid icons unless they share a uniform size; keep to text for parity.

### Open roles list
Department headers in headline-xs (18px), followed by role rows: job title link and a quiet "More info" link styled as button-link. Use border #E5E7EB dividers and md (34px) vertical spacing between rows.

## Do's and Don'ts

- Do use the sage surface (#E9EBDF) as the default page background; reserve filled black (#151515) for the primary pill CTA.
- Do keep the hero headline at 60px/1.05 with slight negative tracking; map to 400 weight if the fallback family lacks 380.
- Do separate long sections with #E5E7EB borders and md (34px) spacing rather than heavy shadows.
- Don't introduce additional accent colors; contrast comes from black text and imagery on sage.
- Don't mix corner languages—use 8px for containers, full pill (9999px) for buttons, and avoid arbitrary radii.
- Don't exceed the 40px button height; match 13x20px padding for consistency across CTAs.

## Agent Prompt Guide

Quick color reference
- Text: #151515
- Background: #E9EBDF
- Border: #E5E7EB
- Accent/CTA fill: #151515

1) Build a centered careers hero
- Container: background #E9EBDF with 128px top/bottom padding.
- H1: font-family 'Saans Font' (fallback: Inter, IBM Plex Sans, Public Sans), size 60px, weight 380 (fallback 400), line-height 1.05, letter-spacing -0.023em, color #151515, max-width ~12ch.
- Paragraph: 16px, line-height 1.69, letter-spacing 0.014em, color #151515, max-width 60ch.
- CTA: 40px tall pill, background #151515, text #E9EBDF, padding 13px 20px, border-radius 9999px.

2) Values section with two columns
- Section gap from previous: 60px.
- Section title: 36px/1.05, weight 380, color #151515.
- Two equal columns; each bullet uses 16px body with 14px vertical gaps.
- Use #E5E7EB vertical rules between columns on large screens; remove on mobile.

3) Interview steps list
- Three steps in a single column.
- Step heading: 18px/1.22, weight 380; body: 16px/1.69.
- Separate steps with a 1px #E5E7EB border and 34px padding above/below each item.

4) Open roles listing
- Department label: 18px/1.22, 60px space above.
- Role row: job title as link (#151515), adjacent "More info" as button-link (no radius, #151515 text).
- Row spacing: 34px; section divider: 1px #E5E7EB; no shadows.

## Similar Brands

- Notion Careers — monochrome type on a soft neutral background; Retool's sage is warmer while Notion skews grayscale and uses more iconography.
- Linear — minimal, typographic focus with sparse UI; Retool is lighter and uses imagery, whereas Linear is starker and often dark-themed.
- Stripe Careers — clear grid and generous spacing; Stripe adds a branded blue accent where Retool stays black-on-sage.
- Vercel — disciplined, pill CTAs and restrained components; Vercel favors a dark canvas, Retool keeps a light sage surface.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #151515;
  --color-neutral: #e9ebdf;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 60px;
  --text-headline-lg-weight: 380;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.023em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 380;
  --text-headline-md-leading: 1.05;
  --text-headline-md-tracking: -0.011em;
  --text-headline-sm-size: 36px;
  --text-headline-sm-weight: 380;
  --text-headline-sm-leading: 1.05;
  --text-headline-sm-tracking: -0.011em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 380;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 380;
  --text-body-md-leading: 1.69;
  --text-body-md-tracking: 0.014em;
  --font-saansfont: "saansFont";
  --font-ui-sans-serif: "ui-sans-serif";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 34px;
  --spacing-lg: 60px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 40px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 40px;
  --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: #151515;
  --color-neutral: #e9ebdf;
  --color-border: #e5e7eb;
  --color-surface: #e9ebdf;
  --color-on-surface: #151515;
  --font-headline-lg: "saansFont";
  --font-headline-md: "saansFont";
  --font-headline-sm: "saansFont";
  --font-headline-xs: "ui-sans-serif";
  --font-body-md: "saansFont";
  --text-headline-lg: 60px;
  --text-headline-md: 48px;
  --text-headline-sm: 36px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.023em;
  --tracking-headline-md: -0.011em;
  --tracking-headline-sm: -0.011em;
  --tracking-body-md: 0.014em;
  --font-weight-headline-lg: 380;
  --font-weight-headline-md: 380;
  --font-weight-headline-sm: 380;
  --font-weight-headline-xs: 380;
  --font-weight-body-md: 380;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 34px;
  --spacing-lg: 60px;
  --spacing-xl: 128px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.082,
                    0.082,
                    0.082
                ],
                "hex": "#151515"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.914,
                    0.922,
                    0.875
                ],
                "hex": "#e9ebdf"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.914,
                    0.922,
                    0.875
                ],
                "hex": "#e9ebdf"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.082,
                    0.082,
                    0.082
                ],
                "hex": "#151515"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 34,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 128,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 380,
                "letterSpacing": {
                    "value": -0.023,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 380,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 36,
                    "unit": "px"
                },
                "fontWeight": 380,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "ui-sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 380
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 380,
                "letterSpacing": {
                    "value": 0.014,
                    "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 Retool Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Retool
description: Ship vibe-coded apps to production with enterprise governance built in.
colors:
  primary: "#151515"
  neutral: "#e9ebdf"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: saansFont
    fontSize: 60px
    fontWeight: 380
    lineHeight: 1.05
    letterSpacing: -0.023em
  headline-md:
    fontFamily: saansFont
    fontSize: 48px
    fontWeight: 380
    lineHeight: 1.05
    letterSpacing: -0.011em
  headline-sm:
    fontFamily: saansFont
    fontSize: 36px
    fontWeight: 380
    lineHeight: 1.05
    letterSpacing: -0.011em
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 18px
    fontWeight: 380
    lineHeight: 1.22
  body-md:
    fontFamily: saansFont
    fontSize: 16px
    fontWeight: 380
    lineHeight: 1.69
    letterSpacing: 0.014em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 14px
  md: 34px
  lg: 60px
  xl: 128px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px 20px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 13px 20px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Retool: Sage Careers Canvas and One Black Pill CTA

## Overview

Retool's careers UI is calm, text-led, and efficient. A pale sage surface sets a friendly baseline, while near-black text conveys confidence and clarity. Spacing is generous and rhythmic, leaning spacious rather than dense. Interactions are minimal; hierarchy is achieved with size, weight, and a single filled black pill for primary actions.

## Colors

- **primary (#151515):** Deep graphite for all core text, icons, and filled button backgrounds.
- **neutral (#E9EBDF):** Pale sage used as the base page canvas and card surface.
- **border (#E5E7EB):** Light gray for dividers, input outlines, and subtle section rules.
- **surface (#E9EBDF):** Surface alias; use for page and card backgrounds to keep tone consistent.
- **on-surface (#151515):** Text-on-surface alias; pair with the sage background for strong readability.

## Typography

- Headline levels (lg/md/sm) use Saans Font at 60/48/36px, weight 380, tight 1.05 line height and slight negative tracking. Saans Font is custom/self-hosted; if unavailable, substitute Inter, IBM Plex Sans, or Public Sans for a similar neo-grotesk feel. Map weight 380 to 400 in substitutes.
- Headline-xs uses the ui-sans-serif system stack at 18px/1.22 for compact section labels and subheads. This is safe to use in any environment.
- Body-md uses Saans Font at 16px with a long 1.69 line height and slight positive letter-spacing (0.014em) for comfortable reading on sage surfaces. Use the same Inter/IBM Plex Sans/Public Sans fallbacks when Saans isn't available.
- Noto Color Emoji (Google) is available for emoji rendering in copy when needed.
- Px Grotesk Font is listed as custom; if a display alternative is required, consider Space Grotesk or Archivo as obtainable substitutes with comparable geometry.

## Layout

Spacing scales to roomy sections: xs 4px for hairlines, sm 14px for small gaps, md 34px for block spacing, lg 60px for section padding, and xl 128px for hero bands. Use a standard 12-column grid with wide gutters; center headlines and constrain text blocks for comfortable measure. Prefer vertical rhythm in 14/34px increments to align headings, lists, and dividers. Allow generous above/below spacing on section titles (md to lg) to keep content scannable.

## Elevation & Depth

Depth is almost entirely tonal. Shadows are off by default (md–xl: none); the only available shadow is a very light sm for subtle lifts when essential. Use border #E5E7EB rules and whitespace to separate sections. Filled black pills and imagery provide focal points instead of heavy elevation.

## Shapes

The system is rounded-but-practical. Core cards use 8px corners. Buttons and key CTAs are fully pill-shaped (9999px) at a fixed 40px height, signaling interactivity and priority without extra decoration. Links remain square (0 radius) when styled as button-link.

## Components

- Buttons
  - Primary (text-only): text color #151515, 0 radius. Use for inline and secondary actions.
  - Secondary (filled): background #151515, text #E9EBDF, pill radius 9999px, 40px height, 13x20px padding. Use as the main CTA on light surfaces.
  - Link: #151515 text, no radius; pair with chevrons or underlines as needed.
- Card: Sage surface (#E9EBDF), 8px radius, 16px padding, #151515 text; use for compact content groupings on the same sage canvas.

### Careers hero
Centered block on the sage surface with a pretitle, a 60px headline (weight 380, -0.023em), 16px body copy at 1.69 line height, and one filled black pill (40px tall). Vertical padding: xl (128px) top and bottom.

### Team photo strip
A full-width, horizontally scrolling image row directly beneath the hero. Low or no shadow; edges align to the grid. Include an unobtrusive play/pause control for motion management.

### Values list
Two subsections ("Who we are", "How we work") set with headline-sm (36px) and body-md paragraphs. Use md (34px) spacing between bullets and lg (60px) from section title to content.

### Interview steps
Numbered list (1–3) with each step titled in headline-xs (18px/1.22) and explained in body-md. Separate steps with a border #E5E7EB rule and md (34px) gaps.

### Locations & hybrid notice
Compact paragraph about office hubs and hybrid policy followed by inline city labels. Use sm (14px) gaps and button-link styling for any location filters.

### Perks grid
Multi-column text grid of short blurbs. Set each perk title in headline-xs (18px) with body-md below; grid gap md (34px). Avoid icons unless they share a uniform size; keep to text for parity.

### Open roles list
Department headers in headline-xs (18px), followed by role rows: job title link and a quiet "More info" link styled as button-link. Use border #E5E7EB dividers and md (34px) vertical spacing between rows.

## Do's and Don'ts

- Do use the sage surface (#E9EBDF) as the default page background; reserve filled black (#151515) for the primary pill CTA.
- Do keep the hero headline at 60px/1.05 with slight negative tracking; map to 400 weight if the fallback family lacks 380.
- Do separate long sections with #E5E7EB borders and md (34px) spacing rather than heavy shadows.
- Don't introduce additional accent colors; contrast comes from black text and imagery on sage.
- Don't mix corner languages—use 8px for containers, full pill (9999px) for buttons, and avoid arbitrary radii.
- Don't exceed the 40px button height; match 13x20px padding for consistency across CTAs.

## Agent Prompt Guide

Quick color reference
- Text: #151515
- Background: #E9EBDF
- Border: #E5E7EB
- Accent/CTA fill: #151515

1) Build a centered careers hero
- Container: background #E9EBDF with 128px top/bottom padding.
- H1: font-family 'Saans Font' (fallback: Inter, IBM Plex Sans, Public Sans), size 60px, weight 380 (fallback 400), line-height 1.05, letter-spacing -0.023em, color #151515, max-width ~12ch.
- Paragraph: 16px, line-height 1.69, letter-spacing 0.014em, color #151515, max-width 60ch.
- CTA: 40px tall pill, background #151515, text #E9EBDF, padding 13px 20px, border-radius 9999px.

2) Values section with two columns
- Section gap from previous: 60px.
- Section title: 36px/1.05, weight 380, color #151515.
- Two equal columns; each bullet uses 16px body with 14px vertical gaps.
- Use #E5E7EB vertical rules between columns on large screens; remove on mobile.

3) Interview steps list
- Three steps in a single column.
- Step heading: 18px/1.22, weight 380; body: 16px/1.69.
- Separate steps with a 1px #E5E7EB border and 34px padding above/below each item.

4) Open roles listing
- Department label: 18px/1.22, 60px space above.
- Role row: job title as link (#151515), adjacent "More info" as button-link (no radius, #151515 text).
- Row spacing: 34px; section divider: 1px #E5E7EB; no shadows.

## Similar Brands

- Notion Careers — monochrome type on a soft neutral background; Retool's sage is warmer while Notion skews grayscale and uses more iconography.
- Linear — minimal, typographic focus with sparse UI; Retool is lighter and uses imagery, whereas Linear is starker and often dark-themed.
- Stripe Careers — clear grid and generous spacing; Stripe adds a branded blue accent where Retool stays black-on-sage.
- Vercel — disciplined, pill CTAs and restrained components; Vercel favors a dark canvas, Retool keeps a light sage surface.

:root {
  /* Colors */
  --color-primary: #151515;
  --color-neutral: #e9ebdf;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 60px;
  --text-headline-lg-weight: 380;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.023em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 380;
  --text-headline-md-leading: 1.05;
  --text-headline-md-tracking: -0.011em;
  --text-headline-sm-size: 36px;
  --text-headline-sm-weight: 380;
  --text-headline-sm-leading: 1.05;
  --text-headline-sm-tracking: -0.011em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 380;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 380;
  --text-body-md-leading: 1.69;
  --text-body-md-tracking: 0.014em;
  --font-saansfont: "saansFont";
  --font-ui-sans-serif: "ui-sans-serif";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 34px;
  --spacing-lg: 60px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 40px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 40px;
  --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": "Ship vibe-coded apps to production with enterprise governance built in.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.082,
          0.082,
          0.082
        ],
        "hex": "#151515"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.914,
          0.922,
          0.875
        ],
        "hex": "#e9ebdf"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.914,
          0.922,
          0.875
        ],
        "hex": "#e9ebdf"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.082,
          0.082,
          0.082
        ],
        "hex": "#151515"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 34,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 60,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 128,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 60,
          "unit": "px"
        },
        "fontWeight": 380,
        "letterSpacing": {
          "value": -0.023,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 380,
        "letterSpacing": {
          "value": -0.011,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 380,
        "letterSpacing": {
          "value": -0.011,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ui-sans-serif",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 380
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 380,
        "letterSpacing": {
          "value": 0.014,
          "unit": "em"
        }
      }
    }
  }
}

@theme {
  --color-primary: #151515;
  --color-neutral: #e9ebdf;
  --color-border: #e5e7eb;
  --color-surface: #e9ebdf;
  --color-on-surface: #151515;
  --font-headline-lg: "saansFont";
  --font-headline-md: "saansFont";
  --font-headline-sm: "saansFont";
  --font-headline-xs: "ui-sans-serif";
  --font-body-md: "saansFont";
  --text-headline-lg: 60px;
  --text-headline-md: 48px;
  --text-headline-sm: 36px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.023em;
  --tracking-headline-md: -0.011em;
  --tracking-headline-sm: -0.011em;
  --tracking-body-md: 0.014em;
  --font-weight-headline-lg: 380;
  --font-weight-headline-md: 380;
  --font-weight-headline-sm: 380;
  --font-weight-headline-xs: 380;
  --font-weight-body-md: 380;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 4px;
  --spacing-sm: 14px;
  --spacing-md: 34px;
  --spacing-lg: 60px;
  --spacing-xl: 128px;
}