What actually changed
Devtool dark is the theme extracted from the MagicPath source. The two Coframe themes are the
same markup with data-ds set, and their values were read out of
Coframe-design-system.fig — variable sets, mode-matched aliases, and the fills on
the Buttons and Dashboard canvases. Coframe's system is light: every artboard on the
Dashboard components canvas is #ffffff, and the Grayscale set names its own steps
for a light UI — Gray 50 is Background, Gray 100 Borders, Gray 700
Primary text. The dark variant is the Editor components canvas, which really is
#171717; since the devtool is an editor surface, it is a fair question which of the
two it should follow, so both are here. The column below compares the light one.
The host page underneath is themed by neither — it belongs to the customer.
Surface & text
| Role | Devtool dark | Coframe DS · light | DS source |
|---|
| Page |
#0f0e10 |
#f9fafb |
Gray 50 — the set calls it Background |
|---|
| Panel surface |
#151416 |
#ffffff |
Gray 0 — White |
|---|
| Inset surface |
#1e1e20 |
#f2f4f7 |
Gray 100 |
|---|
| Raised surface |
#252528 |
#dde0e5 |
Gray 200 |
|---|
| Primary text |
#f4f3f6 |
#2f2f31 |
Gray 700 — Primary text |
|---|
| Secondary text |
#cbcacd |
#4d4d50 |
Gray 600 — Secondary text |
|---|
| Muted text |
#8a888d |
#6a6c71 |
Gray 500 |
|---|
| Border |
#2e2d31 |
#797a80 / 24% |
Borders — the DS ships one border weight |
|---|
| Elevation |
one soft drop shadow |
two-layer shadow, Gray 900 tint |
DERIVED — no shadow token in the Coframe sets, and a white panel over a light host page has to earn its edge |
|---|
Brand & status
| Role | Devtool dark | Coframe DS · light | DS source |
|---|
| Primary |
#7268f2 |
#5851ff |
Purple 400 — named “Primary” |
|---|
| Primary pressed |
lightened Primary |
#3e38dd |
Purple 500 — the ramp supplies its own state |
|---|
| Success |
#32c364 |
#01c521 |
Active Green |
|---|
| Danger |
#f8767a |
#ec5c5c |
Warning Red |
|---|
| Pending |
#efb146 |
#008eff |
System Blue — the DS has no amber |
|---|
Shape & type
| Role | Devtool dark | Coframe DS · light | DS source |
|---|
| Surface radius | 6px | 10px | radius-lg |
|---|
| Card radius | 5px | 8px | radius-md |
|---|
| Control radius | 4px | 6px | radius-sm |
|---|
| Badge radius | 3px | 4px | radius-xs |
|---|
| Button height | 30px | 32px | Buttons canvas — 24 / 32 / 40 |
|---|
| Body type | 13px / 1.5 | 14px / 20px | text-sm |
|---|
| Small type | 11.5px | 12px / 18px | text-xs |
|---|
| Display face | system sans | Roobert → Inter | font-family-display, plus 296 Roobert runs |
|---|
| Body face | system sans | Inter | font-family-body |
|---|
| Icons | hand-drawn 24-grid monoline | unchanged | the file ships Phosphor — not swapped in, see brand-spec |
|---|