Tokens

Every design token in @etched/monet/tokens.css. Components use semantic tokens only; apps change looks by setting these, after the file.

Each color is light-dark(light, dark), so color-scheme picks the mode. Light is the default. Set data-mode="dark" or data-mode="system" (the OS setting) on <html>, or on an element for its subtree; data-mode="light" sets light again. Popups in a portal follow <html>, or the element that their container names. Color samples show light, then dark.

Type

--et-font-sans: "Sohne", "Sohne Fallback", ui-sans-serif, system-ui, sans-serif
--et-weight-regular: 400Buch: everything except the cases below
--et-weight-strong: 500Kräftig: headings, labels, selected states

Space, radius, motion

--et-space-0-5: 2px
--et-space-1: 4px
--et-space-1-5: 6px
--et-space-2: 8px
--et-space-2-5: 10px
--et-space-3: 12px
--et-space-4: 16px
--et-space-5: 20px
--et-space-6: 24px
--et-space-8: 32px
--et-space-10: 40px
--et-space-12: 48px
--et-radius-sm: 4px
--et-radius-md: 6px
--et-radius-lg: 8px
--et-radius-xl: 12px
--et-radius-full: 9999px
--et-duration-fast: 120ms
--et-duration-base: 160ms
--et-ease: cubic-bezier(0.2, 0, 0, 1)
--et-spin: 800msone turn of a busy spinner: Button, Toast, Switch
--et-loader-spin: 2sone turn of Loader's spinner (Kumo)
--et-loader-pulse: 1.5sone pass of Loader's growing arc and of the skeleton shimmer (Kumo)
--et-meter-slide: 1.5sone pass of the moving bar in a Progress with no value (Monet)
--et-duration-slide: 220mslarge panels that slide or resize: sheets, the sidebar (Orbit's --orbit-duration)

Surfaces

--et-canvas: #fbfbfb#060605[canvas] page background (--bg); the sidebar: Etched's black drawer. Dark: near-black, so cards lift from it; the brand's drawer is #000
--et-surface: #fff#151412[base] cards, buttons, menus
--et-elevated: #f8f8f8#0a0908[elevated] raised panels, table stripes and group rows, read-only fields (--raised)
--et-recessed: #f2f2f2#11100e[recessed] wells, chips, segmented tracks (--chip)
--et-tint: #f5f5f5#2c2b29[tint] hover (--hover): lighter than fields and popups in dark
--et-highlight: #e5e5e5#393835highlighted option and menu rows (--chip-hover): a step above the popup in dark
--et-segment: var(--et-surface)#454340the chosen segment on a recessed track: segmented tabs, the slider's bar, a switch's knob when off. Dark: lighter than the track, as in Kumo
--et-control: var(--et-surface)#1e1d1b[control] field background. Dark: fields lift from the surface (Kumo)
--et-popup: var(--et-surface)#252422menus, select lists, popovers, tooltips, hover cards, toasts. Dark: a step above the surface (Kumo's overlay)
--et-overlay: #0006#0009dialog backdrop
--et-contrast: var(--et-text)[contrast] primary button, checked controls (Orbit's button.primary)
--et-contrast-hover: #3a3a3b#cdcac5--primary-hover: toward the canvas
--et-line: #e9e9e9#2c2b29[hairline] one line for panels, rows and dividers
--et-scrollbar-thumb: var(--et-text-inactive)ScrollArea's thumb: Orbit's thin scrollbars (scrollbar-color: --inactive)
--et-scrollbar-thumb-hover: var(--et-text-faint)Monet: one step stronger while pointed at or dragged

Text

--et-text: #18181b#eae7e3[default]
--et-text-strong: #0a0a0a#f7f5f2[strong] Kumo neutral-950
--et-text-subtle: #737373#a8a199[subtle] help text, labels, placeholders (--muted): 4.7:1 on white; dark: Etched warm grey, 7.2:1
--et-text-faint: #a1a1a1#7d7568[placeholder] table headings (--faint): 2.6:1 on white, kept on purpose (Ryan, 2026-10-15); dark: Etched deep warm grey, 4:1
--et-text-inactive: #d4d4d4#4f4d48[inactive] disabled (--inactive)
--et-text-inverse: #fff#151412[inverse] on contrast
--et-text-on-solid: #fff#fffon a saturated fill (the danger fill, the solid tones): white in both modes (Kumo)
--et-text-link: var(--et-text)[link] ink like the text; the underline marks a link (Orbit, Kumo neutral)

Brand and focus

--et-brand: #0b0b0b#eae7e3[brand] Orbit --accent, Kumo's focus ink: focus, single-selection marks (tab underline, the open row's bar), checked cards, beta badge. Ink in both modes: slate and gold are retired (Ryan, 2026-10-15; dark, 2026-10-27)
--et-focus: var(--et-brand)[focus] 19.8:1 on white, 15:1 on the dark surface; the 2px offset keeps it visible on filled buttons
--et-focus-width: 2px
--et-focus-offset: 2px

Feedback

--et-info: #193cb8#80b3fd
--et-info-tint: oklch(93.2% 0.032 255.6 / 0.45)oklch(45% 0.12 262 / 0.3)
--et-success: #006045#6cd79d
--et-success-tint: oklch(96.2% 0.043 156.7 / 0.57)oklch(45% 0.09 158 / 0.3)
--et-warning: #7f5401#eac25adark: OKLCH hue 88, off Etched gold's 64, so warnings do not read as brand gold
--et-warning-tint: rgb(255 172 0 / 0.16)oklch(50% 0.1 70 / 0.3)
--et-danger: #c10007#f75d59
--et-danger-fill: var(--et-danger)#c92f30a destructive fill (Button, a step with an error) under white text: the ink in light; dark: a saturated red, 5.3:1 (Kumo)
--et-danger-hover: color-mix(in srgb, var(--et-danger-fill) 85%, light-dark(white, black))the fill on hover, toward the canvas like the primary hover; 6.9:1 in dark
--et-danger-tint: oklch(93.6% 0.032 17.7 / 0.42)oklch(45% 0.13 25 / 0.3)

Tones for pills and colored badges

--et-tone-neutral-ink: #424242#d3d0cd
--et-tone-neutral-fill: #e0e0e0#32302d
--et-tone-red-ink: #682e2b#ffbfb8
--et-tone-red-fill: #fed2cd#4c221f
--et-tone-orange-ink: #623606#f9c59c
--et-tone-orange-fill: #fdd5b7#482707
--et-tone-amber-ink: #583d01#edcc95
--et-tone-amber-fill: #fcd89d#412c00
--et-tone-olive-ink: #3f4805#ccd99d
--et-tone-olive-fill: #dae4b7#2e3407
--et-tone-green-ink: #194f29#ace0b6
--et-tone-green-fill: #c3eac9#14391e
--et-tone-teal-ink: #004e44#95e3d3
--et-tone-teal-fill: #b3ecdf#003931
--et-tone-cyan-ink: #024b55#91e0ee
--et-tone-cyan-fill: #b0eaf4#01373f
--et-tone-blue-ink: #29416f#b9d2ff
--et-tone-blue-fill: #cddfff#1e3051
--et-tone-purple-ink: #503464#e1c3f9
--et-tone-purple-fill: #ead4fc#3a2649

Solid tones for colored badges, under white text

--et-tone-neutral-solid: var(--et-tone-neutral-ink)#636363
--et-tone-red-solid: var(--et-tone-red-ink)#984743
--et-tone-orange-solid: var(--et-tone-orange-ink)#8f520f
--et-tone-green-solid: var(--et-tone-green-ink)#2b7440
--et-tone-teal-solid: var(--et-tone-teal-ink)#007766
--et-tone-blue-solid: var(--et-tone-blue-ink)#4061a2
--et-tone-purple-solid: var(--et-tone-purple-ink)#765092

An ordinal green ramp for scores, stronger as the score grows

--et-ramp-ink: #1b552c#b9eec2
--et-ramp-1-fill: #e8f9eb#17261a
--et-ramp-2-fill: #d0f0d5#17321e
--et-ramp-3-fill: #b9e7c1#163f21
--et-ramp-4-fill: #a2ddad#114c24

A custom hue

--et-tone-ink-lightness: 0.38
--et-tone-ink-lightness-dark: 0.86
--et-tone-ink-chroma: 0.064
--et-tone-fill-lightness: 0.9
--et-tone-fill-lightness-dark: 0.31
--et-tone-fill-chroma: 0.048

Charts

--et-chart-1: #155dfc#588efeblue (Orbit --chart-blue)
--et-chart-2: #ea6f2f#ff9463orange
--et-chart-3: #622cb5#7848d0violet
--et-chart-4: #4f9b3e#68b457green
--et-chart-5: #43b2e1#66cffesky
--et-chart-6: #008877#31a08eteal (Orbit --chart-teal, chroma up to 0.10)
--et-chart-7: #eda109#ffc167amber (Orbit --chart-amber, lightness down to 0.77)
--et-chart-8: #df5ba1#fb75bapink
--et-chart-other: var(--et-text-subtle)"Other" and "Not specified" (Orbit --chart-stone)
--et-chart-swatch: 10pxthe color square in a legend (Orbit)
--et-calendar-day: 32pxa day in the calendar (Kumo)

Tooltips

--et-tooltip-bg: var(--et-popup)
--et-tooltip-text: var(--et-text)
--et-tooltip-max: 20remwith the viewport less 1rem, whichever is smaller

Elevation

--et-shadow-sm: 0 1px 2px light-dark(#0000000f, transparent)
--et-ring: #0000000d#ffffff1fthe visible edge of a floating layer, and of its arrow
--et-shadow-ring: 0 0 0 1px var(--et-ring)its transparent outline draws in high contrast
--et-shadow-md: 0 4px 16px light-dark(#00000024, #0000004d), var(--et-shadow-ring)
--et-shadow-lg: 0 16px 48px light-dark(#00000033, transparent), 0 2px 6px light-dark(#0000000f, transparent), 0 4px 16px light-dark(transparent, #0000004d), var(--et-shadow-ring)
--et-disabled-opacity: 0.5one value for every disabled control (Kumo)
--et-loader-track-opacity: 0.1
--et-z-overlay: 100popovers, menus and dialogs; later portals stack above earlier ones

Type roles

Aa--et-text-caption: 12px
--et-leading-caption: 16px
Aa--et-text-body-sm: 13px
--et-leading-body-sm: 18px
Aa--et-text-body: 14px
--et-leading-body: 20px
--et-leading-prose: 22pxnotes, messages: one step looser than body
Aa--et-text-heading-sm: 16px
--et-leading-heading-sm: 20px
Aa--et-text-heading: 18px
--et-leading-heading: 24px
Aa--et-text-title: 24px
--et-leading-title: 28px
Aa--et-text-display: 28px
--et-leading-display: 30px

Controls

--et-control-sm: 28pxin tables, small buttons, pagination, segmented items. Orbit has two control heights only.
--et-control-base: 36px
--et-control-radius: var(--et-radius-lg)controls, menus and panels
--et-control-border-width: 1px
--et-control-border: #0a0a0a1a#ffffff1f[line] field borders (--control)
--et-control-border-hover: var(--et-text-subtle)
--et-control-readonly: var(--et-elevated)read-only field fill: the value stays clear, but the field does not look editable. Keeps its edge; no hover.
--et-popup-radius: var(--et-radius-lg)select lists, menus, popovers
--et-item-radius: var(--et-radius-sm)small marks and inner items: checkboxes, options, menu rows, segments; 4 px inside an 8 px box with a 4 px inset
--et-dialog-radius: var(--et-radius-xl)
--et-dialog-sm: 18remdialog widths (Kumo); sheets take them too
--et-dialog-base: 24rem384 px, as shadcn/ui's sheet
--et-dialog-lg: 32remthe default sheet: a record's details
--et-dialog-xl: 48rem
--et-scroll-fade: 24pxthe soft edge where a scrolling dialog or sheet body cuts its content (Kumo LayerDialog)
--et-tooltip-radius: var(--et-radius-md)Kumo
--et-card-radius: var(--et-radius-lg)empty states and cards: panels
--et-choice-size: 16pxcheckbox and radio box (Kumo)
--et-kbd-size: 20pxa key's height and minimum width (shadcn Kbd)
--et-switch-sm: 16pxswitch heights; the track is twice as wide and the thumb 2 px inside it (Kumo 32 x 16, 36 x 18, 40 x 20)
--et-switch-base: 18px
--et-switch-lg: 20px
--et-score-min: 28pxa score shown as a box (Orbit's .conviction-value)
--et-score-trigger-min: 52pxa score box that opens a list (Orbit's .conviction-input)
--et-touch-row: 44pxoption and menu rows on coarse pointers
--et-scrollbar: 10pxScrollArea's track: an 8 px thumb with 1 px around it (shadcn's scroll-area)
--et-nav-panel-max: 400pxNavigationMenu's widest panel (Base UI's navigation menu)
--et-row-marker: 3pxthe ink bar on a table's open row (Orbit)
--et-loader-base: 24pxspinner sizes (Kumo); sm uses --et-icon-base
--et-loader-lg: 32px
--et-step-marker: 24pxthe step number circle (Orbit's .step-number)
--et-meter-height: 6pxmeter and progress bars (Orbit's outreach bars)
--et-meter-compact-height: 4pxa meter without a label, in a table cell (Orbit's warm-path strength)
--et-slider-thumb: 16pxthe slider thumb's width (Kumo w-4)
--et-slider-grip: color-mix(in srgb, var(--et-contrast) 25%, transparent)the line on the slider thumb (Kumo contrast/25)
--et-avatar-xs: 22pxavatars and their initials (Orbit 10/10/11/18): in person pills
--et-avatar-xs-text: 10px
--et-avatar-sm: 28pxrows, lists, sidebar
--et-avatar-sm-text: 10px
--et-avatar-base: 36px
--et-avatar-base-text: 11px
--et-avatar-lg: 56pxprofiles
--et-avatar-lg-text: 18px
--et-icon-xs: 10pxthe remove mark in a chip (Kumo's tag input)
--et-attachment-max: 20remthe widest attachment chip; a longer file name ends in an ellipsis (Monet)
--et-bubble-radius: var(--et-radius-xl)a message bubble (shadcn's bubble; Monet)
--et-field-label-width: 280pxthe label column of a field with its label beside the control (Orbit's settings rows: minmax(220px, 280px))
--et-field-control-min: 240pxa responsive field puts its label on top when the control would be narrower than this (Monet)
--et-toolbar-input: 10rema toolbar's search field shrinks to this before the toolbar wraps (Monet)
--et-icon-sm: 14px
--et-icon-base: 16px
--et-icon-lg: 20pxthe command palette's search icon (Orbit)
--et-palette-width: 40remthe command palette dialog (Orbit's candidate search, 640 px)
--et-palette-list: min(360px, calc(100dvh - 240px))the command palette's fixed list height (Orbit's candidate search)
--et-palette-list-min: 80px
--et-palette-row: 62pxa palette row: a label and a description line

App shell

--et-sidebar-width: 224px--orbit-width; also the drawer on phones
--et-sidebar-width-collapsed: 72pxthe icon rail
--et-sidebar-header: 64px.hiring-brand
--et-sidebar-icon: 18pxnav icons
--et-measure-prose: 72chlongest line of prose, such as a page description (Orbit --measure-prose)