J3W1 / DESIGN SYSTEM
Token usage
Choose roles by their documented component, part, state and surface. Equal colours do not imply interchangeable roles.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Choose a role group, then narrow by component, part or state. Filters use documented relationships; unknown combinations return no match.
No documented match. Clear a facet or consult the component specification; similarity in colour is not a substitute for a documented relationship.
default · approved
| Role | Value | Eligibility | Documented use |
|---|---|---|---|
border.width.default | 1px | observed · use | Every border is 1px. |
border.width.emphasis | 2px | observed · use | Selected indicator, sticky header rule, invalid border. |
breakpoint.lg | 1280px | observed · use | The site's bar breaks below this. |
breakpoint.md | 900px | observed · use | No role description declared. |
breakpoint.sm | 600px | observed · use | No role description declared. |
breakpoint.xs | 320px | observed · use | Reflow floor (WCAG 1.4.10). |
color.action.destructive.border | #e53935 | observed · use | Destructive button border. |
color.action.destructive.filled-bg | #dc282e | observed · use | Confirm-dialog destructive fill. |
color.action.destructive.filled-text | #f9faf9 | observed · use | Text on the destructive fill. |
color.action.destructive.hover-bg | #dc282e | observed · use | Destructive button hover fill. |
color.action.destructive.hover-text | #f9faf9 | observed · use | Destructive button text on hover (4.58:1). |
color.action.destructive.pressed-bg | #ae1914 | observed · use | Destructive button pressed fill. |
color.action.destructive.text | #f73f35 | observed · use | Destructive button text at rest (outline style). |
color.action.primary.bg | #7d1310 | approved · use | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
color.action.primary.border | #9e231f | observed · use | Primary button border. |
color.action.primary.hover-bg | #911410 | observed · use | Primary button hover (7.92:1 with prose). |
color.action.primary.pressed-bg | #630f0d | observed · use | Primary button pressed. |
color.action.primary.text | #f4eeee | observed · use | Primary button text (9.28:1). |
color.action.secondary.bg | rgb(0 0 0 / 0%) | observed · use | Secondary button has no fill. |
color.action.secondary.border | #a3676b | observed · use | Secondary button border (meets 3:1). |
color.action.secondary.hover-bg | #630f0d | observed · use | Secondary button hover. |
color.action.secondary.pressed-bg | #420f0c | observed · use | Secondary button pressed. |
color.action.secondary.text | #ffa2a7 | observed · use | Secondary button text. |
color.action.tertiary.hover-bg | #1c0a09 | observed · use | Ghost and icon button hover. |
color.action.tertiary.text | #e99499 | observed · use | Ghost and icon button text. |
color.border.active | #e53935 | observed · use | Active or focused control border. |
color.border.control | #a3676b | proposed · use-and-report | Form-control boundary (4.45:1, meets the 3:1 non-text minimum). |
color.border.default | #531310 | observed · use | Decorative border (1.39:1; never the only edge of a control). |
color.border.disabled | #7d1310 | observed · use | Disabled control border (exempt). |
color.border.divider | #2b0e0d | proposed · use-and-report | Hairline between rows and sections. |
color.border.overlay | #e53935 | proposed · use-and-report | Every floating layer's 1px border. |
color.border.selected-indicator | #e53935 | observed · use | 2px indicator bar on the selected tab or nav item. |
color.border.selected-indicator-inactive | #9e231f | observed · use | Indicator bar when the container is not focused. |
color.border.strong | #9e231f | observed · use | Emphasised 2px rule: sticky headers, section ends. |
color.chart.axis | #9e231f | observed · use | Axis lines. |
color.chart.grid | #2b0e0d | observed · use | Grid lines. |
color.chart.label | #bd787d | observed · use | Axis labels. |
color.chart.series-1 | #ffa2a7 | observed · use | First series. |
color.chart.series-2 | #f73f35 | observed · use | Second series. |
color.chart.series-3 | #bd787d | observed · use | Third series. |
color.chart.series-4 | #a3676b | observed · use | Fourth series (non-text, 4.45:1). |
color.code.bg | #0c0909 | observed · use | Editor background. |
color.code.bracket-match | #e53935 | observed · use | Matching bracket 1px border. |
color.code.caret | #e99499 | observed · use | Caret (Xresources *cursorColor). |
color.code.current-line | #1c0a09 | observed · use | Current line background. |
color.code.gutter-bg | #0c0909 | observed · use | Gutter background. |
color.code.gutter-rule | #2b0e0d | observed · use | Rule between gutter and text. |
color.code.indent-guide | #531310 | observed · use | Indent guides. |
color.code.line-number | #ad7175 | approved · use | Line numbers (5.10:1; replaces the site's #7d1310). |
color.code.line-number-active | #e99499 | observed · use | Line number of the current line. |
color.code.search-current-bg | #ffa2a7 | observed · use | Current search match background. |
color.code.search-current-text | #0c0909 | observed · use | Current search match text. |
color.code.search-match-bg | #630f0d | observed · use | Other search matches. |
color.code.selection-bg | #420f0c | observed · use | Editor selection background (muted text stays 4.71:1). |
color.code.syntax.attribute | #d4868b | observed · use | Markup attributes. |
color.code.syntax.comment | #ad7175 | approved · use | Comments, italic (color8 lineage, corrected for contrast). |
color.code.syntax.constant | #d4868b | observed · use | Constants and booleans. |
color.code.syntax.deprecated | #ad7175 | observed · use | Deprecated symbol: line-through. |
color.code.syntax.escape | #d4868b | observed · use | Escape sequences and regex, bold. |
color.code.syntax.function | #ffa2a7 | observed · use | Function names and calls (color7 lineage). |
color.code.syntax.heading | #e53935 | observed · use | Markup headings (site .syntax-heading). |
color.code.syntax.invalid | #e53935 | observed · use | Invalid text: wavy underline. |
color.code.syntax.keyword | #f73f35 | observed · use | Keywords (Xresources color5 lineage). |
color.code.syntax.number | #d4868b | observed · use | Numbers. |
color.code.syntax.operator | #e99499 | observed · use | Operators. |
color.code.syntax.property | #e53935 | observed · use | Properties and keys (site .syntax-key). |
color.code.syntax.punctuation | #e99499 | observed · use | Punctuation. |
color.code.syntax.string | #bd787d | observed · use | Strings (color2 lineage). |
color.code.syntax.tag | #f73f35 | observed · use | Markup tags. |
color.code.syntax.type | #b37175 | observed · use | Types. |
color.code.syntax.variable | #e99499 | observed · use | Variables and default text. |
color.code.whitespace | #7d1310 | observed · use | Rendered whitespace (decorative). |
color.diagnostic.error.bg | #2b0e0d | observed · use | Error line background. |
color.diagnostic.error.stripe | #e53935 | observed · use | Error stripe mark. |
color.diagnostic.error.text | #f73f35 | observed · use | Error message text. |
color.diagnostic.error.underline | #e53935 | observed · use | Error wavy underline. |
color.diagnostic.hint.underline | #ad7175 | observed · use | Hint dotted underline. |
color.diagnostic.info.text | #7e9ebb | approved · use | Info message text. |
color.diagnostic.info.underline | #7e9ebb | approved · use | Info dotted underline. |
color.diagnostic.unused.text | #bd787d | observed · use | Unused symbol, dotted underline. |
color.diagnostic.warning.stripe | #c9973f | approved · use | Warning stripe mark. |
color.diagnostic.warning.text | #c9973f | approved · use | Warning message text. |
color.diagnostic.warning.underline | #c9973f | approved · use | Warning wavy underline. |
color.diff.added.bg | #0f1a0e | approved · use | Added line background. |
color.diff.added.emphasis | #86a46f | approved · use | Word-level addition: 2px underline. |
color.diff.added.gutter | #86a46f | approved · use | Added gutter mark and +. |
color.diff.conflict-border | #f73f35 | observed · use | Conflict block: double 1px border. |
color.diff.header-bg | #241010 | observed · use | Hunk header background. |
color.diff.modified.bg | #1f1a0c | approved · use | Modified line background. |
color.diff.modified.gutter | #c9973f | approved · use | Modified gutter mark and ~. |
color.diff.removed.bg | #2b0e0d | observed · use | Removed line background. |
color.diff.removed.emphasis | #e53935 | observed · use | Word-level removal: underline and line-through. |
color.diff.removed.gutter | #e53935 | observed · use | Removed gutter mark and −. |
color.icon.decorative | #a3676b | observed · use | Decorative glyphs (3:1 as graphics, never text). |
color.icon.default | #e99499 | observed · use | Icons take the text colour (currentColor in CSS). |
color.interaction.disabled.bg | #160b0b | observed · use | Disabled control fill. |
color.interaction.drop-target | #e53935 | observed · use | Dashed drop-target border. |
color.interaction.focus.ring | #e53935 | observed · use | 1px dashed focus ring on controls and rows. |
color.interaction.focus.ring-container | #ffa2a7 | observed · use | Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry. |
color.interaction.hover.bg | #1c0a09 | observed · use | Hover on rows, ghost buttons, list items. |
color.interaction.hover.bg-strong | #630f0d | observed · use | Hover on menu items; D-027 moved links to interaction.hover.bg. |
color.interaction.marquee | rgb(145 20 16 / 12%) | observed · use | Drag marquee and ghost. |
color.interaction.pressed.bg | #420f0c | observed · use | Pressed fill. |
color.interaction.scrollbar.thumb | #420f0c | observed · use | Scrollbar thumb. |
color.interaction.scrollbar.thumb-hover | #911410 | observed · use | Scrollbar thumb on hover. |
color.interaction.scrollbar.track | #0c0909 | observed · use | Scrollbar track. |
color.interaction.selection.bg | #531310 | approved · use | Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection. |
color.interaction.selection.inactive-bg | #420f0c | observed · use | Selection while the container is not focused. |
color.interaction.selection.inactive-text | #e99499 | observed · use | Text on the inactive selection (7.02:1). |
color.interaction.selection.text | #f4eeee | observed · use | Text on the selection. |
color.interaction.text-selection.bg | #911410 | observed · use | ::selection background. |
color.interaction.text-selection.text | #f4eeee | observed · use | ::selection text. |
color.primitive.alpha.black-55 | rgb(0 0 0 / 55%) | observed · blocked | Floating-window shadow. |
color.primitive.alpha.black-65 | rgb(0 0 0 / 65%) | observed · blocked | Modal backdrop; unifies the site's 62–72% backdrops. |
color.primitive.alpha.red-12 | rgb(145 20 16 / 12%) | observed · blocked | Drag marquee. |
color.primitive.alpha.red-6 | rgb(145 20 16 / 6%) | observed · blocked | Wallpaper stripe. |
color.primitive.alpha.transparent | rgb(0 0 0 / 0%) | observed · blocked | No fill. |
color.primitive.amber.500 | #c9973f | approved · blocked | Warning text, border and fill (7.54:1 on canvas). |
color.primitive.amber.600 | #d6a24b | proposed · blocked | Bright yellow slot in the extended terminal palette. |
color.primitive.amber.tint | #1f1a0c | approved · blocked | Warning and modified backgrounds. |
color.primitive.ansi.0 | #0c0909 | observed · blocked | color0 |
color.primitive.ansi.1 | #c81a1a | observed · blocked | color1 |
color.primitive.ansi.10 | #ad2721 | observed · blocked | color10 |
color.primitive.ansi.11 | #b37175 | observed · blocked | color11 |
color.primitive.ansi.12 | #871f19 | observed · blocked | color12 |
color.primitive.ansi.13 | #e82132 | observed · blocked | color13 |
color.primitive.ansi.14 | #e0292f | observed · blocked | color14 |
color.primitive.ansi.15 | #a3676b | observed · blocked | color15 |
color.primitive.ansi.2 | #bd787d | observed · blocked | color2 |
color.primitive.ansi.3 | #d4868b | observed · blocked | color3 |
color.primitive.ansi.4 | #8c1212 | observed · blocked | color4 |
color.primitive.ansi.5 | #f73f35 | observed · blocked | color5 |
color.primitive.ansi.6 | #9e474a | observed · blocked | color6 |
color.primitive.ansi.7 | #ffa2a7 | observed · blocked | color7 |
color.primitive.ansi.8 | #7d1310 | observed · blocked | color8 |
color.primitive.ansi.9 | #ab1612 | observed · blocked | color9 |
color.primitive.blue.500 | #7e9ebb | approved · blocked | Info text, border and fill (7.08:1 on canvas). |
color.primitive.blue.600 | #9ab3c9 | proposed · blocked | Bright blue slot in the extended terminal palette. |
color.primitive.blue.tint | #0f141c | approved · blocked | Info background. |
color.primitive.green.500 | #86a46f | approved · blocked | Success text, border and fill (7.13:1 on canvas). |
color.primitive.green.600 | #7fbf7a | observed · blocked | The greeter's systemd OK; bright green slot in the extended terminal palette. |
color.primitive.green.tint | #0f1a0e | approved · blocked | Added-line background. |
color.primitive.ink.0 | #000000 | observed · blocked | The desktop behind every window. |
color.primitive.ink.14 | #090707 | approved · blocked | True Black / Rose surface primitive; D-023. |
color.primitive.ink.15 | #0a0707 | observed · blocked | Sunken reading and detail panes. |
color.primitive.ink.20 | #0c0909 | observed · blocked | Terminal and canvas background; Xresources color0 and *background. |
color.primitive.ink.25 | #100909 | observed · blocked | Window chrome and title bars. |
color.primitive.ink.28 | #100c0c | approved · blocked | True Black / Rose surface primitive; D-023. |
color.primitive.ink.30 | #160b0b | observed · blocked | Default panel surface. |
color.primitive.ink.40 | #1c0a09 | observed · blocked | Alternate chrome; hover rows; current line. |
color.primitive.ink.52 | #241010 | observed · blocked | Raised surface: sticky headers, menus, popovers. |
color.primitive.ink.60 | #2b0e0d | observed · blocked | Hairline divider; folds the site's six near-identical hairlines. |
color.primitive.paper.100 | #f9faf9 | observed · blocked | Text on the critical toast. |
color.primitive.paper.90 | #f4eeee | observed · blocked | Prose and on-fill text. |
color.primitive.red.100 | #531310 | observed · blocked | Decorative hairline border. |
color.primitive.red.150 | #630f0d | observed · blocked | Dark selection; dmenu selected background. |
color.primitive.red.200 | #7d1310 | observed · blocked | Xresources color8. Never text. |
color.primitive.red.250 | #8c1212 | observed · blocked | Xresources color4; i3 focused child border. |
color.primitive.red.300 | #871f19 | observed · blocked | Xresources color12; the button fill. |
color.primitive.red.350 | #911410 | observed · blocked | Selection fill. |
color.primitive.red.400 | #9e231f | observed · blocked | Strong border; sticky header rule. |
color.primitive.red.450 | #ab1612 | observed · blocked | Xresources color9. |
color.primitive.red.50 | #420f0c | observed · blocked | Soft selection; inactive selection; scrollbar thumb. |
color.primitive.red.500 | #ad2721 | observed · blocked | Xresources color10. |
color.primitive.red.550 | #ae1914 | observed · blocked | dunst frame and conky accent. |
color.primitive.red.650 | #c81a1a | observed · blocked | Xresources color1; i3 focused workspace background. |
color.primitive.red.750 | #dc282e | observed · blocked | dunst critical background; link underline. |
color.primitive.red.760 | #e0292f | observed · blocked | Xresources color14; i3 focused border. |
color.primitive.red.770 | #e82132 | observed · blocked | Xresources color13. |
color.primitive.red.800 | #e53935 | observed · blocked | Focus ring; active border; accent text on dark surfaces. |
color.primitive.red.850 | #f73f35 | observed · blocked | Xresources color5; strong accent; danger text. |
color.primitive.rose.300 | #8a5559 | approved · blocked | Disabled text (3.33:1 on canvas; exempt, at least 3:1 by policy). |
color.primitive.rose.320 | #9e474a | observed · blocked | Xresources color6. |
color.primitive.rose.350 | #a3676b | observed · blocked | Xresources color15; 4.45:1 on canvas, so not ordinary text. |
color.primitive.rose.450 | #ad7175 | approved · blocked | Subtle text: metadata, comments, line numbers (5.10:1). |
color.primitive.rose.550 | #b37175 | observed · blocked | Xresources color11. |
color.primitive.rose.600 | #bd787d | observed · blocked | Xresources color2; muted text, the floor for chrome text (5.81:1). |
color.primitive.rose.650 | #d4868b | observed · blocked | Xresources color3. |
color.primitive.rose.700 | #e99499 | observed · blocked | Xresources *foreground; interface text. |
color.primitive.rose.800 | #ffa2a7 | observed · blocked | Xresources color7; bright text, links, headings. |
color.status.danger.border | #e53935 | observed · use | Danger border, 2px on invalid inputs. |
color.status.danger.fill | #dc282e | observed · use | Danger fill. |
color.status.danger.on-fill | #f9faf9 | observed · use | Text on the danger fill (4.58:1). |
color.status.danger.text | #f73f35 | observed · use | Danger text (5.40:1). |
color.status.danger.tint | #2b0e0d | observed · use | Danger background tint. |
color.status.info.border | #7e9ebb | approved · use | Info border. |
color.status.info.fill | #7e9ebb | approved · use | Info fill. |
color.status.info.on-fill | #0c0909 | approved · use | Text on the info fill (7.08:1). |
color.status.info.text | #7e9ebb | approved · use | Info text (7.08:1). |
color.status.info.tint | #0f141c | approved · use | Info background tint. |
color.status.neutral.border | #a3676b | observed · use | Neutral border. |
color.status.neutral.fill | #a3676b | observed · use | Neutral fill (dunst urgency_low). |
color.status.neutral.on-fill | #000000 | observed · use | Text on the neutral fill (4.71:1). |
color.status.neutral.text | #bd787d | observed · use | Neutral status text. |
color.status.neutral.tint | #241010 | observed · use | Neutral background tint. |
color.status.success.border | #86a46f | approved · use | Success border. |
color.status.success.fill | #86a46f | approved · use | Success fill. |
color.status.success.on-fill | #0c0909 | approved · use | Text on the success fill (7.13:1). |
color.status.success.text | #86a46f | approved · use | Success text (7.13:1). |
color.status.success.tint | #0f1a0e | approved · use | Success background tint. |
color.status.warning.border | #c9973f | approved · use | Warning border. |
color.status.warning.fill | #c9973f | approved · use | Warning fill. |
color.status.warning.on-fill | #0c0909 | approved · use | Text on the warning fill (7.54:1). |
color.status.warning.text | #c9973f | approved · use | Warning text (7.54:1). |
color.status.warning.tint | #1f1a0c | approved · use | Warning background tint. |
color.surface.backdrop | rgb(0 0 0 / 65%) | proposed · use-and-report | Behind modal dialogs. |
color.surface.canvas | #000000 | approved · use | Page and terminal background. |
color.surface.chrome | #090707 | approved · use | Window chrome, title bars, bars. |
color.surface.chrome-alt | #1c0a09 | observed · use | Alternate chrome. |
color.surface.code | #000000 | approved · use | Editor background. |
color.surface.default | #100c0c | approved · use | Panels and cards. |
color.surface.desktop | #000000 | observed · use | Behind every window. |
color.surface.input | #000000 | approved · use | Form-control fill. |
color.surface.overlay | #241010 | observed · use | Dialogs and drawers. |
color.surface.raised | #160b0b | approved · use | Sticky headers, menus, popovers; D-027 recessed it so an open list reads as depth rather than a lighter panel. |
color.surface.sunken | #000000 | approved · use | Reading and detail panes set below the canvas. |
color.surface.terminal | #000000 | approved · use | Terminal background. |
color.terminal.ansi.0 | #0c0909 | observed · use | ANSI slot 0, exact heritage value. |
color.terminal.ansi.1 | #c81a1a | observed · use | ANSI slot 1, exact heritage value. |
color.terminal.ansi.10 | #ad2721 | observed · use | ANSI slot 10, exact heritage value. |
color.terminal.ansi.11 | #b37175 | observed · use | ANSI slot 11, exact heritage value. |
color.terminal.ansi.12 | #871f19 | observed · use | ANSI slot 12, exact heritage value. |
color.terminal.ansi.13 | #e82132 | observed · use | ANSI slot 13, exact heritage value. |
color.terminal.ansi.14 | #e0292f | observed · use | ANSI slot 14, exact heritage value. |
color.terminal.ansi.15 | #a3676b | observed · use | ANSI slot 15, exact heritage value. |
color.terminal.ansi.2 | #bd787d | observed · use | ANSI slot 2, exact heritage value. |
color.terminal.ansi.3 | #d4868b | observed · use | ANSI slot 3, exact heritage value. |
color.terminal.ansi.4 | #8c1212 | observed · use | ANSI slot 4, exact heritage value. |
color.terminal.ansi.5 | #f73f35 | observed · use | ANSI slot 5, exact heritage value. |
color.terminal.ansi.6 | #9e474a | observed · use | ANSI slot 6, exact heritage value. |
color.terminal.ansi.7 | #ffa2a7 | observed · use | ANSI slot 7, exact heritage value. |
color.terminal.ansi.8 | #7d1310 | observed · use | ANSI slot 8, exact heritage value. |
color.terminal.ansi.9 | #ab1612 | observed · use | ANSI slot 9, exact heritage value. |
color.terminal.bg | #0c0909 | observed · use | Terminal background. |
color.terminal.cursor | #e99499 | observed · use | Terminal cursor. |
color.terminal.fg | #e99499 | observed · use | Terminal foreground. |
color.terminal.selection-bg | #911410 | observed · use | Terminal selection. |
color.terminal.selection-text | #f4eeee | observed · use | Terminal selection text. |
color.text.accent | #e53935 | observed · use | Accent text on canvas and default surfaces only. |
color.text.accent-strong | #f73f35 | observed · use | Accent text safe on every surface. |
color.text.bright | #ffa2a7 | observed · use | Headings and emphasis. Links use color.text.link. |
color.text.default | #e99499 | observed · use | Interface and body text. |
color.text.disabled | #8a5559 | approved · use | Disabled control text. |
color.text.inverse | #0c0909 | observed · use | Text on inverted surfaces. |
color.text.link | #f73f35 | approved · use | Strong red link text, distinct from rose body text and headings; retain the underline. |
color.text.link-hover | #f4eeee | observed · use | Link text on hover, over interaction.hover.bg-strong. |
color.text.link-underline | #dc282e | observed · use | Link underline. |
color.text.muted | #bd787d | observed · use | Secondary text; the darkest colour permitted for chrome text. |
color.text.on-action | #f4eeee | observed · use | Text on the primary action fill. |
color.text.on-danger | #f9faf9 | observed · use | Text on the danger fill. |
color.text.on-light | #0c0909 | observed · use | Text on light fills: bright rose, amber, green, blue. |
color.text.on-selection | #f4eeee | observed · use | Text on the selection fill. |
color.text.placeholder | #a3676b | approved · use | Placeholder text, italic; D-027 darkened it to 4.71:1, just clear of the 4.5:1 floor. |
color.text.prose | #f4eeee | observed · use | Long-form reading text. |
color.text.subtle | #ad7175 | approved · use | Metadata, comments, line numbers. |
density.comfortable.control-height | 32px | observed · use | No role description declared. |
density.comfortable.control-padding-x | 12px | observed · use | No role description declared. |
density.comfortable.gap | 4px | observed · use | No role description declared. |
density.comfortable.icon | 16px | observed · use | No role description declared. |
density.comfortable.row-height | 36px | observed · use | No role description declared. |
density.compact.control-height | 24px | observed · use | No role description declared. |
density.compact.control-padding-x | 8px | observed · use | No role description declared. |
density.compact.gap | 2px | observed · use | No role description declared. |
density.compact.icon | 12px | observed · use | No role description declared. |
density.compact.row-height | 28px | observed · use | No role description declared. |
focus.offset | -2px | observed · use | outline-offset for controls. |
focus.offset-container | -3px | observed · use | outline-offset for containers. |
focus.offset-invalid | -4px | observed · use | outline-offset inside the 2px invalid border. |
focus.ring | 1px dashed #e53935 | observed · use | outline on controls and rows. |
focus.ring-container | 2px solid #ffa2a7 | observed · use | outline on focusable containers. |
font.family.mono | "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace | observed · use | One family for chrome, reading and code. Not bundled; see theme.json font. |
font.letter-spacing.terminal | -0.5px | observed · use | URxvt letterSpace -1 at pixelsize 13, as the site renders it. |
font.line-height.caption | 16px | observed · use | No role description declared. |
font.line-height.code | 19px | observed · use | No role description declared. |
font.line-height.h1 | 28px | observed · use | No role description declared. |
font.line-height.h2 | 24px | observed · use | No role description declared. |
font.line-height.h3 | 18px | observed · use | No role description declared. |
font.line-height.reading | 24px | observed · use | No role description declared. |
font.line-height.terminal | 19px | observed · use | No role description declared. |
font.line-height.ui-lg | 20px | observed · use | No role description declared. |
font.line-height.ui-md | 18px | observed · use | No role description declared. |
font.line-height.ui-sm | 16px | observed · use | No role description declared. |
font.size.caption | 11px | observed · use | Only with text.muted or lighter. |
font.size.code | 13px | observed · use | No role description declared. |
font.size.h1 | 20px | observed · use | No role description declared. |
font.size.h2 | 16px | observed · use | No role description declared. |
font.size.h3 | 13px | observed · use | No role description declared. |
font.size.reading | 15px | observed · use | No role description declared. |
font.size.terminal | 13px | observed · use | URxvt pixelsize 13. |
font.size.ui-lg | 14px | observed · use | No role description declared. |
font.size.ui-md | 13px | observed · use | No role description declared. |
font.size.ui-sm | 12px | observed · use | No role description declared. |
font.weight.bold | 700 | observed · use | No role description declared. |
font.weight.regular | 400 | observed · use | No role description declared. |
icon.size.lg | 20px | observed · use | No role description declared. |
icon.size.md | 16px | observed · use | No role description declared. |
icon.size.sm | 12px | observed · use | No role description declared. |
icon.stroke | 1.5px | observed · use | SVG line icons, currentColor, no fill. |
layout.app-max | 1440px | observed · use | Application layout maximum. |
layout.content-max | 680px | observed · use | Reading column maximum. |
layout.measure | 72 | observed · use | Reading measure in ch. |
motion.duration.base | 120ms | observed · use | No role description declared. |
motion.duration.fast | 80ms | observed · use | No role description declared. |
motion.duration.slow | 150ms | observed · use | The maximum. Reduced motion sets every duration to 0.01ms. |
radius.none | 0px | observed · use | The only radius. Nothing is rounded. |
shadow.floating | 0px 6px 22px 0px rgb(0 0 0 / 55%) | observed · use | The only shadow: the i3 floating window. |
space.0 | 0px | observed · use | No role description declared. |
space.1 | 1px | observed · use | No role description declared. |
space.12 | 12px | observed · use | No role description declared. |
space.16 | 16px | observed · use | No role description declared. |
space.2 | 2px | observed · use | No role description declared. |
space.24 | 24px | observed · use | No role description declared. |
space.32 | 32px | observed · use | No role description declared. |
space.4 | 4px | observed · use | No role description declared. |
space.48 | 48px | observed · use | No role description declared. |
space.8 | 8px | observed · use | No role description declared. |
z.canvas | 0 | observed · use | No role description declared. |
z.dialog | 30 | observed · use | No role description declared. |
z.drawer | 20 | observed · use | No role description declared. |
z.popover | 10 | observed · use | No role description declared. |
z.raised | 1 | observed · use | No role description declared. |
z.skip-link | 1000 | observed · use | No role description declared. |
z.toast | 40 | observed · use | No role description declared. |
heritage-ansi · heritage
| Role | Value | Eligibility | Documented use |
|---|---|---|---|
border.width.default | 1px | observed · historical-only | Every border is 1px. |
border.width.emphasis | 2px | observed · historical-only | Selected indicator, sticky header rule, invalid border. |
breakpoint.lg | 1280px | observed · historical-only | The site's bar breaks below this. |
breakpoint.md | 900px | observed · historical-only | No role description declared. |
breakpoint.sm | 600px | observed · historical-only | No role description declared. |
breakpoint.xs | 320px | observed · historical-only | Reflow floor (WCAG 1.4.10). |
color.action.destructive.border | #e53935 | observed · historical-only | Destructive button border. |
color.action.destructive.filled-bg | #dc282e | observed · historical-only | Confirm-dialog destructive fill. |
color.action.destructive.filled-text | #f9faf9 | observed · historical-only | Text on the destructive fill. |
color.action.destructive.hover-bg | #dc282e | observed · historical-only | Destructive button hover fill. |
color.action.destructive.hover-text | #f9faf9 | observed · historical-only | Destructive button text on hover (4.58:1). |
color.action.destructive.pressed-bg | #ae1914 | observed · historical-only | Destructive button pressed fill. |
color.action.destructive.text | #f73f35 | observed · historical-only | Destructive button text at rest (outline style). |
color.action.primary.bg | #7d1310 | approved · historical-only | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
color.action.primary.border | #9e231f | observed · historical-only | Primary button border. |
color.action.primary.hover-bg | #911410 | observed · historical-only | Primary button hover (7.92:1 with prose). |
color.action.primary.pressed-bg | #630f0d | observed · historical-only | Primary button pressed. |
color.action.primary.text | #f4eeee | observed · historical-only | Primary button text (9.28:1). |
color.action.secondary.bg | rgb(0 0 0 / 0%) | observed · historical-only | Secondary button has no fill. |
color.action.secondary.border | #a3676b | observed · historical-only | Secondary button border (meets 3:1). |
color.action.secondary.hover-bg | #630f0d | observed · historical-only | Secondary button hover. |
color.action.secondary.pressed-bg | #420f0c | observed · historical-only | Secondary button pressed. |
color.action.secondary.text | #ffa2a7 | observed · historical-only | Secondary button text. |
color.action.tertiary.hover-bg | #1c0a09 | observed · historical-only | Ghost and icon button hover. |
color.action.tertiary.text | #e99499 | observed · historical-only | Ghost and icon button text. |
color.border.active | #e53935 | observed · historical-only | Active or focused control border. |
color.border.control | #a3676b | proposed · historical-only | Form-control boundary (4.45:1, meets the 3:1 non-text minimum). |
color.border.default | #531310 | observed · historical-only | Decorative border (1.39:1; never the only edge of a control). |
color.border.disabled | #7d1310 | observed · historical-only | Disabled control border (exempt). |
color.border.divider | #2b0e0d | proposed · historical-only | Hairline between rows and sections. |
color.border.overlay | #ae1914 | heritage · historical-only | dunst frame_color. |
color.border.selected-indicator | #e53935 | observed · historical-only | 2px indicator bar on the selected tab or nav item. |
color.border.selected-indicator-inactive | #9e231f | observed · historical-only | Indicator bar when the container is not focused. |
color.border.strong | #9e231f | observed · historical-only | Emphasised 2px rule: sticky headers, section ends. |
color.chart.axis | #9e231f | observed · historical-only | Axis lines. |
color.chart.grid | #2b0e0d | observed · historical-only | Grid lines. |
color.chart.label | #bd787d | observed · historical-only | Axis labels. |
color.chart.series-1 | #ffa2a7 | observed · historical-only | First series. |
color.chart.series-2 | #f73f35 | observed · historical-only | Second series. |
color.chart.series-3 | #bd787d | observed · historical-only | Third series. |
color.chart.series-4 | #a3676b | observed · historical-only | Fourth series (non-text, 4.45:1). |
color.code.bg | #0c0909 | observed · historical-only | Editor background. |
color.code.bracket-match | #e53935 | observed · historical-only | Matching bracket 1px border. |
color.code.caret | #e99499 | observed · historical-only | Caret (Xresources *cursorColor). |
color.code.current-line | #1c0a09 | observed · historical-only | Current line background. |
color.code.gutter-bg | #0c0909 | observed · historical-only | Gutter background. |
color.code.gutter-rule | #2b0e0d | observed · historical-only | Rule between gutter and text. |
color.code.indent-guide | #531310 | observed · historical-only | Indent guides. |
color.code.line-number | #7d1310 | heritage · historical-only · deprecated | color8, as vim rendered line numbers. |
color.code.line-number-active | #e99499 | observed · historical-only | Line number of the current line. |
color.code.search-current-bg | #ffa2a7 | observed · historical-only | Current search match background. |
color.code.search-current-text | #0c0909 | observed · historical-only | Current search match text. |
color.code.search-match-bg | #630f0d | observed · historical-only | Other search matches. |
color.code.selection-bg | #420f0c | observed · historical-only | Editor selection background (muted text stays 4.71:1). |
color.code.syntax.attribute | #d4868b | observed · historical-only | Markup attributes. |
color.code.syntax.comment | #7d1310 | heritage · historical-only · deprecated | color8: comments and shebang in vim. |
color.code.syntax.constant | #d4868b | observed · historical-only | Constants and booleans. |
color.code.syntax.deprecated | #ad7175 | observed · historical-only | Deprecated symbol: line-through. |
color.code.syntax.escape | #d4868b | observed · historical-only | Escape sequences and regex, bold. |
color.code.syntax.function | #ffa2a7 | heritage · historical-only | color7: function calls, quotes, operators. |
color.code.syntax.heading | #e53935 | observed · historical-only | Markup headings (site .syntax-heading). |
color.code.syntax.invalid | #e53935 | observed · historical-only | Invalid text: wavy underline. |
color.code.syntax.keyword | #f73f35 | observed · historical-only | Keywords (Xresources color5 lineage). |
color.code.syntax.number | #d4868b | observed · historical-only | Numbers. |
color.code.syntax.operator | #ffa2a7 | heritage · historical-only | color7. |
color.code.syntax.property | #e53935 | observed · historical-only | Properties and keys (site .syntax-key). |
color.code.syntax.punctuation | #d4868b | heritage · historical-only | color3: parentheses, symbols, commas. |
color.code.syntax.string | #bd787d | observed · historical-only | Strings (color2 lineage). |
color.code.syntax.tag | #f73f35 | observed · historical-only | Markup tags. |
color.code.syntax.type | #b37175 | observed · historical-only | Types. |
color.code.syntax.variable | #ab1612 | heritage · historical-only · deprecated | color9: declarations and assignments. |
color.code.whitespace | #7d1310 | observed · historical-only | Rendered whitespace (decorative). |
color.diagnostic.error.bg | #2b0e0d | observed · historical-only | Error line background. |
color.diagnostic.error.stripe | #e53935 | observed · historical-only | Error stripe mark. |
color.diagnostic.error.text | #f73f35 | observed · historical-only | Error message text. |
color.diagnostic.error.underline | #e53935 | observed · historical-only | Error wavy underline. |
color.diagnostic.hint.underline | #ad7175 | observed · historical-only | Hint dotted underline. |
color.diagnostic.info.text | #7e9ebb | approved · historical-only | Info message text. |
color.diagnostic.info.underline | #7e9ebb | approved · historical-only | Info dotted underline. |
color.diagnostic.unused.text | #bd787d | observed · historical-only | Unused symbol, dotted underline. |
color.diagnostic.warning.stripe | #c9973f | approved · historical-only | Warning stripe mark. |
color.diagnostic.warning.text | #c9973f | approved · historical-only | Warning message text. |
color.diagnostic.warning.underline | #c9973f | approved · historical-only | Warning wavy underline. |
color.diff.added.bg | #0f1a0e | approved · historical-only | Added line background. |
color.diff.added.emphasis | #86a46f | approved · historical-only | Word-level addition: 2px underline. |
color.diff.added.gutter | #86a46f | approved · historical-only | Added gutter mark and +. |
color.diff.conflict-border | #f73f35 | observed · historical-only | Conflict block: double 1px border. |
color.diff.header-bg | #241010 | observed · historical-only | Hunk header background. |
color.diff.modified.bg | #1f1a0c | approved · historical-only | Modified line background. |
color.diff.modified.gutter | #c9973f | approved · historical-only | Modified gutter mark and ~. |
color.diff.removed.bg | #2b0e0d | observed · historical-only | Removed line background. |
color.diff.removed.emphasis | #e53935 | observed · historical-only | Word-level removal: underline and line-through. |
color.diff.removed.gutter | #e53935 | observed · historical-only | Removed gutter mark and −. |
color.icon.decorative | #a3676b | observed · historical-only | Decorative glyphs (3:1 as graphics, never text). |
color.icon.default | #e99499 | observed · historical-only | Icons take the text colour (currentColor in CSS). |
color.interaction.disabled.bg | #160b0b | observed · historical-only | Disabled control fill. |
color.interaction.drop-target | #e53935 | observed · historical-only | Dashed drop-target border. |
color.interaction.focus.ring | #e53935 | observed · historical-only | 1px dashed focus ring on controls and rows. |
color.interaction.focus.ring-container | #ffa2a7 | observed · historical-only | Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry. |
color.interaction.hover.bg | #1c0a09 | observed · historical-only | Hover on rows, ghost buttons, list items. |
color.interaction.hover.bg-strong | #630f0d | observed · historical-only | Hover on menu items; D-027 moved links to interaction.hover.bg. |
color.interaction.marquee | rgb(145 20 16 / 12%) | observed · historical-only | Drag marquee and ghost. |
color.interaction.pressed.bg | #420f0c | observed · historical-only | Pressed fill. |
color.interaction.scrollbar.thumb | #420f0c | observed · historical-only | Scrollbar thumb. |
color.interaction.scrollbar.thumb-hover | #911410 | observed · historical-only | Scrollbar thumb on hover. |
color.interaction.scrollbar.track | #0c0909 | observed · historical-only | Scrollbar track. |
color.interaction.selection.bg | #531310 | approved · historical-only | Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection. |
color.interaction.selection.inactive-bg | #420f0c | observed · historical-only | Selection while the container is not focused. |
color.interaction.selection.inactive-text | #e99499 | observed · historical-only | Text on the inactive selection (7.02:1). |
color.interaction.selection.text | #f4eeee | observed · historical-only | Text on the selection. |
color.interaction.text-selection.bg | #911410 | observed · historical-only | ::selection background. |
color.interaction.text-selection.text | #f4eeee | observed · historical-only | ::selection text. |
color.primitive.alpha.black-55 | rgb(0 0 0 / 55%) | observed · historical-only | Floating-window shadow. |
color.primitive.alpha.black-65 | rgb(0 0 0 / 65%) | observed · historical-only | Modal backdrop; unifies the site's 62–72% backdrops. |
color.primitive.alpha.red-12 | rgb(145 20 16 / 12%) | observed · historical-only | Drag marquee. |
color.primitive.alpha.red-6 | rgb(145 20 16 / 6%) | observed · historical-only | Wallpaper stripe. |
color.primitive.alpha.transparent | rgb(0 0 0 / 0%) | observed · historical-only | No fill. |
color.primitive.amber.500 | #c9973f | approved · historical-only | Warning text, border and fill (7.54:1 on canvas). |
color.primitive.amber.600 | #d6a24b | proposed · historical-only | Bright yellow slot in the extended terminal palette. |
color.primitive.amber.tint | #1f1a0c | approved · historical-only | Warning and modified backgrounds. |
color.primitive.ansi.0 | #0c0909 | observed · historical-only | color0 |
color.primitive.ansi.1 | #c81a1a | observed · historical-only | color1 |
color.primitive.ansi.10 | #ad2721 | observed · historical-only | color10 |
color.primitive.ansi.11 | #b37175 | observed · historical-only | color11 |
color.primitive.ansi.12 | #871f19 | observed · historical-only | color12 |
color.primitive.ansi.13 | #e82132 | observed · historical-only | color13 |
color.primitive.ansi.14 | #e0292f | observed · historical-only | color14 |
color.primitive.ansi.15 | #a3676b | observed · historical-only | color15 |
color.primitive.ansi.2 | #bd787d | observed · historical-only | color2 |
color.primitive.ansi.3 | #d4868b | observed · historical-only | color3 |
color.primitive.ansi.4 | #8c1212 | observed · historical-only | color4 |
color.primitive.ansi.5 | #f73f35 | observed · historical-only | color5 |
color.primitive.ansi.6 | #9e474a | observed · historical-only | color6 |
color.primitive.ansi.7 | #ffa2a7 | observed · historical-only | color7 |
color.primitive.ansi.8 | #7d1310 | observed · historical-only | color8 |
color.primitive.ansi.9 | #ab1612 | observed · historical-only | color9 |
color.primitive.blue.500 | #7e9ebb | approved · historical-only | Info text, border and fill (7.08:1 on canvas). |
color.primitive.blue.600 | #9ab3c9 | proposed · historical-only | Bright blue slot in the extended terminal palette. |
color.primitive.blue.tint | #0f141c | approved · historical-only | Info background. |
color.primitive.green.500 | #86a46f | approved · historical-only | Success text, border and fill (7.13:1 on canvas). |
color.primitive.green.600 | #7fbf7a | observed · historical-only | The greeter's systemd OK; bright green slot in the extended terminal palette. |
color.primitive.green.tint | #0f1a0e | approved · historical-only | Added-line background. |
color.primitive.ink.0 | #000000 | observed · historical-only | The desktop behind every window. |
color.primitive.ink.14 | #090707 | approved · historical-only | True Black / Rose surface primitive; D-023. |
color.primitive.ink.15 | #0a0707 | observed · historical-only | Sunken reading and detail panes. |
color.primitive.ink.20 | #0c0909 | observed · historical-only | Terminal and canvas background; Xresources color0 and *background. |
color.primitive.ink.25 | #100909 | observed · historical-only | Window chrome and title bars. |
color.primitive.ink.28 | #100c0c | approved · historical-only | True Black / Rose surface primitive; D-023. |
color.primitive.ink.30 | #160b0b | observed · historical-only | Default panel surface. |
color.primitive.ink.40 | #1c0a09 | observed · historical-only | Alternate chrome; hover rows; current line. |
color.primitive.ink.52 | #241010 | observed · historical-only | Raised surface: sticky headers, menus, popovers. |
color.primitive.ink.60 | #2b0e0d | observed · historical-only | Hairline divider; folds the site's six near-identical hairlines. |
color.primitive.paper.100 | #f9faf9 | observed · historical-only | Text on the critical toast. |
color.primitive.paper.90 | #f4eeee | observed · historical-only | Prose and on-fill text. |
color.primitive.red.100 | #531310 | observed · historical-only | Decorative hairline border. |
color.primitive.red.150 | #630f0d | observed · historical-only | Dark selection; dmenu selected background. |
color.primitive.red.200 | #7d1310 | observed · historical-only | Xresources color8. Never text. |
color.primitive.red.250 | #8c1212 | observed · historical-only | Xresources color4; i3 focused child border. |
color.primitive.red.300 | #871f19 | observed · historical-only | Xresources color12; the button fill. |
color.primitive.red.350 | #911410 | observed · historical-only | Selection fill. |
color.primitive.red.400 | #9e231f | observed · historical-only | Strong border; sticky header rule. |
color.primitive.red.450 | #ab1612 | observed · historical-only | Xresources color9. |
color.primitive.red.50 | #420f0c | observed · historical-only | Soft selection; inactive selection; scrollbar thumb. |
color.primitive.red.500 | #ad2721 | observed · historical-only | Xresources color10. |
color.primitive.red.550 | #ae1914 | observed · historical-only | dunst frame and conky accent. |
color.primitive.red.650 | #c81a1a | observed · historical-only | Xresources color1; i3 focused workspace background. |
color.primitive.red.750 | #dc282e | observed · historical-only | dunst critical background; link underline. |
color.primitive.red.760 | #e0292f | observed · historical-only | Xresources color14; i3 focused border. |
color.primitive.red.770 | #e82132 | observed · historical-only | Xresources color13. |
color.primitive.red.800 | #e53935 | observed · historical-only | Focus ring; active border; accent text on dark surfaces. |
color.primitive.red.850 | #f73f35 | observed · historical-only | Xresources color5; strong accent; danger text. |
color.primitive.rose.300 | #8a5559 | approved · historical-only | Disabled text (3.33:1 on canvas; exempt, at least 3:1 by policy). |
color.primitive.rose.320 | #9e474a | observed · historical-only | Xresources color6. |
color.primitive.rose.350 | #a3676b | observed · historical-only | Xresources color15; 4.45:1 on canvas, so not ordinary text. |
color.primitive.rose.450 | #ad7175 | approved · historical-only | Subtle text: metadata, comments, line numbers (5.10:1). |
color.primitive.rose.550 | #b37175 | observed · historical-only | Xresources color11. |
color.primitive.rose.600 | #bd787d | observed · historical-only | Xresources color2; muted text, the floor for chrome text (5.81:1). |
color.primitive.rose.650 | #d4868b | observed · historical-only | Xresources color3. |
color.primitive.rose.700 | #e99499 | observed · historical-only | Xresources *foreground; interface text. |
color.primitive.rose.800 | #ffa2a7 | observed · historical-only | Xresources color7; bright text, links, headings. |
color.status.danger.border | #e53935 | observed · historical-only | Danger border, 2px on invalid inputs. |
color.status.danger.fill | #dc282e | observed · historical-only | Danger fill. |
color.status.danger.on-fill | #f9faf9 | observed · historical-only | Text on the danger fill (4.58:1). |
color.status.danger.text | #f73f35 | observed · historical-only | Danger text (5.40:1). |
color.status.danger.tint | #2b0e0d | observed · historical-only | Danger background tint. |
color.status.info.border | #7e9ebb | approved · historical-only | Info border. |
color.status.info.fill | #7e9ebb | approved · historical-only | Info fill. |
color.status.info.on-fill | #0c0909 | approved · historical-only | Text on the info fill (7.08:1). |
color.status.info.text | #7e9ebb | approved · historical-only | Info text (7.08:1). |
color.status.info.tint | #0f141c | approved · historical-only | Info background tint. |
color.status.neutral.border | #a3676b | observed · historical-only | Neutral border. |
color.status.neutral.fill | #a3676b | heritage · historical-only | dunst urgency_low background. |
color.status.neutral.on-fill | #0c0909 | heritage · historical-only · deprecated | dunst urgency_low foreground. |
color.status.neutral.text | #bd787d | observed · historical-only | Neutral status text. |
color.status.neutral.tint | #241010 | observed · historical-only | Neutral background tint. |
color.status.success.border | #86a46f | approved · historical-only | Success border. |
color.status.success.fill | #86a46f | approved · historical-only | Success fill. |
color.status.success.on-fill | #0c0909 | approved · historical-only | Text on the success fill (7.13:1). |
color.status.success.text | #86a46f | approved · historical-only | Success text (7.13:1). |
color.status.success.tint | #0f1a0e | approved · historical-only | Success background tint. |
color.status.warning.border | #c9973f | approved · historical-only | Warning border. |
color.status.warning.fill | #c9973f | approved · historical-only | Warning fill. |
color.status.warning.on-fill | #0c0909 | approved · historical-only | Text on the warning fill (7.54:1). |
color.status.warning.text | #c9973f | approved · historical-only | Warning text (7.54:1). |
color.status.warning.tint | #1f1a0c | approved · historical-only | Warning background tint. |
color.surface.backdrop | rgb(0 0 0 / 65%) | proposed · historical-only | Behind modal dialogs. |
color.surface.canvas | #0c0909 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.chrome | #100909 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.chrome-alt | #1c0a09 | observed · historical-only | Alternate chrome. |
color.surface.code | #0c0909 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.default | #160b0b | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.desktop | #000000 | observed · historical-only | Behind every window. |
color.surface.input | #0c0909 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.overlay | #241010 | observed · historical-only | Dialogs and drawers. |
color.surface.raised | #160b0b | approved · historical-only | Sticky headers, menus, popovers; D-027 recessed it so an open list reads as depth rather than a lighter panel. |
color.surface.sunken | #0a0707 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.surface.terminal | #0c0909 | heritage · historical-only | Historical surface assignment retained across D-023. |
color.terminal.ansi.0 | #0c0909 | observed · historical-only | ANSI slot 0, exact heritage value. |
color.terminal.ansi.1 | #c81a1a | observed · historical-only | ANSI slot 1, exact heritage value. |
color.terminal.ansi.10 | #ad2721 | observed · historical-only | ANSI slot 10, exact heritage value. |
color.terminal.ansi.11 | #b37175 | observed · historical-only | ANSI slot 11, exact heritage value. |
color.terminal.ansi.12 | #871f19 | observed · historical-only | ANSI slot 12, exact heritage value. |
color.terminal.ansi.13 | #e82132 | observed · historical-only | ANSI slot 13, exact heritage value. |
color.terminal.ansi.14 | #e0292f | observed · historical-only | ANSI slot 14, exact heritage value. |
color.terminal.ansi.15 | #a3676b | observed · historical-only | ANSI slot 15, exact heritage value. |
color.terminal.ansi.2 | #bd787d | observed · historical-only | ANSI slot 2, exact heritage value. |
color.terminal.ansi.3 | #d4868b | observed · historical-only | ANSI slot 3, exact heritage value. |
color.terminal.ansi.4 | #8c1212 | observed · historical-only | ANSI slot 4, exact heritage value. |
color.terminal.ansi.5 | #f73f35 | observed · historical-only | ANSI slot 5, exact heritage value. |
color.terminal.ansi.6 | #9e474a | observed · historical-only | ANSI slot 6, exact heritage value. |
color.terminal.ansi.7 | #ffa2a7 | observed · historical-only | ANSI slot 7, exact heritage value. |
color.terminal.ansi.8 | #7d1310 | observed · historical-only | ANSI slot 8, exact heritage value. |
color.terminal.ansi.9 | #ab1612 | observed · historical-only | ANSI slot 9, exact heritage value. |
color.terminal.bg | #0c0909 | observed · historical-only | Terminal background. |
color.terminal.cursor | #e99499 | observed · historical-only | Terminal cursor. |
color.terminal.fg | #e99499 | observed · historical-only | Terminal foreground. |
color.terminal.selection-bg | #911410 | observed · historical-only | Terminal selection. |
color.terminal.selection-text | #f4eeee | observed · historical-only | Terminal selection text. |
color.text.accent | #e53935 | observed · historical-only | Accent text on canvas and default surfaces only. |
color.text.accent-strong | #f73f35 | observed · historical-only | Accent text safe on every surface. |
color.text.bright | #ffa2a7 | observed · historical-only | Headings and emphasis. Links use color.text.link. |
color.text.default | #e99499 | observed · historical-only | Interface and body text. |
color.text.disabled | #8a5559 | approved · historical-only | Disabled control text. |
color.text.inverse | #0c0909 | observed · historical-only | Text on inverted surfaces. |
color.text.link | #ffa2a7 | heritage · historical-only | Historical bright-rose link assignment before D-024. |
color.text.link-hover | #f4eeee | observed · historical-only | Link text on hover, over interaction.hover.bg-strong. |
color.text.link-underline | #dc282e | observed · historical-only | Link underline. |
color.text.muted | #bd787d | observed · historical-only | Secondary text; the darkest colour permitted for chrome text. |
color.text.on-action | #f4eeee | observed · historical-only | Text on the primary action fill. |
color.text.on-danger | #f9faf9 | observed · historical-only | Text on the danger fill. |
color.text.on-light | #0c0909 | observed · historical-only | Text on light fills: bright rose, amber, green, blue. |
color.text.on-selection | #f4eeee | observed · historical-only | Text on the selection fill. |
color.text.placeholder | #a3676b | approved · historical-only | Placeholder text, italic; D-027 darkened it to 4.71:1, just clear of the 4.5:1 floor. |
color.text.prose | #f4eeee | observed · historical-only | Long-form reading text. |
color.text.subtle | #a3676b | heritage · historical-only · deprecated | color15 as the site's --quiet. |
density.comfortable.control-height | 32px | observed · historical-only | No role description declared. |
density.comfortable.control-padding-x | 12px | observed · historical-only | No role description declared. |
density.comfortable.gap | 4px | observed · historical-only | No role description declared. |
density.comfortable.icon | 16px | observed · historical-only | No role description declared. |
density.comfortable.row-height | 36px | observed · historical-only | No role description declared. |
density.compact.control-height | 24px | observed · historical-only | No role description declared. |
density.compact.control-padding-x | 8px | observed · historical-only | No role description declared. |
density.compact.gap | 2px | observed · historical-only | No role description declared. |
density.compact.icon | 12px | observed · historical-only | No role description declared. |
density.compact.row-height | 28px | observed · historical-only | No role description declared. |
focus.offset | -2px | observed · historical-only | outline-offset for controls. |
focus.offset-container | -3px | observed · historical-only | outline-offset for containers. |
focus.offset-invalid | -4px | observed · historical-only | outline-offset inside the 2px invalid border. |
focus.ring | 1px dashed #e53935 | observed · historical-only | outline on controls and rows. |
focus.ring-container | 2px solid #ffa2a7 | observed · historical-only | outline on focusable containers. |
font.family.mono | "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace | observed · historical-only | One family for chrome, reading and code. Not bundled; see theme.json font. |
font.letter-spacing.terminal | -0.5px | observed · historical-only | URxvt letterSpace -1 at pixelsize 13, as the site renders it. |
font.line-height.caption | 16px | observed · historical-only | No role description declared. |
font.line-height.code | 19px | observed · historical-only | No role description declared. |
font.line-height.h1 | 28px | observed · historical-only | No role description declared. |
font.line-height.h2 | 24px | observed · historical-only | No role description declared. |
font.line-height.h3 | 18px | observed · historical-only | No role description declared. |
font.line-height.reading | 24px | observed · historical-only | No role description declared. |
font.line-height.terminal | 19px | observed · historical-only | No role description declared. |
font.line-height.ui-lg | 20px | observed · historical-only | No role description declared. |
font.line-height.ui-md | 18px | observed · historical-only | No role description declared. |
font.line-height.ui-sm | 16px | observed · historical-only | No role description declared. |
font.size.caption | 11px | observed · historical-only | Only with text.muted or lighter. |
font.size.code | 13px | observed · historical-only | No role description declared. |
font.size.h1 | 20px | observed · historical-only | No role description declared. |
font.size.h2 | 16px | observed · historical-only | No role description declared. |
font.size.h3 | 13px | observed · historical-only | No role description declared. |
font.size.reading | 15px | observed · historical-only | No role description declared. |
font.size.terminal | 13px | observed · historical-only | URxvt pixelsize 13. |
font.size.ui-lg | 14px | observed · historical-only | No role description declared. |
font.size.ui-md | 13px | observed · historical-only | No role description declared. |
font.size.ui-sm | 12px | observed · historical-only | No role description declared. |
font.weight.bold | 700 | observed · historical-only | No role description declared. |
font.weight.regular | 400 | observed · historical-only | No role description declared. |
icon.size.lg | 20px | observed · historical-only | No role description declared. |
icon.size.md | 16px | observed · historical-only | No role description declared. |
icon.size.sm | 12px | observed · historical-only | No role description declared. |
icon.stroke | 1.5px | observed · historical-only | SVG line icons, currentColor, no fill. |
layout.app-max | 1440px | observed · historical-only | Application layout maximum. |
layout.content-max | 680px | observed · historical-only | Reading column maximum. |
layout.measure | 72 | observed · historical-only | Reading measure in ch. |
motion.duration.base | 120ms | observed · historical-only | No role description declared. |
motion.duration.fast | 80ms | observed · historical-only | No role description declared. |
motion.duration.slow | 150ms | observed · historical-only | The maximum. Reduced motion sets every duration to 0.01ms. |
radius.none | 0px | observed · historical-only | The only radius. Nothing is rounded. |
shadow.floating | 0px 6px 22px 0px rgb(0 0 0 / 55%) | observed · historical-only | The only shadow: the i3 floating window. |
space.0 | 0px | observed · historical-only | No role description declared. |
space.1 | 1px | observed · historical-only | No role description declared. |
space.12 | 12px | observed · historical-only | No role description declared. |
space.16 | 16px | observed · historical-only | No role description declared. |
space.2 | 2px | observed · historical-only | No role description declared. |
space.24 | 24px | observed · historical-only | No role description declared. |
space.32 | 32px | observed · historical-only | No role description declared. |
space.4 | 4px | observed · historical-only | No role description declared. |
space.48 | 48px | observed · historical-only | No role description declared. |
space.8 | 8px | observed · historical-only | No role description declared. |
z.canvas | 0 | observed · historical-only | No role description declared. |
z.dialog | 30 | observed · historical-only | No role description declared. |
z.drawer | 20 | observed · historical-only | No role description declared. |
z.popover | 10 | observed · historical-only | No role description declared. |
z.raised | 1 | observed · historical-only | No role description declared. |
z.skip-link | 1000 | observed · historical-only | No role description declared. |
z.toast | 40 | observed · historical-only | No role description declared. |
extended · proposed
| Role | Value | Eligibility | Documented use |
|---|---|---|---|
border.width.default | 1px | observed · blocked | Every border is 1px. |
border.width.emphasis | 2px | observed · blocked | Selected indicator, sticky header rule, invalid border. |
breakpoint.lg | 1280px | observed · blocked | The site's bar breaks below this. |
breakpoint.md | 900px | observed · blocked | No role description declared. |
breakpoint.sm | 600px | observed · blocked | No role description declared. |
breakpoint.xs | 320px | observed · blocked | Reflow floor (WCAG 1.4.10). |
color.action.destructive.border | #e53935 | observed · blocked | Destructive button border. |
color.action.destructive.filled-bg | #dc282e | observed · blocked | Confirm-dialog destructive fill. |
color.action.destructive.filled-text | #f9faf9 | observed · blocked | Text on the destructive fill. |
color.action.destructive.hover-bg | #dc282e | observed · blocked | Destructive button hover fill. |
color.action.destructive.hover-text | #f9faf9 | observed · blocked | Destructive button text on hover (4.58:1). |
color.action.destructive.pressed-bg | #ae1914 | observed · blocked | Destructive button pressed fill. |
color.action.destructive.text | #f73f35 | observed · blocked | Destructive button text at rest (outline style). |
color.action.primary.bg | #7d1310 | approved · blocked | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
color.action.primary.border | #9e231f | observed · blocked | Primary button border. |
color.action.primary.hover-bg | #911410 | observed · blocked | Primary button hover (7.92:1 with prose). |
color.action.primary.pressed-bg | #630f0d | observed · blocked | Primary button pressed. |
color.action.primary.text | #f4eeee | observed · blocked | Primary button text (9.28:1). |
color.action.secondary.bg | rgb(0 0 0 / 0%) | observed · blocked | Secondary button has no fill. |
color.action.secondary.border | #a3676b | observed · blocked | Secondary button border (meets 3:1). |
color.action.secondary.hover-bg | #630f0d | observed · blocked | Secondary button hover. |
color.action.secondary.pressed-bg | #420f0c | observed · blocked | Secondary button pressed. |
color.action.secondary.text | #ffa2a7 | observed · blocked | Secondary button text. |
color.action.tertiary.hover-bg | #1c0a09 | observed · blocked | Ghost and icon button hover. |
color.action.tertiary.text | #e99499 | observed · blocked | Ghost and icon button text. |
color.border.active | #e53935 | observed · blocked | Active or focused control border. |
color.border.control | #a3676b | proposed · blocked | Form-control boundary (4.45:1, meets the 3:1 non-text minimum). |
color.border.default | #531310 | observed · blocked | Decorative border (1.39:1; never the only edge of a control). |
color.border.disabled | #7d1310 | observed · blocked | Disabled control border (exempt). |
color.border.divider | #2b0e0d | proposed · blocked | Hairline between rows and sections. |
color.border.overlay | #e53935 | proposed · blocked | Every floating layer's 1px border. |
color.border.selected-indicator | #e53935 | observed · blocked | 2px indicator bar on the selected tab or nav item. |
color.border.selected-indicator-inactive | #9e231f | observed · blocked | Indicator bar when the container is not focused. |
color.border.strong | #9e231f | observed · blocked | Emphasised 2px rule: sticky headers, section ends. |
color.chart.axis | #9e231f | observed · blocked | Axis lines. |
color.chart.grid | #2b0e0d | observed · blocked | Grid lines. |
color.chart.label | #bd787d | observed · blocked | Axis labels. |
color.chart.series-1 | #ffa2a7 | observed · blocked | First series. |
color.chart.series-2 | #86a46f | proposed · blocked | Second series in green. |
color.chart.series-3 | #c9973f | proposed · blocked | Third series in amber. |
color.chart.series-4 | #7e9ebb | proposed · blocked | Fourth series in blue. |
color.code.bg | #0c0909 | observed · blocked | Editor background. |
color.code.bracket-match | #e53935 | observed · blocked | Matching bracket 1px border. |
color.code.caret | #e99499 | observed · blocked | Caret (Xresources *cursorColor). |
color.code.current-line | #1c0a09 | observed · blocked | Current line background. |
color.code.gutter-bg | #0c0909 | observed · blocked | Gutter background. |
color.code.gutter-rule | #2b0e0d | observed · blocked | Rule between gutter and text. |
color.code.indent-guide | #531310 | observed · blocked | Indent guides. |
color.code.line-number | #ad7175 | approved · blocked | Line numbers (5.10:1; replaces the site's #7d1310). |
color.code.line-number-active | #e99499 | observed · blocked | Line number of the current line. |
color.code.search-current-bg | #ffa2a7 | observed · blocked | Current search match background. |
color.code.search-current-text | #0c0909 | observed · blocked | Current search match text. |
color.code.search-match-bg | #630f0d | observed · blocked | Other search matches. |
color.code.selection-bg | #420f0c | observed · blocked | Editor selection background (muted text stays 4.71:1). |
color.code.syntax.attribute | #c9973f | proposed · blocked | Markup attribute names in amber, against red tags. |
color.code.syntax.comment | #ad7175 | approved · blocked | Comments, italic (color8 lineage, corrected for contrast). |
color.code.syntax.constant | #c9973f | proposed · blocked | Constants in amber. |
color.code.syntax.deprecated | #ad7175 | observed · blocked | Deprecated symbol: line-through. |
color.code.syntax.escape | #c9973f | proposed · blocked | Escapes in amber so they read out of the green string around them. |
color.code.syntax.function | #c9973f | proposed · blocked | Function and method names in amber, distinct from the identifiers they act on. |
color.code.syntax.heading | #e53935 | observed · blocked | Markup headings (site .syntax-heading). |
color.code.syntax.invalid | #e53935 | observed · blocked | Invalid text: wavy underline. |
color.code.syntax.keyword | #f73f35 | observed · blocked | Keywords (Xresources color5 lineage). |
color.code.syntax.number | #c9973f | proposed · blocked | Numbers in amber. |
color.code.syntax.operator | #ffa2a7 | proposed · blocked | Operators in bright rose, separated from plain identifiers. |
color.code.syntax.property | #7e9ebb | proposed · blocked | Object properties in blue, matching the type family they belong to. |
color.code.syntax.punctuation | #b37175 | proposed · blocked | Punctuation recedes; it is structure, not content. |
color.code.syntax.string | #86a46f | proposed · blocked | Strings in green. |
color.code.syntax.tag | #f73f35 | observed · blocked | Markup tags. |
color.code.syntax.type | #7e9ebb | proposed · blocked | Types in blue. |
color.code.syntax.variable | #e99499 | observed · blocked | Variables and default text. |
color.code.whitespace | #7d1310 | observed · blocked | Rendered whitespace (decorative). |
color.diagnostic.error.bg | #2b0e0d | observed · blocked | Error line background. |
color.diagnostic.error.stripe | #e53935 | observed · blocked | Error stripe mark. |
color.diagnostic.error.text | #f73f35 | observed · blocked | Error message text. |
color.diagnostic.error.underline | #e53935 | observed · blocked | Error wavy underline. |
color.diagnostic.hint.underline | #ad7175 | observed · blocked | Hint dotted underline. |
color.diagnostic.info.text | #7e9ebb | approved · blocked | Info message text. |
color.diagnostic.info.underline | #7e9ebb | approved · blocked | Info dotted underline. |
color.diagnostic.unused.text | #bd787d | observed · blocked | Unused symbol, dotted underline. |
color.diagnostic.warning.stripe | #c9973f | approved · blocked | Warning stripe mark. |
color.diagnostic.warning.text | #c9973f | approved · blocked | Warning message text. |
color.diagnostic.warning.underline | #c9973f | approved · blocked | Warning wavy underline. |
color.diff.added.bg | #0f1a0e | approved · blocked | Added line background. |
color.diff.added.emphasis | #86a46f | approved · blocked | Word-level addition: 2px underline. |
color.diff.added.gutter | #86a46f | approved · blocked | Added gutter mark and +. |
color.diff.conflict-border | #f73f35 | observed · blocked | Conflict block: double 1px border. |
color.diff.header-bg | #241010 | observed · blocked | Hunk header background. |
color.diff.modified.bg | #1f1a0c | approved · blocked | Modified line background. |
color.diff.modified.gutter | #c9973f | approved · blocked | Modified gutter mark and ~. |
color.diff.removed.bg | #2b0e0d | observed · blocked | Removed line background. |
color.diff.removed.emphasis | #e53935 | observed · blocked | Word-level removal: underline and line-through. |
color.diff.removed.gutter | #e53935 | observed · blocked | Removed gutter mark and −. |
color.icon.decorative | #a3676b | observed · blocked | Decorative glyphs (3:1 as graphics, never text). |
color.icon.default | #e99499 | observed · blocked | Icons take the text colour (currentColor in CSS). |
color.interaction.disabled.bg | #160b0b | observed · blocked | Disabled control fill. |
color.interaction.drop-target | #e53935 | observed · blocked | Dashed drop-target border. |
color.interaction.focus.ring | #e53935 | observed · blocked | 1px dashed focus ring on controls and rows. |
color.interaction.focus.ring-container | #ffa2a7 | observed · blocked | Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry. |
color.interaction.hover.bg | #1c0a09 | observed · blocked | Hover on rows, ghost buttons, list items. |
color.interaction.hover.bg-strong | #630f0d | observed · blocked | Hover on menu items; D-027 moved links to interaction.hover.bg. |
color.interaction.marquee | rgb(145 20 16 / 12%) | observed · blocked | Drag marquee and ghost. |
color.interaction.pressed.bg | #420f0c | observed · blocked | Pressed fill. |
color.interaction.scrollbar.thumb | #420f0c | observed · blocked | Scrollbar thumb. |
color.interaction.scrollbar.thumb-hover | #911410 | observed · blocked | Scrollbar thumb on hover. |
color.interaction.scrollbar.track | #0c0909 | observed · blocked | Scrollbar track. |
color.interaction.selection.bg | #531310 | approved · blocked | Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection. |
color.interaction.selection.inactive-bg | #420f0c | observed · blocked | Selection while the container is not focused. |
color.interaction.selection.inactive-text | #e99499 | observed · blocked | Text on the inactive selection (7.02:1). |
color.interaction.selection.text | #f4eeee | observed · blocked | Text on the selection. |
color.interaction.text-selection.bg | #911410 | observed · blocked | ::selection background. |
color.interaction.text-selection.text | #f4eeee | observed · blocked | ::selection text. |
color.primitive.alpha.black-55 | rgb(0 0 0 / 55%) | observed · blocked | Floating-window shadow. |
color.primitive.alpha.black-65 | rgb(0 0 0 / 65%) | observed · blocked | Modal backdrop; unifies the site's 62–72% backdrops. |
color.primitive.alpha.red-12 | rgb(145 20 16 / 12%) | observed · blocked | Drag marquee. |
color.primitive.alpha.red-6 | rgb(145 20 16 / 6%) | observed · blocked | Wallpaper stripe. |
color.primitive.alpha.transparent | rgb(0 0 0 / 0%) | observed · blocked | No fill. |
color.primitive.amber.500 | #c9973f | approved · blocked | Warning text, border and fill (7.54:1 on canvas). |
color.primitive.amber.600 | #d6a24b | proposed · blocked | Bright yellow slot in the extended terminal palette. |
color.primitive.amber.tint | #1f1a0c | approved · blocked | Warning and modified backgrounds. |
color.primitive.ansi.0 | #0c0909 | observed · blocked | color0 |
color.primitive.ansi.1 | #c81a1a | observed · blocked | color1 |
color.primitive.ansi.10 | #ad2721 | observed · blocked | color10 |
color.primitive.ansi.11 | #b37175 | observed · blocked | color11 |
color.primitive.ansi.12 | #871f19 | observed · blocked | color12 |
color.primitive.ansi.13 | #e82132 | observed · blocked | color13 |
color.primitive.ansi.14 | #e0292f | observed · blocked | color14 |
color.primitive.ansi.15 | #a3676b | observed · blocked | color15 |
color.primitive.ansi.2 | #bd787d | observed · blocked | color2 |
color.primitive.ansi.3 | #d4868b | observed · blocked | color3 |
color.primitive.ansi.4 | #8c1212 | observed · blocked | color4 |
color.primitive.ansi.5 | #f73f35 | observed · blocked | color5 |
color.primitive.ansi.6 | #9e474a | observed · blocked | color6 |
color.primitive.ansi.7 | #ffa2a7 | observed · blocked | color7 |
color.primitive.ansi.8 | #7d1310 | observed · blocked | color8 |
color.primitive.ansi.9 | #ab1612 | observed · blocked | color9 |
color.primitive.blue.500 | #7e9ebb | approved · blocked | Info text, border and fill (7.08:1 on canvas). |
color.primitive.blue.600 | #9ab3c9 | proposed · blocked | Bright blue slot in the extended terminal palette. |
color.primitive.blue.tint | #0f141c | approved · blocked | Info background. |
color.primitive.green.500 | #86a46f | approved · blocked | Success text, border and fill (7.13:1 on canvas). |
color.primitive.green.600 | #7fbf7a | observed · blocked | The greeter's systemd OK; bright green slot in the extended terminal palette. |
color.primitive.green.tint | #0f1a0e | approved · blocked | Added-line background. |
color.primitive.ink.0 | #000000 | observed · blocked | The desktop behind every window. |
color.primitive.ink.14 | #090707 | approved · blocked | True Black / Rose surface primitive; D-023. |
color.primitive.ink.15 | #0a0707 | observed · blocked | Sunken reading and detail panes. |
color.primitive.ink.20 | #0c0909 | observed · blocked | Terminal and canvas background; Xresources color0 and *background. |
color.primitive.ink.25 | #100909 | observed · blocked | Window chrome and title bars. |
color.primitive.ink.28 | #100c0c | approved · blocked | True Black / Rose surface primitive; D-023. |
color.primitive.ink.30 | #160b0b | observed · blocked | Default panel surface. |
color.primitive.ink.40 | #1c0a09 | observed · blocked | Alternate chrome; hover rows; current line. |
color.primitive.ink.52 | #241010 | observed · blocked | Raised surface: sticky headers, menus, popovers. |
color.primitive.ink.60 | #2b0e0d | observed · blocked | Hairline divider; folds the site's six near-identical hairlines. |
color.primitive.paper.100 | #f9faf9 | observed · blocked | Text on the critical toast. |
color.primitive.paper.90 | #f4eeee | observed · blocked | Prose and on-fill text. |
color.primitive.red.100 | #531310 | observed · blocked | Decorative hairline border. |
color.primitive.red.150 | #630f0d | observed · blocked | Dark selection; dmenu selected background. |
color.primitive.red.200 | #7d1310 | observed · blocked | Xresources color8. Never text. |
color.primitive.red.250 | #8c1212 | observed · blocked | Xresources color4; i3 focused child border. |
color.primitive.red.300 | #871f19 | observed · blocked | Xresources color12; the button fill. |
color.primitive.red.350 | #911410 | observed · blocked | Selection fill. |
color.primitive.red.400 | #9e231f | observed · blocked | Strong border; sticky header rule. |
color.primitive.red.450 | #ab1612 | observed · blocked | Xresources color9. |
color.primitive.red.50 | #420f0c | observed · blocked | Soft selection; inactive selection; scrollbar thumb. |
color.primitive.red.500 | #ad2721 | observed · blocked | Xresources color10. |
color.primitive.red.550 | #ae1914 | observed · blocked | dunst frame and conky accent. |
color.primitive.red.650 | #c81a1a | observed · blocked | Xresources color1; i3 focused workspace background. |
color.primitive.red.750 | #dc282e | observed · blocked | dunst critical background; link underline. |
color.primitive.red.760 | #e0292f | observed · blocked | Xresources color14; i3 focused border. |
color.primitive.red.770 | #e82132 | observed · blocked | Xresources color13. |
color.primitive.red.800 | #e53935 | observed · blocked | Focus ring; active border; accent text on dark surfaces. |
color.primitive.red.850 | #f73f35 | observed · blocked | Xresources color5; strong accent; danger text. |
color.primitive.rose.300 | #8a5559 | approved · blocked | Disabled text (3.33:1 on canvas; exempt, at least 3:1 by policy). |
color.primitive.rose.320 | #9e474a | observed · blocked | Xresources color6. |
color.primitive.rose.350 | #a3676b | observed · blocked | Xresources color15; 4.45:1 on canvas, so not ordinary text. |
color.primitive.rose.450 | #ad7175 | approved · blocked | Subtle text: metadata, comments, line numbers (5.10:1). |
color.primitive.rose.550 | #b37175 | observed · blocked | Xresources color11. |
color.primitive.rose.600 | #bd787d | observed · blocked | Xresources color2; muted text, the floor for chrome text (5.81:1). |
color.primitive.rose.650 | #d4868b | observed · blocked | Xresources color3. |
color.primitive.rose.700 | #e99499 | observed · blocked | Xresources *foreground; interface text. |
color.primitive.rose.800 | #ffa2a7 | observed · blocked | Xresources color7; bright text, links, headings. |
color.status.danger.border | #e53935 | observed · blocked | Danger border, 2px on invalid inputs. |
color.status.danger.fill | #dc282e | observed · blocked | Danger fill. |
color.status.danger.on-fill | #f9faf9 | observed · blocked | Text on the danger fill (4.58:1). |
color.status.danger.text | #f73f35 | observed · blocked | Danger text (5.40:1). |
color.status.danger.tint | #2b0e0d | observed · blocked | Danger background tint. |
color.status.info.border | #7e9ebb | approved · blocked | Info border. |
color.status.info.fill | #7e9ebb | approved · blocked | Info fill. |
color.status.info.on-fill | #0c0909 | approved · blocked | Text on the info fill (7.08:1). |
color.status.info.text | #7e9ebb | approved · blocked | Info text (7.08:1). |
color.status.info.tint | #0f141c | approved · blocked | Info background tint. |
color.status.neutral.border | #a3676b | observed · blocked | Neutral border. |
color.status.neutral.fill | #a3676b | observed · blocked | Neutral fill (dunst urgency_low). |
color.status.neutral.on-fill | #000000 | observed · blocked | Text on the neutral fill (4.71:1). |
color.status.neutral.text | #bd787d | observed · blocked | Neutral status text. |
color.status.neutral.tint | #241010 | observed · blocked | Neutral background tint. |
color.status.success.border | #86a46f | approved · blocked | Success border. |
color.status.success.fill | #86a46f | approved · blocked | Success fill. |
color.status.success.on-fill | #0c0909 | approved · blocked | Text on the success fill (7.13:1). |
color.status.success.text | #86a46f | approved · blocked | Success text (7.13:1). |
color.status.success.tint | #0f1a0e | approved · blocked | Success background tint. |
color.status.warning.border | #c9973f | approved · blocked | Warning border. |
color.status.warning.fill | #c9973f | approved · blocked | Warning fill. |
color.status.warning.on-fill | #0c0909 | approved · blocked | Text on the warning fill (7.54:1). |
color.status.warning.text | #c9973f | approved · blocked | Warning text (7.54:1). |
color.status.warning.tint | #1f1a0c | approved · blocked | Warning background tint. |
color.surface.backdrop | rgb(0 0 0 / 65%) | proposed · blocked | Behind modal dialogs. |
color.surface.canvas | #000000 | approved · blocked | Page and terminal background. |
color.surface.chrome | #090707 | approved · blocked | Window chrome, title bars, bars. |
color.surface.chrome-alt | #1c0a09 | observed · blocked | Alternate chrome. |
color.surface.code | #000000 | approved · blocked | Editor background. |
color.surface.default | #100c0c | approved · blocked | Panels and cards. |
color.surface.desktop | #000000 | observed · blocked | Behind every window. |
color.surface.input | #000000 | approved · blocked | Form-control fill. |
color.surface.overlay | #241010 | observed · blocked | Dialogs and drawers. |
color.surface.raised | #160b0b | approved · blocked | Sticky headers, menus, popovers; D-027 recessed it so an open list reads as depth rather than a lighter panel. |
color.surface.sunken | #000000 | approved · blocked | Reading and detail panes set below the canvas. |
color.surface.terminal | #000000 | approved · blocked | Terminal background. |
color.terminal.ansi.0 | #0c0909 | proposed · blocked | Semantic ANSI slot 0. |
color.terminal.ansi.1 | #e53935 | proposed · blocked | Semantic ANSI slot 1. |
color.terminal.ansi.10 | #7fbf7a | proposed · blocked | Semantic ANSI slot 10. |
color.terminal.ansi.11 | #d6a24b | proposed · blocked | Semantic ANSI slot 11. |
color.terminal.ansi.12 | #9ab3c9 | proposed · blocked | Semantic ANSI slot 12. |
color.terminal.ansi.13 | #d4868b | proposed · blocked | Semantic ANSI slot 13. |
color.terminal.ansi.14 | #ffa2a7 | proposed · blocked | Semantic ANSI slot 14. |
color.terminal.ansi.15 | #f4eeee | proposed · blocked | Semantic ANSI slot 15. |
color.terminal.ansi.2 | #86a46f | proposed · blocked | Semantic ANSI slot 2. |
color.terminal.ansi.3 | #c9973f | proposed · blocked | Semantic ANSI slot 3. |
color.terminal.ansi.4 | #7e9ebb | proposed · blocked | Semantic ANSI slot 4. |
color.terminal.ansi.5 | #b37175 | proposed · blocked | Semantic ANSI slot 5. |
color.terminal.ansi.6 | #bd787d | proposed · blocked | Semantic ANSI slot 6. |
color.terminal.ansi.7 | #e99499 | proposed · blocked | Semantic ANSI slot 7. |
color.terminal.ansi.8 | #ad7175 | proposed · blocked | Semantic ANSI slot 8. |
color.terminal.ansi.9 | #f73f35 | proposed · blocked | Semantic ANSI slot 9. |
color.terminal.bg | #0c0909 | observed · blocked | Terminal background. |
color.terminal.cursor | #e99499 | observed · blocked | Terminal cursor. |
color.terminal.fg | #e99499 | observed · blocked | Terminal foreground. |
color.terminal.selection-bg | #911410 | observed · blocked | Terminal selection. |
color.terminal.selection-text | #f4eeee | observed · blocked | Terminal selection text. |
color.text.accent | #e53935 | observed · blocked | Accent text on canvas and default surfaces only. |
color.text.accent-strong | #f73f35 | observed · blocked | Accent text safe on every surface. |
color.text.bright | #ffa2a7 | observed · blocked | Headings and emphasis. Links use color.text.link. |
color.text.default | #e99499 | observed · blocked | Interface and body text. |
color.text.disabled | #8a5559 | approved · blocked | Disabled control text. |
color.text.inverse | #0c0909 | observed · blocked | Text on inverted surfaces. |
color.text.link | #f73f35 | approved · blocked | Strong red link text, distinct from rose body text and headings; retain the underline. |
color.text.link-hover | #f4eeee | observed · blocked | Link text on hover, over interaction.hover.bg-strong. |
color.text.link-underline | #dc282e | observed · blocked | Link underline. |
color.text.muted | #bd787d | observed · blocked | Secondary text; the darkest colour permitted for chrome text. |
color.text.on-action | #f4eeee | observed · blocked | Text on the primary action fill. |
color.text.on-danger | #f9faf9 | observed · blocked | Text on the danger fill. |
color.text.on-light | #0c0909 | observed · blocked | Text on light fills: bright rose, amber, green, blue. |
color.text.on-selection | #f4eeee | observed · blocked | Text on the selection fill. |
color.text.placeholder | #a3676b | approved · blocked | Placeholder text, italic; D-027 darkened it to 4.71:1, just clear of the 4.5:1 floor. |
color.text.prose | #f4eeee | observed · blocked | Long-form reading text. |
color.text.subtle | #ad7175 | approved · blocked | Metadata, comments, line numbers. |
density.comfortable.control-height | 32px | observed · blocked | No role description declared. |
density.comfortable.control-padding-x | 12px | observed · blocked | No role description declared. |
density.comfortable.gap | 4px | observed · blocked | No role description declared. |
density.comfortable.icon | 16px | observed · blocked | No role description declared. |
density.comfortable.row-height | 36px | observed · blocked | No role description declared. |
density.compact.control-height | 24px | observed · blocked | No role description declared. |
density.compact.control-padding-x | 8px | observed · blocked | No role description declared. |
density.compact.gap | 2px | observed · blocked | No role description declared. |
density.compact.icon | 12px | observed · blocked | No role description declared. |
density.compact.row-height | 28px | observed · blocked | No role description declared. |
focus.offset | -2px | observed · blocked | outline-offset for controls. |
focus.offset-container | -3px | observed · blocked | outline-offset for containers. |
focus.offset-invalid | -4px | observed · blocked | outline-offset inside the 2px invalid border. |
focus.ring | 1px dashed #e53935 | observed · blocked | outline on controls and rows. |
focus.ring-container | 2px solid #ffa2a7 | observed · blocked | outline on focusable containers. |
font.family.mono | "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace | observed · blocked | One family for chrome, reading and code. Not bundled; see theme.json font. |
font.letter-spacing.terminal | -0.5px | observed · blocked | URxvt letterSpace -1 at pixelsize 13, as the site renders it. |
font.line-height.caption | 16px | observed · blocked | No role description declared. |
font.line-height.code | 19px | observed · blocked | No role description declared. |
font.line-height.h1 | 28px | observed · blocked | No role description declared. |
font.line-height.h2 | 24px | observed · blocked | No role description declared. |
font.line-height.h3 | 18px | observed · blocked | No role description declared. |
font.line-height.reading | 24px | observed · blocked | No role description declared. |
font.line-height.terminal | 19px | observed · blocked | No role description declared. |
font.line-height.ui-lg | 20px | observed · blocked | No role description declared. |
font.line-height.ui-md | 18px | observed · blocked | No role description declared. |
font.line-height.ui-sm | 16px | observed · blocked | No role description declared. |
font.size.caption | 11px | observed · blocked | Only with text.muted or lighter. |
font.size.code | 13px | observed · blocked | No role description declared. |
font.size.h1 | 20px | observed · blocked | No role description declared. |
font.size.h2 | 16px | observed · blocked | No role description declared. |
font.size.h3 | 13px | observed · blocked | No role description declared. |
font.size.reading | 15px | observed · blocked | No role description declared. |
font.size.terminal | 13px | observed · blocked | URxvt pixelsize 13. |
font.size.ui-lg | 14px | observed · blocked | No role description declared. |
font.size.ui-md | 13px | observed · blocked | No role description declared. |
font.size.ui-sm | 12px | observed · blocked | No role description declared. |
font.weight.bold | 700 | observed · blocked | No role description declared. |
font.weight.regular | 400 | observed · blocked | No role description declared. |
icon.size.lg | 20px | observed · blocked | No role description declared. |
icon.size.md | 16px | observed · blocked | No role description declared. |
icon.size.sm | 12px | observed · blocked | No role description declared. |
icon.stroke | 1.5px | observed · blocked | SVG line icons, currentColor, no fill. |
layout.app-max | 1440px | observed · blocked | Application layout maximum. |
layout.content-max | 680px | observed · blocked | Reading column maximum. |
layout.measure | 72 | observed · blocked | Reading measure in ch. |
motion.duration.base | 120ms | observed · blocked | No role description declared. |
motion.duration.fast | 80ms | observed · blocked | No role description declared. |
motion.duration.slow | 150ms | observed · blocked | The maximum. Reduced motion sets every duration to 0.01ms. |
radius.none | 0px | observed · blocked | The only radius. Nothing is rounded. |
shadow.floating | 0px 6px 22px 0px rgb(0 0 0 / 55%) | observed · blocked | The only shadow: the i3 floating window. |
space.0 | 0px | observed · blocked | No role description declared. |
space.1 | 1px | observed · blocked | No role description declared. |
space.12 | 12px | observed · blocked | No role description declared. |
space.16 | 16px | observed · blocked | No role description declared. |
space.2 | 2px | observed · blocked | No role description declared. |
space.24 | 24px | observed · blocked | No role description declared. |
space.32 | 32px | observed · blocked | No role description declared. |
space.4 | 4px | observed · blocked | No role description declared. |
space.48 | 48px | observed · blocked | No role description declared. |
space.8 | 8px | observed · blocked | No role description declared. |
z.canvas | 0 | observed · blocked | No role description declared. |
z.dialog | 30 | observed · blocked | No role description declared. |
z.drawer | 20 | observed · blocked | No role description declared. |
z.popover | 10 | observed · blocked | No role description declared. |
z.raised | 1 | observed · blocked | No role description declared. |
z.skip-link | 1000 | observed · blocked | No role description declared. |
z.toast | 40 | observed · blocked | No role description declared. |