Design system kit

The kit renders a design system from data: its foundations in light and dark, its voice, every component it allows in each allowed variant, size and state, its own components and its approval record. Below is Ledgerline 2.3.0, a fictional example brand, locked to 3 of the 199 catalog components.

The kit is released in 0.16.0, with the locked design systems it shows. An approval it displays is declared in the document: the kit checks the content hash, but only a reviewed commit proves who approved. See the design systems hub for the example brands side by side, and the Design Systems Solution for the whole loop from brand inputs to locked prototypes.

Use it in your app

Pass the document, its compiled output (with the allow manifest) and the catalog. Library components arrive as snippets keyed by library id; components from packages above texuli arrive as sample snippets keyed by catalog id.

<script lang="ts">
  import { DesignSystemKit } from 'texuli/ds-kit';
  import catalog from './catalog/components.json'; // packages/spec/catalog/components.json
  import doc from './design-system.json';
  import compiled from './dist/compiled.json';      // texuli ds compile --format json
</script>

<DesignSystemKit document={doc} {compiled} allow={compiled.allowManifest} {catalog} />

Foundations

Color roles (113)

Token	Light	Dark
`--tx-accent`	`#e7efff`	`#172544`
`--tx-accent-active`	`#f7ffff`	`#030d29`
`--tx-accent-disabled`	`#f4f7fb`	`#11151e`
`--tx-accent-focus`	`#1d4ed8`	`#2558e2`
`--tx-accent-foreground`	`#111a2d`	`#e7efff`
`--tx-accent-hover`	`#f7ffff`	`#0c1936`
`--tx-background`	`#fafcff`	`#060b14`
`--tx-border`	`#d9e2ef`	`#2c333d`
`--tx-border-strong`	`#8b939f`	`#79818c`
`--tx-canvas`	`#eff6ff`	`#03060d`
`--tx-destructive`	`#cc2827`	`#ff645a`
`--tx-destructive-active`	`#a3000e`	`#ffa096`
`--tx-destructive-disabled`	`#e7b4ad`	`#5a332f`
`--tx-destructive-focus`	`#1d4ed8`	`#2558e2`
`--tx-destructive-foreground`	`#ffffff`	`#0a0a0a`
`--tx-destructive-hover`	`#ba0a15`	`#ff8579`
`--tx-destructive-soft`	`#fff2f0`	`#370404`
`--tx-destructive-soft-foreground`	`#540004`	`#ffc8c1`
`--tx-elevated`	`#f7ffff`	`#1c222b`
`--tx-elevated-foreground`	`#0a1628`	`#eff6ff`
`--tx-foreground`	`#0a1628`	`#eff6ff`
`--tx-info`	`#0871c1`	`#4ba3f7`
`--tx-info-active`	`#005493`	`#88c3ff`
`--tx-info-disabled`	`#acc4de`	`#2d4157`
`--tx-info-focus`	`#1d4ed8`	`#2558e2`
`--tx-info-foreground`	`#ffffff`	`#0a0a0a`
`--tx-info-hover`	`#0062ab`	`#67b3ff`
`--tx-info-soft`	`#eef6ff`	`#001b36`
`--tx-info-soft-foreground`	`#002a4e`	`#badbff`
`--tx-input`	`#7f8792`	`#6a727d`
`--tx-input-active`	`#626a74`	`#87909b`
`--tx-input-disabled`	`#c9cbcf`	`#2e3033`
`--tx-input-focus`	`#1d4ed8`	`#2558e2`
`--tx-input-hover`	`#707883`	`#78818c`
`--tx-link`	`#2655d3`	`#85acff`
`--tx-link-active`	`#0c34b1`	`#b6ceff`
`--tx-link-disabled`	`#a9bce4`	`#3a455a`
`--tx-link-focus`	`#1d4ed8`	`#2558e2`
`--tx-link-hover`	`#1945c2`	`#9dbdff`
`--tx-link-visited`	`#73348e`	`#da99fa`
`--tx-muted`	`#ecf4ff`	`#1c222b`
`--tx-muted-active`	`#f8ffff`	`#070b13`
`--tx-muted-disabled`	`#f6f9fc`	`#121416`
`--tx-muted-focus`	`#1d4ed8`	`#2558e2`
`--tx-muted-foreground`	`#55647a`	`#95a6be`
`--tx-muted-hover`	`#f8ffff`	`#11161f`
`--tx-overlay`	`rgb(9 9 11 / 0.5)`	`rgb(0 0 0 / 0.65)`
`--tx-primary`	`#1d4ed8`	`#4e83ff`
`--tx-primary-active`	`#052ab6`	`#7fa8ff`
`--tx-primary-disabled`	`#a6bbe5`	`#2a3857`
`--tx-primary-focus`	`#1d4ed8`	`#2558e2`
`--tx-primary-foreground`	`#ffffff`	`#0a0a0a`
`--tx-primary-hover`	`#103dc7`	`#6796ff`
`--tx-primary-soft`	`#f0f5ff`	`#07173f`
`--tx-primary-soft-foreground`	`#041c6c`	`#c4d8ff`
`--tx-ring`	`#1d4ed8`	`#2558e2`
`--tx-scrim`	`rgb(9 9 11 / 0.32)`	`rgb(0 0 0 / 0.5)`
`--tx-secondary`	`#cbf1ec`	`#123431`
`--tx-secondary-active`	`#e2ffff`	`#001b19`
`--tx-secondary-disabled`	`#ebf7f5`	`#121a19`
`--tx-secondary-focus`	`#1d4ed8`	`#2558e2`
`--tx-secondary-foreground`	`#00201d`	`#d2f8f3`
`--tx-secondary-hover`	`#e4fffb`	`#042725`
`--tx-selection`	`#c0d5ff`	`#2a4072`
`--tx-selection-foreground`	`#111a2d`	`#e7efff`
`--tx-sidebar`	`#f2f7ff`	`#0c121a`
`--tx-sidebar-border`	`#d9e2ef`	`#272e38`
`--tx-sidebar-foreground`	`#172537`	`#dae9ff`
`--tx-sidebar-primary`	`#1d4ed8`	`#4e83ff`
`--tx-sidebar-primary-active`	`#052ab6`	`#7fa8ff`
`--tx-sidebar-primary-disabled`	`#a6bbe5`	`#2a3857`
`--tx-sidebar-primary-focus`	`#1d4ed8`	`#2558e2`
`--tx-sidebar-primary-hover`	`#103dc7`	`#6796ff`
`--tx-status-danger`	`#cc2827`	`#ff645a`
`--tx-status-danger-foreground`	`#ffffff`	`#0a0a0a`
`--tx-status-danger-soft`	`#fff2f0`	`#370404`
`--tx-status-danger-soft-foreground`	`#540004`	`#ffc8c1`
`--tx-status-info`	`#0871c1`	`#4ba3f7`
`--tx-status-info-foreground`	`#ffffff`	`#0a0a0a`
`--tx-status-info-soft`	`#eef6ff`	`#001b36`
`--tx-status-info-soft-foreground`	`#002a4e`	`#badbff`
`--tx-status-neutral`	`#cbf1ec`	`#123431`
`--tx-status-neutral-foreground`	`#00201d`	`#d2f8f3`
`--tx-status-neutral-soft`	`#ecf4ff`	`#1c222b`
`--tx-status-neutral-soft-foreground`	`#55647a`	`#95a6be`
`--tx-status-success`	`#007f38`	`#43b966`
`--tx-status-success-foreground`	`#ffffff`	`#0a0a0a`
`--tx-status-success-soft`	`#dfffe4`	`#00220a`
`--tx-status-success-soft-foreground`	`#003312`	`#9ceead`
`--tx-status-warning`	`#916600`	`#cd9200`
`--tx-status-warning-foreground`	`#ffffff`	`#0a0a0a`
`--tx-status-warning-soft`	`#fff4e1`	`#261800`
`--tx-status-warning-soft-foreground`	`#382500`	`#ffcf7d`
`--tx-subtle`	`#e1eaf7`	`#272e38`
`--tx-subtle-foreground`	`#3f4e63`	`#aebfd8`
`--tx-success`	`#007f38`	`#43b966`
`--tx-success-active`	`#005e28`	`#67da85`
`--tx-success-disabled`	`#acc7b0`	`#2d4732`
`--tx-success-focus`	`#1d4ed8`	`#2558e2`
`--tx-success-foreground`	`#ffffff`	`#0a0a0a`
`--tx-success-hover`	`#006e30`	`#55c975`
`--tx-success-soft`	`#dfffe4`	`#00220a`
`--tx-success-soft-foreground`	`#003312`	`#9ceead`
`--tx-surface`	`#f7ffff`	`#10161f`
`--tx-surface-foreground`	`#0a1628`	`#eff6ff`
`--tx-warning`	`#916600`	`#cd9200`
`--tx-warning-active`	`#6d4c00`	`#eeb23d`
`--tx-warning-disabled`	`#cdbfa9`	`#4c3d24`
`--tx-warning-focus`	`#1d4ed8`	`#2558e2`
`--tx-warning-foreground`	`#ffffff`	`#0a0a0a`
`--tx-warning-hover`	`#7f5900`	`#dea227`
`--tx-warning-soft`	`#fff4e1`	`#261800`
`--tx-warning-soft-foreground`	`#382500`	`#ffcf7d`

Data visualization (36)

Token	Light	Dark
`--tx-chart-1`	`#4974d8`	`#76a2ff`
`--tx-chart-1-foreground`	`#0a0a0a`	`#0a0a0a`
`--tx-chart-2`	`#965bc0`	`#b57ae1`
`--tx-chart-2-foreground`	`#ffffff`	`#0a0a0a`
`--tx-chart-3`	`#bf4a80`	`#ef75ab`
`--tx-chart-3-foreground`	`#ffffff`	`#0a0a0a`
`--tx-chart-4`	`#9b7300`	`#d09b00`
`--tx-chart-4-foreground`	`#0a0a0a`	`#0a0a0a`
`--tx-chart-5`	`#00826b`	`#00b292`
`--tx-chart-5-foreground`	`#ffffff`	`#0a0a0a`
`--tx-chart-6`	`#6d9d2d`	`#ff9975`
`--tx-chart-6-foreground`	`#0a0a0a`	`#0a0a0a`
`--tx-chart-7`	`#008fad`	`#00bee5`
`--tx-chart-7-foreground`	`#0a0a0a`	`#0a0a0a`
`--tx-chart-8`	`#e17148`	`#8bbd50`
`--tx-chart-8-foreground`	`#0a0a0a`	`#0a0a0a`
`--tx-chart-axis`	`#55647a`	`#95a6be`
`--tx-chart-diverging-1`	`#c74b43`	`#c8584f`
`--tx-chart-diverging-2`	`#d7766c`	`#a25048`
`--tx-chart-diverging-3`	`#e49e95`	`#7e4640`
`--tx-chart-diverging-4`	`#eec5bf`	`#5a3c38`
`--tx-chart-diverging-5`	`#ebeff5`	`#303338`
`--tx-chart-diverging-6`	`#c1d0f0`	`#39455d`
`--tx-chart-diverging-7`	`#97b2e9`	`#425783`
`--tx-chart-diverging-8`	`#7094e1`	`#4a6aac`
`--tx-chart-diverging-9`	`#4974d7`	`#537cd6`
`--tx-chart-grid`	`#d9e2ef`	`#2c333d`
`--tx-chart-sequential-1`	`#ebf2ff`	`#272e3b`
`--tx-chart-sequential-2`	`#d4e2ff`	`#2c374c`
`--tx-chart-sequential-3`	`#bed3fc`	`#31405e`
`--tx-chart-sequential-4`	`#aac3f7`	`#364970`
`--tx-chart-sequential-5`	`#96b4f1`	`#3b5383`
`--tx-chart-sequential-6`	`#82a4eb`	`#415c96`
`--tx-chart-sequential-7`	`#6f94e5`	`#4666aa`
`--tx-chart-sequential-8`	`#5c84de`	`#4b6fbe`
`--tx-chart-sequential-9`	`#4974d8`	`#5079d2`

Typography (57)

body The quick brown fox jumps over the lazy dog
caption The quick brown fox jumps over the lazy dog
code The quick brown fox jumps over the lazy dog
display The quick brown fox jumps over the lazy dog
heading The quick brown fox jumps over the lazy dog
label The quick brown fox jumps over the lazy dog
title The quick brown fox jumps over the lazy dog

Token	Light	Dark
`--tx-font-heading`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-font-mono`	`"IBM Plex Mono", ui-monospace, monospace`	`"IBM Plex Mono", ui-monospace, monospace`
`--tx-font-sans`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-font-size-2xl`	`1.2458rem`	`1.2458rem`
`--tx-font-size-3xl`	`1.4016rem`	`1.4016rem`
`--tx-font-size-4xl`	`1.5768rem`	`1.5768rem`
`--tx-font-size-5xl`	`1.7739rem`	`1.7739rem`
`--tx-font-size-6xl`	`1.9956rem`	`1.9956rem`
`--tx-font-size-7xl`	`2.2451rem`	`2.2451rem`
`--tx-font-size-8xl`	`2.5257rem`	`2.5257rem`
`--tx-font-size-9xl`	`2.8414rem`	`2.8414rem`
`--tx-font-size-base`	`0.875rem`	`0.875rem`
`--tx-font-size-lg`	`0.9844rem`	`0.9844rem`
`--tx-font-size-sm`	`0.7778rem`	`0.7778rem`
`--tx-font-size-xl`	`1.1074rem`	`1.1074rem`
`--tx-font-size-xs`	`0.6913rem`	`0.6913rem`
`--tx-font-weight-body`	`400`	`400`
`--tx-font-weight-bold`	`700`	`700`
`--tx-font-weight-heading`	`600`	`600`
`--tx-font-weight-medium`	`500`	`500`
`--tx-letter-spacing-body`	`0`	`0`
`--tx-letter-spacing-heading`	`0`	`0`
`--tx-type-body-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-body-line`	`1.5`	`1.5`
`--tx-type-body-size`	`0.875rem`	`0.875rem`
`--tx-type-body-tracking`	`0`	`0`
`--tx-type-body-weight`	`400`	`400`
`--tx-type-caption-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-caption-line`	`1.35`	`1.35`
`--tx-type-caption-size`	`0.6913rem`	`0.6913rem`
`--tx-type-caption-tracking`	`0`	`0`
`--tx-type-caption-weight`	`400`	`400`
`--tx-type-code-family`	`"IBM Plex Mono", ui-monospace, monospace`	`"IBM Plex Mono", ui-monospace, monospace`
`--tx-type-code-line`	`1.5`	`1.5`
`--tx-type-code-size`	`0.875em`	`0.875em`
`--tx-type-code-tracking`	`0`	`0`
`--tx-type-code-weight`	`400`	`400`
`--tx-type-display-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-display-line`	`1.1`	`1.1`
`--tx-type-display-size`	`1.5768rem`	`1.5768rem`
`--tx-type-display-tracking`	`0`	`0`
`--tx-type-display-weight`	`700`	`700`
`--tx-type-heading-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-heading-line`	`1.3`	`1.3`
`--tx-type-heading-size`	`0.9844rem`	`0.9844rem`
`--tx-type-heading-tracking`	`0`	`0`
`--tx-type-heading-weight`	`600`	`600`
`--tx-type-label-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-label-line`	`1.25`	`1.25`
`--tx-type-label-size`	`0.7778rem`	`0.7778rem`
`--tx-type-label-tracking`	`0`	`0`
`--tx-type-label-weight`	`500`	`500`
`--tx-type-title-family`	`"IBM Plex Sans", system-ui, sans-serif`	`"IBM Plex Sans", system-ui, sans-serif`
`--tx-type-title-line`	`1.2`	`1.2`
`--tx-type-title-size`	`1.2458rem`	`1.2458rem`
`--tx-type-title-tracking`	`0`	`0`
`--tx-type-title-weight`	`600`	`600`

Spacing (14)

Token	Light	Dark
`--tx-space-0`	`0px`	`0px`
`--tx-space-1`	`0.2188rem`	`0.2188rem`
`--tx-space-2`	`0.4375rem`	`0.4375rem`
`--tx-space-3`	`0.6563rem`	`0.6563rem`
`--tx-space-4`	`0.875rem`	`0.875rem`
`--tx-space-5`	`1.0938rem`	`1.0938rem`
`--tx-space-6`	`1.3125rem`	`1.3125rem`
`--tx-space-7`	`1.5313rem`	`1.5313rem`
`--tx-space-8`	`1.75rem`	`1.75rem`
`--tx-space-9`	`1.9688rem`	`1.9688rem`
`--tx-space-10`	`2.1875rem`	`2.1875rem`
`--tx-space-11`	`2.4063rem`	`2.4063rem`
`--tx-space-12`	`2.625rem`	`2.625rem`
`--tx-space-unit`	`0.2188rem`	`0.2188rem`

Radius (12)

Token	Light	Dark
`--tx-radius`	`0.25rem`	`0.25rem`
`--tx-radius-scale`	`0.5`	`0.5`
`--tx-radius-step-2`	`1px`	`1px`
`--tx-radius-step-4`	`2px`	`2px`
`--tx-radius-step-6`	`3px`	`3px`
`--tx-shape-radius-full`	`9999px`	`9999px`
`--tx-shape-radius-lg`	`0.25rem`	`0.25rem`
`--tx-shape-radius-md`	`max(0px, 0.25rem - 1px)`	`max(0px, 0.25rem - 1px)`
`--tx-shape-radius-none`	`0px`	`0px`
`--tx-shape-radius-sm`	`max(0px, 0.25rem - 2px)`	`max(0px, 0.25rem - 2px)`
`--tx-shape-radius-xl`	`calc(0.25rem + 2px)`	`calc(0.25rem + 2px)`
`--tx-shape-radius-xs`	`max(0px, 0.25rem - 3px)`	`max(0px, 0.25rem - 3px)`

Elevation and shadow (10)

Token	Light	Dark
`--tx-elevation-0`	`none`	`none`
`--tx-elevation-1`	`0 1px 2px 0 rgb(15 23 42 / 0.1)`	`0 1px 2px 0 rgb(0 0 0 / 0.5)`
`--tx-elevation-2`	`0 1px 2px 0 rgb(15 23 42 / 0.1)`	`0 1px 2px 0 rgb(0 0 0 / 0.5)`
`--tx-elevation-3`	`0 4px 8px -2px rgb(15 23 42 / 0.1)`	`0 4px 8px -2px rgb(0 0 0 / 0.5)`
`--tx-elevation-4`	`0 4px 8px -2px rgb(15 23 42 / 0.1)`	`0 4px 8px -2px rgb(0 0 0 / 0.5)`
`--tx-elevation-5`	`0 4px 8px -2px rgb(15 23 42 / 0.1)`	`0 4px 8px -2px rgb(0 0 0 / 0.5)`
`--tx-elevation-style`	`crisp`	`crisp`
`--tx-shadow`	`rgb(15 23 42 / 0.1)`	`rgb(0 0 0 / 0.5)`
`--tx-shadow-float`	`0 4px 8px -2px rgb(15 23 42 / 0.1)`	`0 4px 8px -2px rgb(0 0 0 / 0.5)`
`--tx-shadow-soft`	`0 1px 2px 0 rgb(15 23 42 / 0.1)`	`0 1px 2px 0 rgb(0 0 0 / 0.5)`

Motion (18)

Token	Light	Dark
`--tx-motion`	`1`	`1`
`--tx-motion-base`	`150ms`	`150ms`
`--tx-motion-ease-emphasized`	`cubic-bezier(0.2, 0, 0, 1)`	`cubic-bezier(0.2, 0, 0, 1)`
`--tx-motion-ease-enter`	`cubic-bezier(0, 0, 0.2, 1)`	`cubic-bezier(0, 0, 0.2, 1)`
`--tx-motion-ease-exit`	`cubic-bezier(0.4, 0, 1, 1)`	`cubic-bezier(0.4, 0, 1, 1)`
`--tx-motion-ease-linear`	`linear`	`linear`
`--tx-motion-ease-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
`--tx-motion-easing`	`ease-out`	`ease-out`
`--tx-motion-fast`	`100ms`	`100ms`
`--tx-motion-instant`	`0ms`	`0ms`
`--tx-motion-slow`	`200ms`	`200ms`
`--tx-motion-slower`	`333ms`	`333ms`
`--tx-motion-spring-bouncy`	`linear(0, 0.1177, 0.3817, 0.6779, 0.9294, 1.0989, 1.1811, 1.1921, 1.1571, 1.1015, 1.0453, 1.001, 0.9737, 0.9627, 0.964, 0.9727, 0.9839, 0.9943, 1.0019, 1.0061, 1.0074, 1.0066, 1.0046, 1.0024, 1.0006, 0.9993, 0.9987, 0.9986, 0.9988, 0.9992, 0.9997, 1)`	`linear(0, 0.1177, 0.3817, 0.6779, 0.9294, 1.0989, 1.1811, 1.1921, 1.1571, 1.1015, 1.0453, 1.001, 0.9737, 0.9627, 0.964, 0.9727, 0.9839, 0.9943, 1.0019, 1.0061, 1.0074, 1.0066, 1.0046, 1.0024, 1.0006, 0.9993, 0.9987, 0.9986, 0.9988, 0.9992, 0.9997, 1)`
`--tx-motion-spring-bouncy-duration`	`844ms`	`844ms`
`--tx-motion-spring-gentle`	`linear(0, 0.0228, 0.0795, 0.1561, 0.2426, 0.3318, 0.419, 0.5013, 0.5767, 0.6444, 0.7041, 0.7561, 0.8007, 0.8386, 0.8704, 0.8969, 0.9187, 0.9365, 0.951, 0.9626, 0.9718, 0.9791, 0.9848, 0.9892, 0.9925, 0.9951, 0.9969, 0.9983, 0.9993, 0.9999, 1.0004, 1)`	`linear(0, 0.0228, 0.0795, 0.1561, 0.2426, 0.3318, 0.419, 0.5013, 0.5767, 0.6444, 0.7041, 0.7561, 0.8007, 0.8386, 0.8704, 0.8969, 0.9187, 0.9365, 0.951, 0.9626, 0.9718, 0.9791, 0.9848, 0.9892, 0.9925, 0.9951, 0.9969, 0.9983, 0.9993, 0.9999, 1.0004, 1)`
`--tx-motion-spring-gentle-duration`	`648ms`	`648ms`
`--tx-motion-spring-snappy`	`linear(0, 0.0368, 0.1267, 0.2447, 0.3726, 0.4983, 0.6137, 0.7148, 0.7995, 0.8679, 0.9212, 0.9609, 0.9892, 1.0082, 1.0199, 1.0261, 1.0283, 1.0278, 1.0255, 1.0223, 1.0187, 1.0151, 1.0117, 1.0088, 1.0062, 1.0042, 1.0026, 1.0014, 1.0005, 0.9999, 0.9995, 1)`	`linear(0, 0.0368, 0.1267, 0.2447, 0.3726, 0.4983, 0.6137, 0.7148, 0.7995, 0.8679, 0.9212, 0.9609, 0.9892, 1.0082, 1.0199, 1.0261, 1.0283, 1.0278, 1.0255, 1.0223, 1.0187, 1.0151, 1.0117, 1.0088, 1.0062, 1.0042, 1.0026, 1.0014, 1.0005, 0.9999, 0.9995, 1)`
`--tx-motion-spring-snappy-duration`	`453ms`	`453ms`

Other tokens (49)

Token	Light	Dark
`--tx-border-width`	`1px`	`1px`
`--tx-border-width-thick`	`calc(1px * 2)`	`calc(1px * 2)`
`--tx-border-width-thin`	`1px`	`1px`
`--tx-density`	`0.875`	`0.875`
`--tx-focus-ring-offset`	`2px`	`2px`
`--tx-focus-ring-style`	`ring`	`ring`
`--tx-focus-ring-width`	`2px`	`2px`
`--tx-glass-blur`	`16px`	`16px`
`--tx-glass-opacity`	`82%`	`82%`
`--tx-icon-stroke`	`2`	`2`
`--tx-icon-style`	`outline`	`outline`
`--tx-layout-breakpoint-lg`	`72rem`	`72rem`
`--tx-layout-breakpoint-md`	`56rem`	`56rem`
`--tx-layout-breakpoint-sm`	`36rem`	`36rem`
`--tx-layout-content-max`	`72ch`	`72ch`
`--tx-layout-full-max`	`100%`	`100%`
`--tx-layout-grid-columns-base`	`1`	`1`
`--tx-layout-grid-columns-lg`	`4`	`4`
`--tx-layout-grid-columns-md`	`3`	`3`
`--tx-layout-grid-columns-sm`	`2`	`2`
`--tx-layout-grid-gutter-base`	`0.875rem`	`0.875rem`
`--tx-layout-grid-gutter-lg`	`0.875rem`	`0.875rem`
`--tx-layout-grid-gutter-md`	`0.875rem`	`0.875rem`
`--tx-layout-grid-gutter-sm`	`0.875rem`	`0.875rem`
`--tx-layout-wide-max`	`80rem`	`80rem`
`--tx-opacity-disabled`	`0.5`	`0.5`
`--tx-opacity-muted`	`0.7`	`0.7`
`--tx-opacity-scrim`	`45%`	`45%`
`--tx-size-control-lg`	`2.75rem`	`2.75rem`
`--tx-size-control-md`	`2.25rem`	`2.25rem`
`--tx-size-control-sm`	`2rem`	`2rem`
`--tx-size-control-xs`	`1.75rem`	`1.75rem`
`--tx-size-icon-lg`	`1.5rem`	`1.5rem`
`--tx-size-icon-md`	`1.25rem`	`1.25rem`
`--tx-size-icon-sm`	`1rem`	`1rem`
`--tx-size-icon-xs`	`0.75rem`	`0.75rem`
`--tx-size-target-min`	`24px`	`24px`
`--tx-size-target-touch`	`max(2.75rem, 44px)`	`max(2.75rem, 44px)`
`--tx-surface-glass-alpha`	`82%`	`82%`
`--tx-surface-glass-blur`	`16px`	`16px`
`--tx-surface-style`	`solid`	`solid`
`--tx-z-base`	`0`	`0`
`--tx-z-modal`	`60`	`60`
`--tx-z-overlay`	`60`	`60`
`--tx-z-popover`	`50`	`50`
`--tx-z-sticky`	`40`	`40`
`--tx-z-toast`	`60`	`60`
`--tx-z-tooltip`	`50`	`50`
`--tx-z-top`	`70`	`70`

Contrast

Target: AA contrast, controls at least 24 px.

Light
Foreground	Background	Ratio	Result
`--tx-foreground`	`--tx-canvas`	16.65:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-background`	17.64:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-surface`	17.87:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-elevated`	17.87:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-muted`	16.36:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-subtle`	14.94:1 (needs 4.5:1, text)	Pass
`--tx-surface-foreground`	`--tx-surface`	17.87:1 (needs 4.5:1, text)	Pass
`--tx-elevated-foreground`	`--tx-elevated`	17.87:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-background`	5.85:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-surface`	5.93:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-muted`	5.42:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-elevated`	5.93:1 (needs 4.5:1, text)	Pass
`--tx-subtle-foreground`	`--tx-background`	8.23:1 (needs 4.5:1, text)	Pass
`--tx-subtle-foreground`	`--tx-subtle`	6.97:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary`	6.7:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary-hover`	8.35:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary-active`	10.43:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary`	6.7:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary-hover`	8.35:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary-active`	10.43:1 (needs 4.5:1, text)	Pass
`--tx-primary-soft-foreground`	`--tx-primary-soft`	13.84:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-primary-soft`	16.58:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary`	14.15:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary-hover`	16.33:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary-active`	16.32:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent`	15.03:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent-hover`	17.11:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent-active`	17.11:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive`	5.38:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive-hover`	6.68:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive-active`	8.19:1 (needs 4.5:1, text)	Pass
`--tx-destructive-soft-foreground`	`--tx-destructive-soft`	13.93:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-destructive-soft`	16.58:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success`	5.13:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success-hover`	6.41:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success-active`	7.97:1 (needs 4.5:1, text)	Pass
`--tx-success-soft-foreground`	`--tx-success-soft`	13.19:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-success-soft`	16.88:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning`	5.11:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning-hover`	6.3:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning-active`	7.82:1 (needs 4.5:1, text)	Pass
`--tx-warning-soft-foreground`	`--tx-warning-soft`	13.45:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-warning-soft`	16.64:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info`	5.06:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info-hover`	6.29:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info-active`	7.8:1 (needs 4.5:1, text)	Pass
`--tx-info-soft-foreground`	`--tx-info-soft`	13.36:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-info-soft`	16.62:1 (needs 4.5:1, text)	Pass
`--tx-sidebar-foreground`	`--tx-sidebar`	14.39:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-background`	6.14:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-surface`	6.23:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-muted`	5.7:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-elevated`	6.23:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-background`	7.82:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-surface`	7.92:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-muted`	7.25:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-elevated`	7.92:1 (needs 4.5:1, text)	Pass
`--tx-selection-foreground`	`--tx-selection`	11.74:1 (needs 4.5:1, text)	Pass
`--tx-border-strong`	`--tx-background`	3.01:1 (needs 3:1, ui)	Pass
`--tx-border-strong`	`--tx-surface`	3.05:1 (needs 3:1, ui)	Pass
`--tx-input`	`--tx-background`	3.53:1 (needs 3:1, ui)	Pass
`--tx-input`	`--tx-surface`	3.57:1 (needs 3:1, ui)	Pass
`--tx-ring`	`--tx-background`	6.52:1 (needs 3:1, focus)	Pass
`--tx-ring`	`--tx-surface`	6.6:1 (needs 3:1, focus)	Pass
`--tx-status-success-foreground`	`--tx-status-success`	5.13:1 (needs 4.5:1, text)	Pass
`--tx-status-success-soft-foreground`	`--tx-status-success-soft`	13.19:1 (needs 4.5:1, text)	Pass
`--tx-status-warning-foreground`	`--tx-status-warning`	5.11:1 (needs 4.5:1, text)	Pass
`--tx-status-warning-soft-foreground`	`--tx-status-warning-soft`	13.45:1 (needs 4.5:1, text)	Pass
`--tx-status-danger-foreground`	`--tx-status-danger`	5.38:1 (needs 4.5:1, text)	Pass
`--tx-status-danger-soft-foreground`	`--tx-status-danger-soft`	13.93:1 (needs 4.5:1, text)	Pass
`--tx-status-info-foreground`	`--tx-status-info`	5.06:1 (needs 4.5:1, text)	Pass
`--tx-status-info-soft-foreground`	`--tx-status-info-soft`	13.36:1 (needs 4.5:1, text)	Pass
`--tx-status-neutral-foreground`	`--tx-status-neutral`	14.15:1 (needs 4.5:1, text)	Pass
`--tx-status-neutral-soft-foreground`	`--tx-status-neutral-soft`	5.42:1 (needs 4.5:1, text)	Pass

Dark
Foreground	Background	Ratio	Result
`--tx-foreground`	`--tx-canvas`	18.63:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-background`	18.1:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-surface`	16.68:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-elevated`	14.69:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-muted`	14.69:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-subtle`	12.57:1 (needs 4.5:1, text)	Pass
`--tx-surface-foreground`	`--tx-surface`	16.68:1 (needs 4.5:1, text)	Pass
`--tx-elevated-foreground`	`--tx-elevated`	14.69:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-background`	7.95:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-surface`	7.32:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-muted`	6.45:1 (needs 4.5:1, text)	Pass
`--tx-muted-foreground`	`--tx-elevated`	6.45:1 (needs 4.5:1, text)	Pass
`--tx-subtle-foreground`	`--tx-background`	10.55:1 (needs 4.5:1, text)	Pass
`--tx-subtle-foreground`	`--tx-subtle`	7.32:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary`	5.67:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary-hover`	6.96:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-primary-active`	8.43:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary`	5.67:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary-hover`	6.96:1 (needs 4.5:1, text)	Pass
`--tx-primary-foreground`	`--tx-sidebar-primary-active`	8.43:1 (needs 4.5:1, text)	Pass
`--tx-primary-soft-foreground`	`--tx-primary-soft`	12.14:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-primary-soft`	16.03:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary`	11.82:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary-hover`	13.96:1 (needs 4.5:1, text)	Pass
`--tx-secondary-foreground`	`--tx-secondary-active`	15.76:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent`	13.13:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent-hover`	15.05:1 (needs 4.5:1, text)	Pass
`--tx-accent-foreground`	`--tx-accent-active`	16.63:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive`	6.8:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive-hover`	8.37:1 (needs 4.5:1, text)	Pass
`--tx-destructive-foreground`	`--tx-destructive-active`	10.1:1 (needs 4.5:1, text)	Pass
`--tx-destructive-soft-foreground`	`--tx-destructive-soft`	12.08:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-destructive-soft`	16.33:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success`	7.89:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success-hover`	9.42:1 (needs 4.5:1, text)	Pass
`--tx-success-foreground`	`--tx-success-active`	11.26:1 (needs 4.5:1, text)	Pass
`--tx-success-soft-foreground`	`--tx-success-soft`	12.36:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-success-soft`	15.64:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning`	7.26:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning-hover`	8.77:1 (needs 4.5:1, text)	Pass
`--tx-warning-foreground`	`--tx-warning-active`	10.43:1 (needs 4.5:1, text)	Pass
`--tx-warning-soft-foreground`	`--tx-warning-soft`	11.93:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-warning-soft`	15.9:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info`	7.43:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info-hover`	8.92:1 (needs 4.5:1, text)	Pass
`--tx-info-foreground`	`--tx-info-active`	10.65:1 (needs 4.5:1, text)	Pass
`--tx-info-soft-foreground`	`--tx-info-soft`	12.11:1 (needs 4.5:1, text)	Pass
`--tx-foreground`	`--tx-info-soft`	15.94:1 (needs 4.5:1, text)	Pass
`--tx-sidebar-foreground`	`--tx-sidebar`	15.29:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-background`	8.76:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-surface`	8.07:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-muted`	7.11:1 (needs 4.5:1, text)	Pass
`--tx-link`	`--tx-elevated`	7.11:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-background`	9.3:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-surface`	8.57:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-muted`	7.55:1 (needs 4.5:1, text)	Pass
`--tx-link-visited`	`--tx-elevated`	7.55:1 (needs 4.5:1, text)	Pass
`--tx-selection-foreground`	`--tx-selection`	8.76:1 (needs 4.5:1, text)	Pass
`--tx-border-strong`	`--tx-background`	5:1 (needs 3:1, ui)	Pass
`--tx-border-strong`	`--tx-surface`	4.6:1 (needs 3:1, ui)	Pass
`--tx-input`	`--tx-background`	4.04:1 (needs 3:1, ui)	Pass
`--tx-input`	`--tx-surface`	3.73:1 (needs 3:1, ui)	Pass
`--tx-ring`	`--tx-background`	3.35:1 (needs 3:1, focus)	Pass
`--tx-ring`	`--tx-surface`	3.08:1 (needs 3:1, focus)	Pass
`--tx-status-success-foreground`	`--tx-status-success`	7.89:1 (needs 4.5:1, text)	Pass
`--tx-status-success-soft-foreground`	`--tx-status-success-soft`	12.36:1 (needs 4.5:1, text)	Pass
`--tx-status-warning-foreground`	`--tx-status-warning`	7.26:1 (needs 4.5:1, text)	Pass
`--tx-status-warning-soft-foreground`	`--tx-status-warning-soft`	11.93:1 (needs 4.5:1, text)	Pass
`--tx-status-danger-foreground`	`--tx-status-danger`	6.8:1 (needs 4.5:1, text)	Pass
`--tx-status-danger-soft-foreground`	`--tx-status-danger-soft`	12.08:1 (needs 4.5:1, text)	Pass
`--tx-status-info-foreground`	`--tx-status-info`	7.43:1 (needs 4.5:1, text)	Pass
`--tx-status-info-soft-foreground`	`--tx-status-info-soft`	12.11:1 (needs 4.5:1, text)	Pass
`--tx-status-neutral-foreground`	`--tx-status-neutral`	11.82:1 (needs 4.5:1, text)	Pass
`--tx-status-neutral-soft-foreground`	`--tx-status-neutral-soft`	6.45:1 (needs 4.5:1, text)	Pass

--tx-size-control-xs: 28 px (needs 24 px), Pass
--tx-size-control-sm: 32 px (needs 24 px), Pass
--tx-size-control-md: 36 px (needs 24 px), Pass
--tx-size-control-lg: 44 px (needs 24 px), Pass

Voice and rules

Identity

Name: Ledgerline
Description: A fictional finance back office: dense tables, crisp edges and a high-contrast variant for long sessions.
Owner: Ledgerline Platform (fictional)
License: MIT
Tags: enterprise, dense, example

Tone

precise
neutral

Lexicon

Term	Preferred
workspace	ledger

Guidelines

Lead with the number.
Name the period every figure covers.

Accessibility

Contrast: AA
Minimum target: 24
Focus: ring

Locked-mode rules

Locked · 3 components allowed

draft

In locked mode, layout utilities only, on the token scale: display, flex, grid, gap, padding, margin, size, position and overflow. Color, typography, radius, shadow, opacity, filters, transforms, transitions and arbitrary values are not allowed. The checker owns the exact list.

Components

3 components allowed by this design system.

forms (1)

Button `button`

Light

Variant / size	sm	md	lg	icon
default	default · sm · default	default · md · default	default · lg · default	default · icon · default
secondary	secondary · sm · default	secondary · md · default	secondary · lg · default	secondary · icon · default
outline	outline · sm · default	outline · md · default	outline · lg · default	outline · icon · default
ghost	ghost · sm · default	ghost · md · default	ghost · lg · default	ghost · icon · default
destructive	destructive · sm · default	destructive · md · default	destructive · lg · default	destructive · icon · default
link	link · sm · default	link · md · default	link · lg · default	link · icon · default

default · md · default · disabled

default · md · default · loading

default · md · destructive

default · md · success

default · md · warning

default · md · default

Hover, focus or press this sample (hover, focus-visible)

Dark

Variant / size	sm	md	lg	icon
default	default · sm · default	default · md · default	default · lg · default	default · icon · default
secondary	secondary · sm · default	secondary · md · default	secondary · lg · default	secondary · icon · default
outline	outline · sm · default	outline · md · default	outline · lg · default	outline · icon · default
ghost	ghost · sm · default	ghost · md · default	ghost · lg · default	ghost · icon · default
destructive	destructive · sm · default	destructive · md · default	destructive · lg · default	destructive · icon · default
link	link · sm · default	link · md · default	link · lg · default	link · icon · default

default · md · default · disabled

default · md · default · loading

default · md · destructive

default · md · success

default · md · warning

default · md · default

Hover, focus or press this sample (hover, focus-visible)

display (1)

Card `card`

Light

elevated

flat

elevated

Hover, focus or press this sample (hover, focus-visible)

Dark

elevated

flat

elevated

Hover, focus or press this sample (hover, focus-visible)

forms (1)

Input `input`

Light

Variant / size	control	xs	sm	md	lg	xl	2xl	3xl	4xl	display
default	default · control	default · xs	default · sm	default · md	default · lg	default · xl	default · 2xl	default · 3xl	default · 4xl	default · display
plain	plain · control	plain · xs	plain · sm	plain · md	plain · lg	plain · xl	plain · 2xl	plain · 3xl	plain · 4xl	plain · display

default · control · disabled

default · control · invalid

default · control · readonly

default · control

Hover, focus or press this sample (hover, focus-visible)

Dark

Variant / size	control	xs	sm	md	lg	xl	2xl	3xl	4xl	display
default	default · control	default · xs	default · sm	default · md	default · lg	default · xl	default · 2xl	default · 3xl	default · 4xl	default · display
plain	plain · control	plain · xs	plain · sm	plain · md	plain · lg	plain · xl	plain · 2xl	plain · 3xl	plain · 4xl	plain · display

default · control · disabled

default · control · invalid

default · control · readonly

default · control

Hover, focus or press this sample (hover, focus-visible)

Not in this design system (196)

accordion
action-form
alert
alert-dialog
analytics-grid
app-nav
avatar
avatar-group-grid
badge
banner
blocks-code
blocks-data
blocks-diagram
blocks-embed
blocks-interactive
blocks-map
blocks-media
blocks-structure
blocks-text
bottom-nav
box
breadcrumb
button-group
callout
canvas
carousel
charts-area
charts-bar
charts-bubble
charts-bullet
charts-canvas-renderer
charts-cartesian
charts-combo
charts-donut
charts-funnel
charts-gauge
charts-geo-map
charts-geo-point-map
charts-heatmap
charts-line
charts-network
charts-pie
charts-progress-ring
charts-sankey
charts-scatter
charts-sparkline
charts-stacked-bar
charts-sunburst
charts-treemap
chat-message
chat-thread
checkbox
chip
code
code-field
color-swatch
combobox
command-palette
composer
content-layout
context-menu
context-menu-trigger
control-choice
control-filter
control-slider
control-toggle
data-board
data-calendar
data-cohort-table
data-dashboard
data-dashboard-widget
data-files
data-filter-builder
data-grid
data-map
data-notification-inbox
data-timeline
data-tree-view
data-virtual-list
deck-slide
description
detail-panel
dialog
document
drawer
dropdown-menu
dropdown-menu-content
dropdown-menu-item
dropdown-menu-trigger
empty-state
error-state
field
field-error
file-upload
flow-action
flow-view
form
form-field
form-submit
heading
host-region
hover-card
hover-card-content
icon
icon-button
inline-text
input-group
kbd
kpi
label
layout-auth-split
layout-blog
layout-card
layout-chrome
layout-dashboard-grid
layout-deck
layout-doc
layout-docs
layout-drawer
layout-dual-sidebar
layout-editorial
layout-grid
layout-host
layout-landing
layout-marketing
layout-page
layout-pricing
layout-row
layout-settings
layout-sidebar
layout-split
layout-stack
layout-tile
layout-top-nav
layout-wizard
link
list
list-item
mark
media-composition-canvas
media-composition-svg
media-image
menubar
menubar-trigger
mobile-app-frame
mobile-header
multi-select
nav-icon
navigation-menu
number-field
pagination
pin-input
popover
popover-content
progress
prose
radio
radio-group
rating
responsive-modal
schema-form
screen-outlet
select
select-content
select-group
select-item
select-label
select-portal
select-separator
select-trigger
select-value
select-viewport
separator
sheet
sidebar
skeleton
sortable-list
spinner
split-view
spreadsheet
stat
stepper
switch
table
tabs
tag
tags-input
text
text-counter
textarea
time-field
timeline
toaster
toggle-group
tooltip
workflow-graph

Library

KPI strip0.1.0

Not approved

Id

kpi-strip

Purpose

A row of figures for the day's ledger.

Status

draft

Composes

card (allowed)
button (allowed)

Preview supplied by the consumer: the code lives in the consumer design-systems folder.

Use it in your app

Foundations

Color roles (113)

Data visualization (36)

Typography (57)

Spacing (14)

Radius (12)

Elevation and shadow (10)

Motion (18)

Other tokens (49)

Contrast

Voice and rules

Identity

Tone

Lexicon

Guidelines

Accessibility

Locked-mode rules

Components

Button button

Card card

Input input

Not in this design system (196)

Library

KPI strip0.1.0

Button `button`

Card `card`

Input `input`