---
name: carbon-design-system
core: "1.0"
dials:
  density: Default
  shape: Sharp
  depth: Flat
  contrast: Standard
accent-scope: "interactive states: primary actions, links and focus rings"
icons: lucide
overrides:
  - { token: radius-control, value: "0px", reason: "Matches the reference: controls use square 0px corners" }
  - { token: radius-field, value: "0px", reason: "Matches the reference: fields use square 0px corners" }
  - { token: radius-menu, value: "0px", reason: "Matches the reference: menus use square 0px corners" }
  - { token: field-border, value: "underline", reason: "Matches the reference: fields use a bottom border only" }
description: "Use when building enterprise product UI, dashboards, data tables, forms or technical docs that need a flat, sharp-cornered, grid-driven look in IBM Plex with a single blue accent. Includes the canonical dropdown. Use it for every kind of output, not only web UI: PowerPoint / Keynote / Google Slides decks, Word and Google Docs documents, PDF reports, emails, social posts, charts and diagrams."
---

# Carbon Design System

Carbon is a flat, grid-driven enterprise interface language. It uses IBM Plex, cool grey layers, hairline borders, nearly square corners and one confident blue reserved for interaction. Form controls are filled with an underline instead of a full box, which is most visible in the dropdown. Use it for dense, data-heavy products where clarity and consistency matter more than decoration.

## Brand Personality

| Trait | Expression |
| --- | --- |
| Rational | Strict grid alignment, 40px fields and rows, predictable rhythm |
| Restrained | One blue for interaction, neutrals everywhere else |
| Precise | Square 0px corners, underline fields, 1px dividers, exact focus rings |
| Inclusive | Strong text contrast, visible 2px focus, large hit targets |
| Technical | IBM Plex Sans with IBM Plex Mono for code and labels |

**Tone of voice:** Clear, direct and neutral. Use short imperative labels such as "Add filter" or "Save changes", and avoid marketing flourish.

**Logo:** A blue square glyph made of three stacked bars of varying length, set beside a bold-sans wordmark. Use it in the brand blue on light surfaces and in white on #161616.

## Color Tokens

```css
:root {
  --bg: #ffffff;            /* page background */
  --layer-01: #f4f4f4;      /* tiles, inputs, dropdown field and menu */
  --ink: #161616;           /* primary text, shell header, dark theme bg */
  --text-secondary: #525252;/* labels, menu item text */
  --text-helper: #6f6f6f;   /* placeholder and helper text */
  --border-strong: #8d8d8d; /* input and dropdown underline, disabled text */
  --border-subtle: #e0e0e0; /* table header, menu dividers */
  --layer-selected: #e0e0e0;/* selected menu item */
  --layer-hover: #e8e8e8;   /* layer and dropdown item hover */
  --accent: #0f62fe;        /* primary actions, links, focus */
  --accent-tint: #d0e2ff;   /* tags, selected fills */
  --link-on-dark: #78a9ff;  /* links on dark, grid annotation */
  --ai: #8a3ffc;            /* ai label accent only */
}
```

The accent appears only on interactive states: primary buttons, links and focus rings. Backgrounds, cards and illustration stay neutral. Purple is reserved for AI labels.

## Typography

```css
:root {
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --type-ratio: 1.25;
}
```

| Role | Font | Size / weight | Notes |
| --- | --- | --- | --- |
| Display / H1 | Plex Sans | 40px / 400 | line-height 1.25, no letter-spacing |
| H2 | Plex Sans | 32px / 400 | Sentence case |
| H3 | Plex Sans | 20px / 400 | |
| Body | Plex Sans | 14px / 400 | line-height 1.43 |
| Label | Plex Sans | 12px / 400 | color secondary, sits above fields |
| Helper | Plex Sans | 12px / 400 | color helper, sits below fields |
| Code, tokens | Plex Mono | 13px / 400 | annotations and snippets |

Labels use Sentence case. Do not uppercase them, except for rare mono eyebrows.

## Shape and density

- **Shape:** Sharp. Controls and fields use square 0px corners (an override of the core 2px step, to match Carbon); cards use the 8 step.
- **Depth:** Flat. Separation comes from tone (white, #f4f4f4, #e0e0e0) and 1px rules. The only shadow is a soft one on open menus.
- **Density:** Default. Controls are 40px high, and table rows and menu items are 40px.
- **Contrast:** Standard. Ink on white and on layers.
- Everything else follows Celestial core v1.0.

## Components

### Button
- Height 40px, 14px text, weight 400, padding 0 16px, radius 0px (square), flat.
- **Primary:** fill #0f62fe, white text. Hover darkens the blue slightly. Active darkens further. Focus adds a 2px #0f62fe ring with a 1px white inset. Disabled uses #e0e0e0 fill and #8d8d8d text.
- **Secondary:** transparent with a 1px #0f62fe border and blue text. Hover fills with #d0e2ff.
- **Ghost:** blue text only, hover #e8e8e8.
- Labels are short and in Sentence case.

### Input
- Filled with #f4f4f4, 40px high, **underline only** (1px #8d8d8d bottom border), radius 0px (square), 14px ink text, #6f6f6f placeholder.
- The label sits above at 12px in #525252. Helper text sits below at 12px in #6f6f6f.
- Hover changes the fill to #e8e8e8. Focus draws a 2px #0f62fe outline on all sides. Disabled has no underline, with #8d8d8d text.
- Errors use a 2px red outline plus an error message. Never rely on colour alone.

### Dropdown (field and menu)
The dropdown is the canonical select and follows the same filled, underlined language as the input.

**Field**
- Label above at 12px in #525252.
- 40px high, fill #f4f4f4, a single 1px #8d8d8d bottom border and no other borders, radius 0px (square).
- Selected value or placeholder at 14px. The placeholder is #6f6f6f and the value is #161616, with ellipsis on overflow.
- A chevron-down icon sits at 16px, right-aligned, with 16px padding on both sides. It flips upward when the menu is open.
- Hover changes the fill to #e8e8e8. Open or focused state draws a 2px #0f62fe outline around the field.
- Disabled: #8d8d8d text, no underline, and the chevron dimmed.

**Menu**
- Opens flush below the field with no gap, at the same width.
- Fill #f4f4f4, no border, soft shadow, max height of about five items (200px) with internal scroll.
- Items are 40px high with 0 16px padding, 14px text in #525252 (or #161616 when selected), and truncate with ellipsis.
- Items are separated by a 1px #e0e0e0 divider, inset 16px on each side, and the last item has none.
- Hover is #e8e8e8. Keyboard focus draws a 2px #0f62fe inset outline. Selected is #e0e0e0 with a 16px check icon on the right.
- Keyboard: arrows move the highlight, Enter selects, Escape closes, and typing jumps to a matching item.

### Card
- Flat #f4f4f4 tile (or a white tile with a 1px #e0e0e0 border), radius 8, 16px padding, no shadow.
- Clickable cards hover to #e8e8e8 and show a 2px blue focus outline.

### Nav
- A #161616 shell header, 48px high, with white text. Links are #c6c6c6, turn white on hover, and show a 2px blue underline when active.
- The side nav is white with 40px items, hover #e8e8e8, and the active item has a 3px left bar in #0f62fe.

### Badge and tag
- Pill shape, 12px text, weight 400. The default tag uses an #d0e2ff fill with dark-blue text. The neutral tag uses #e0e0e0 with #161616 text.
- The AI label uses the #8a3ffc accent only for AI features.

### Table
- Header row on #e0e0e0 with 14px weight-600 text. Rows are 40px with a 1px #e0e0e0 bottom border.
- Hover is #e8e8e8 and selected rows use #d0e2ff. Numbers are right-aligned in Plex Mono when comparing values.
- The toolbar above holds search and dropdown filters, using the filled underlined style.

## Layout

- Product layout: a fixed shell header, an optional left side nav, and content aligned to the 12-column grid, with a max width of 1584px.
- Page headers are left-aligned with a breadcrumb, an H1 and a toolbar.
- Group content in layer tiles. Alternate white and #f4f4f4 to show hierarchy instead of adding borders.
- Everything else follows Celestial core v1.0.

## Signature patterns

1. **Dropdown field and menu:** the filled, underlined field with a chevron, opening a flush menu with inset dividers, a hover tone and a check on the selected item.
2. **Underlined field stack:** the label, field, helper and error structure shared by all form controls.
3. **Structured data table:** header, 40px rows, a toolbar with dropdown filters, and selection tint.
4. **Grid annotation:** blue column overlays with Plex Mono labels for documentation.

## Do / Don't

**Do**
- Keep the dropdown underlined and filled, with the menu attached flush to the field.
- Use #0f62fe only for interaction.
- Show a 2px focus outline on every interactive element.
- Use 40px heights consistently for fields, items and rows.
- Use Sentence case labels.

**Don't**
- Don't box the dropdown or inputs with four borders.
- Don't round corners on controls, fields or menus — Carbon is square (0px).
- Don't add decorative shadows or gradients.
- Don't use the accent for backgrounds or decoration.
- Don't leave a gap between the dropdown field and its menu.

## Quick-start CSS

```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Mono&display=swap');

:root {
  --bg:#ffffff; --layer-01:#f4f4f4; --ink:#161616; --text-secondary:#525252;
  --text-helper:#6f6f6f; --border-strong:#8d8d8d; --border-subtle:#e0e0e0;
  --layer-selected:#e0e0e0; --layer-hover:#e8e8e8; --accent:#0f62fe; --accent-tint:#d0e2ff;
}
body { margin:0; background:var(--bg); color:var(--ink); font:400 14px/1.43 'IBM Plex Sans',system-ui,sans-serif; }
h1,h2,h3 { font-family:'IBM Plex Sans',system-ui,sans-serif; font-weight:400; line-height:1.25; }
a { color:var(--accent); }

.btn { height:40px; padding:0 16px; border:0; border-radius:0; background:var(--accent); color:#fff; font:400 14px 'IBM Plex Sans'; cursor:pointer; }
.btn:hover { filter:brightness(.9); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.btn:disabled { background:var(--border-subtle); color:var(--border-strong); cursor:not-allowed; }
.btn-secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-secondary:hover { background:var(--accent-tint); filter:none; }

.field-label { display:block; margin-bottom:4px; font-size:12px; color:var(--text-secondary); }
.field-helper { margin-top:4px; font-size:12px; color:var(--text-helper); }
.input, .dropdown-field {
  box-sizing:border-box; width:100%; height:40px; padding:0 16px; border:0; border-bottom:1px solid var(--border-strong);
  border-radius:0; background:var(--layer-01); color:var(--ink); font:400 14px 'IBM Plex Sans';
}
.input::placeholder { color:var(--text-helper); }
.input:hover, .dropdown-field:hover { background:var(--layer-hover); }
.input:focus, .dropdown-field:focus, .dropdown[open] .dropdown-field { outline:2px solid var(--accent); outline-offset:-2px; }
.input:disabled, .dropdown-field[disabled] { border-bottom-color:transparent; color:var(--border-strong); cursor:not-allowed; }

.dropdown { position:relative; }
.dropdown-field { display:flex; align-items:center; justify-content:space-between; text-align:left; cursor:pointer; }
.dropdown-menu {
  position:absolute; top:100%; left:0; right:0; z-index:10; margin:0; padding:0; list-style:none;
  max-height:200px; overflow:auto; background:var(--layer-01); border-radius:0;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.dropdown-item {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  height:40px; padding:0 16px; color:var(--text-secondary); cursor:pointer;
}
.dropdown-item + .dropdown-item::before { content:''; position:absolute; top:0; left:16px; right:16px; border-top:1px solid var(--border-subtle); }
.dropdown-item:hover { background:var(--layer-hover); color:var(--ink); }
.dropdown-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.dropdown-item[aria-selected='true'] { background:var(--layer-selected); color:var(--ink); }

.card { background:var(--layer-01); border-radius:8px; padding:16px; }
.tag { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--accent-tint); color:#0043ce; font-size:12px; }
.table { width:100%; border-collapse:collapse; }
.table th { background:var(--border-subtle); text-align:left; font-weight:600; height:40px; padding:0 16px; }
.table td { height:40px; padding:0 16px; border-bottom:1px solid var(--border-subtle); }
.table tr:hover td { background:var(--layer-hover); }
```

## Using Carbon Design System beyond the web

Carbon Design System applies to every output. When asked for a deck, a document, a report, an email, a social post or a chart "for Carbon Design System" or "in Carbon Design System's style", build it from the tokens below — never from a default template or theme.

### Colour roles
| Role | Value | Use |
|---|---|---|
| Background | `#ffffff` | Slide and page background |
| Surface | `#f4f4f4` | Cards, panels, table rows |
| Band | `#d0e2ff` | Section bands, divider slides, table headers |
| Ink | `#161616` | Headlines and body text |
| Ink 2 | `#575757` | Secondary text |
| Muted | `#5c5c5c` | Captions, footers, axis labels |
| Line | `#8d8d8d` | Rules, borders, chart gridlines |
| Accent | `#0f62fe` | One highlight per slide or page (interactive states: primary actions, links and focus rings) |
| On accent | `#ffffff` | Text on the accent |
| Success / warning / error | `#1f8a4c / #b86e00 / #c62f2f` | Status only, never decoration |

### Type
- Headlines: **IBM Plex Sans**, weight 400, tracking -.01em.
- Body: **IBM Plex Sans**. Labels and code: **IBM Plex Mono**.
- If a face isn't installed, use the closest system font of the same style and say so — never silently swap to a default.

### Logo on every output
Every Carbon Design System output carries the logo — never just the name typed out. Use the SVG under **Brand assets** (or a PNG exported from it at 4×); on dark or accent backgrounds use the one-colour version in `#ffffff` / `#ffffff`. Keep clear space equal to the mark's height and never stretch, outline or recolour it otherwise.
| Output | Where the logo goes |
|---|---|
| Web and app UI | Top-left of the header on every page and screen; again in the footer; the mark as favicon and app icon |
| Presentations | Title slide, top-left (about 0.5 in tall); every slide's footer, bottom-left (about 0.25 in); the closing slide |
| Print, articles, whitepapers | Cover or masthead, top-left; running header on every page; back cover or colophon |
| Banners and ads | Every size, top-left or left of the message, at least 24 px tall digital / 40 mm on a roll-up |
| Posters and social posts | Top-left, plus the sign-off at the bottom |
| Email | Header (120–160 px wide) and footer |
| Native apps | Navigation bar on the first screen (iOS: an asset named BrandLogo; Android: res/drawable/brand_logo) |

### Presentations (PowerPoint, Keynote, Google Slides)
- 16:9, 13.333 × 7.5 in (1920 × 1080). Margins 0.6 in; a 12-column grid.
- **Theme** (set it on the master so every slide inherits it): dark 1 = `#161616`, light 1 = `#ffffff`, dark 2 = `#575757`, light 2 = `#d0e2ff`, accent 1–6 = `#0f62fe`, `#1147ad`, `#7ba9fe`, `#575757`, `#5c5c5c`, `#c3d8ff`; heading font = IBM Plex Sans, body font = IBM Plex Sans.
- **Title slide**: background `#ffffff`; headline in IBM Plex Sans 54–64 pt, ink; one-line subtitle in IBM Plex Sans 20 pt, muted; the logo at the top left with clear space equal to its own height.
- **Section divider**: full-bleed `#d0e2ff` (or `#161616` with `#ffffff` text); section number in IBM Plex Mono.
- **Content slide**: title in IBM Plex Sans 32–40 pt; body IBM Plex Sans 18–24 pt, max six bullets; one accent highlight at most.
- **Shapes and cards**: fill `#f4f4f4`, 1 pt `#8d8d8d` border, corner radius 8px (about 0.08 in).
- **Charts**: series in the accent order above; gridlines `#8d8d8d`; labels `#5c5c5c`; no 3-D, no gradients.
- **Footer**: IBM Plex Mono 10 pt in `#5c5c5c`: Carbon Design System · title · page number.
- When generating .pptx with code (e.g. python-pptx), write these colours and fonts into the theme and master first, then add slides from the master.

### Documents and PDF reports (Word, Google Docs, PDF)
- Page `#ffffff`, text `#161616`. H1 IBM Plex Sans 28 pt, H2 20 pt, H3 15 pt; body IBM Plex Sans 11 pt, line spacing 1.5.
- Table header row `#d0e2ff`, 1 pt `#8d8d8d` rules, numbers right-aligned in IBM Plex Mono.
- Callouts: `#f4f4f4` box with a 3 pt left rule in `#0f62fe`.
- Cover page: logo, title in IBM Plex Sans, date and owner in IBM Plex Mono.

### Email, social and diagrams
- Email: 600 px column on `#ffffff`; one primary button in `#0f62fe` with `#ffffff` text, 0px corners.
- Social: square 1080 × 1080 or 1200 × 628; headline in IBM Plex Sans; accent used once; logo bottom-left.
- Diagrams: nodes `#f4f4f4` with `#8d8d8d` borders and 8px corners; connectors `#5c5c5c`; the one emphasised node in `#0f62fe`.


## Brand assets
### Logo (SVG)
Use this mark as-is: don't redraw, recolour (except to one solid colour on dark backgrounds), stretch or add effects.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h18v4H3zM3 10h12v4H3zM3 17h18v4H3z" fill="#0f62fe"></path></svg>
```

### Fonts
- IBM Plex Sans
- IBM Plex Mono


## Celestial core foundations (included)
This brand sits on Celestial core v1.0. The shared rules are included here so this file works on its own.

Shared by every Celestial design skill. Locked values live here once; a brand SKILL.md documents only its deltas and never restates core.

### Spacing
Base unit 4px. Scale: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160px. Components use only scale values.

### Grid and layout
| Breakpoint | Min width | Columns | Gutter | Page margin |
|---|---|---|---|---|
| Mobile | 0px | 4 | 16px | 16–20px |
| Tablet | 640px | 8 | 24px | 32px |
| Desktop | 1024px | 12 | 24px | 32–40px |
| Wide | 1440px | 12 | 32px | auto · max 1120 / 1200 / 1280px |

### Ladders (brands pick a step, never invent a value)
- Control height: 32 / 36 / 40 / 44px — inputs, buttons and selects share one height per size.
- Control radius: 2 / 4 / 6 / 8 / full. Card radius: 8 / 12 / 14 / 16 / 24px. Rule: card radius ≥ control radius; nested radius = outer radius − padding.
- Type scale ratio: 1.2 / 1.25 / 1.333 from a 16px base (14px in dense apps): caption, body, body-lg, h6 → h1. Line height 1.4–1.5 body, 1.0–1.2 display.
- Density: Compact / Default / Comfortable. Border width: 0.5 / 1 / 1.5px.

### Elevation
- Level 0 · flat — page
- Level 1 · card — cards, tiles
- Level 2 · raised — hover, dragged
- Level 3 · popover — menus, tooltips
- Level 4 · modal — dialogs, sheets
The brand's depth dial decides whether a level renders as a hairline, a background step or a shadow.

### Motion
- 120ms · micro — hover, toggle, focus
- 200ms · standard — expand, reveal, tab change
- 320ms · enter / exit — dialogs, drawers, page
Respects prefers-reduced-motion. Brands choose the easing curve only.

### Accessibility
- 4.5:1 contrast for body text, 3:1 for large text and UI parts
- Visible focus on every interactive element (ring colour is the brand's only choice)
- 44px touch targets on mobile
- No meaning carried by colour alone — pair with a label, icon or shape
- Respects prefers-reduced-motion

### Component states
Every component specifies: default, hover, focus-visible, active, disabled, loading, error (inputs), success (inputs). Core defines which token each state reads; brands only supply the token values.

### Z-index
base 0 · sticky 100 · dropdown 200 · overlay 300 · modal 400 · toast 500

### Token classification
| Token / decision | Class | Who sets it | Brand may change |
|---|---|---|---|
| Spacing unit (4px) and scale | Locked | Core | Nothing |
| 12-column grid, gutters, breakpoints | Locked | Core | Nothing (may pick max width 1120 / 1200 / 1280px) |
| Touch target minimum (44px) | Locked | Core | Nothing |
| Contrast minimums (4.5:1 text, 3:1 UI) | Locked | Core | Nothing |
| Focus ring presence and offset | Locked | Core | Colour only |
| Component anatomy and states | Locked | Core | Nothing |
| Motion durations (120 / 200 / 320ms) | Locked | Core | Easing curve choice |
| Z-index scale | Locked | Core | Nothing |
| Control height | Tunable | Brand picks step | 32 / 36 / 40 / 44px |
| Control radius | Tunable | Brand picks step | 2 / 4 / 6 / 8px / full |
| Card radius | Tunable | Brand picks step | 8 / 12 / 14 / 16 / 24px |
| Type scale ratio | Tunable | Brand picks step | 1.200 / 1.250 / 1.333 |
| Density (padding step) | Tunable | Brand picks step | Compact / Default / Comfortable |
| Border width | Tunable | Brand picks step | 0.5 / 1 / 1.5px |
| Colour palette | Free | Brand | Any, mapped to semantic roles |
| Typefaces and weights | Free | Brand | Any, mapped to display / body / mono |
| Heading tracking and case | Free | Brand | Any |
| Rule style (solid / dashed) | Free | Brand | Any |
| Icon set and stroke | Free | Brand | Phosphor / Lucide / Core Line / custom |
| Logo, voice, imagery | Free | Brand | Any |
| Signature patterns | Free (extension) | Brand | New components built from core primitives |

A value outside its class is an override: allowed only with a written reason in the brand's SKILL.md and a conformance flag in Celestial.


## Design tokens (W3C format)

```json
{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$name": "Carbon Design System",
  "core": "{core.version 1.0}",
  "dials": {
    "density": "Default",
    "shape": "Sharp",
    "depth": "Flat",
    "contrast": "Standard"
  },
  "accent-scope": "interactive states: primary actions, links and focus rings",
  "surface": {
    "ground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "raised": {
      "$type": "color",
      "$value": "#f4f4f4"
    },
    "card": {
      "$type": "color",
      "$value": "#f4f4f4"
    },
    "muted": {
      "$type": "color",
      "$value": "#d0e2ff"
    }
  },
  "ink": {
    "primary": {
      "$type": "color",
      "$value": "#161616"
    },
    "body": {
      "$type": "color",
      "$value": "#575757"
    },
    "muted": {
      "$type": "color",
      "$value": "#5c5c5c"
    }
  },
  "line": {
    "default": {
      "$type": "color",
      "$value": "#8d8d8d"
    },
    "width": {
      "$type": "dimension",
      "$value": "1px"
    },
    "style": {
      "$type": "string",
      "$value": "solid 1px"
    }
  },
  "accent": {
    "$type": "color",
    "$value": "#0f62fe"
  },
  "action": {
    "primary-bg": {
      "$type": "color",
      "$value": "#0f62fe"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#e8e8e8"
    },
    "focus-ring": {
      "$type": "color",
      "$value": "#0f62fe"
    }
  },
  "status": {
    "success": {
      "$type": "color",
      "$value": "#1f8a4c"
    },
    "warning": {
      "$type": "color",
      "$value": "#b86e00"
    },
    "error": {
      "$type": "color",
      "$value": "#c62f2f"
    }
  },
  "font": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono"
      ]
    },
    "weight-display": {
      "$type": "fontWeight",
      "$value": 400
    },
    "tracking-display": {
      "$type": "dimension",
      "$value": "-.01em"
    },
    "case-label": {
      "$type": "string",
      "$value": "Sentence case"
    }
  },
  "control": {
    "height": {
      "$type": "dimension",
      "$value": "{core.control.40}"
    },
    "radius": {
      "$type": "dimension",
      "$value": 0
    }
  },
  "card": {
    "radius": {
      "$type": "dimension",
      "$value": "{core.radius.8}"
    }
  },
  "elevation": {
    "mode": {
      "$type": "string",
      "$value": "Background step"
    }
  },
  "icons": {
    "set": {
      "$type": "string",
      "$value": "lucide"
    }
  },
  "overrides": [
    {
      "token": "radius-control",
      "value": "0px",
      "reason": "Matches the reference: controls use square 0px corners"
    },
    {
      "token": "radius-field",
      "value": "0px",
      "reason": "Matches the reference: fields use square 0px corners"
    },
    {
      "token": "radius-menu",
      "value": "0px",
      "reason": "Matches the reference: menus use square 0px corners"
    },
    {
      "token": "field-border",
      "value": "underline",
      "reason": "Matches the reference: fields use a bottom border only"
    }
  ]
}
```