Skip to content

dashboard tokens: the radius, scrim, type scale and motion, and labels that read on their fills - #14

Merged
aledbf merged 1 commit into
mainfrom
console-tokens
Oct 22, 2026
Merged

aledbf merged 1 commit into
mainfrom
console-tokens

Conversation

@aledbf

@aledbf aledbf commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

The dashboard took one thing from the palette besides its colors, a
radius, and wrote the rest by hand: a 13 px body against a palette that
said 14, its own easings, five border alphas, three dims behind dialogs.
dashboard.css now carries what the console redesign builds on:

  • the radius, 4 px, for every corner of the dashboard, dialogs included
    (radius and radius_lg are the site's);
  • --scrim, the navy at [tint] scrim, the only dim behind a dialog;
  • the dense type scale by Tailwind's names, each step a size and a line
    (dense_scale), and dense_size at 13, the body the dashboard ships;
  • the heading tracking, the motion durations and the easing;
  • --error and --label, which the palette had and the dashboard did not;
  • a neutral --accent: hover and the navigation's selection are the
    surface a step off the page; the accent is the primary action's and
    the focus ring's alone.

on() picked a label for a fill by comparing it with the page, and on the
light page - white - against white too, so it always chose dark text:
2.9:1 on the light success and warning fills, and the destructive label
was white by fiat (3.2:1 in dark would have been the dark ink's). It now
picks between white and the theme's darkest ink, and a test holds every
--*-foreground at 4.5:1 on its fill in both themes; with the old on() it
fails on four.

palette.toml says the decisions: sans page titles in the dashboard, mono
for identifiers and the site's headings, the accent tint as the site's.

First PR of the console redesign (Phase 0 review: https://claude.ai/artifact/LFmjpePjpgSLAifFpzrPkC). The dashboard consumes these after kiss/dashboard lands.

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

…s that read on their fills

The dashboard took one thing from the palette besides its colors, a
radius, and wrote the rest by hand: a 13 px body against a palette that
said 14, its own easings, five border alphas, three dims behind dialogs.
dashboard.css now carries what the console redesign builds on:

- the radius, 4 px, for every corner of the dashboard, dialogs included
  (radius and radius_lg are the site's);
- --scrim, the navy at [tint] scrim, the only dim behind a dialog;
- the dense type scale by Tailwind's names, each step a size and a line
  (dense_scale), and dense_size at 13, the body the dashboard ships;
- the heading tracking, the motion durations and the easing;
- --error and --label, which the palette had and the dashboard did not;
- a neutral --accent: hover and the navigation's selection are the
  surface a step off the page; the accent is the primary action's and
  the focus ring's alone.

on() picked a label for a fill by comparing it with the page, and on the
light page - white - against white too, so it always chose dark text:
2.9:1 on the light success and warning fills, and the destructive label
was white by fiat (3.2:1 in dark would have been the dark ink's). It now
picks between white and the theme's darkest ink, and a test holds every
--*-foreground at 4.5:1 on its fill in both themes; with the old on() it
fails on four.

palette.toml says the decisions: sans page titles in the dashboard, mono
for identifiers and the site's headings, the accent tint as the site's.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@aledbf
aledbf merged commit c196604 into main Oct 22, 2026
2 checks passed
@aledbf
aledbf deleted the console-tokens branch October 22, 2026 22:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant