aphrody — Material 3 design tokens
The aphrody GUI design system, expressed as Material 3 tokens. Derived from the Material 3 Design Kit (Figma community file 1035203688168086460, duplicated as the local “Aphrody” file and exported to .fig) and the aphrody brand (rust #CE422B, dark surfaces). Use these for the GUI built in apps/photoshop-uxp / the Figma file and any future native UI.
Source assets: the kit’s 89 raster assets are extracted to
var/aphrody-fig/typed/(gitignored). The kit’s component catalog is the standard M3 set (Buttons, Chips, Cards, Dialogs, Navigation, FAB, Text fields, Switches, Sliders, Lists, Snackbars, Tabs, Top app bars, …).
Color roles — dark scheme (default)
aphrody ships dark-first. Canonical values generated by Google’s Material Theme Builder engine (@material/material-color-utilities, SchemeTonalSpot) from seed #CE422B — M3 tints the surfaces with the rust hue and lightens the seed for dark-theme contrast. Full light+dark JSON: var/m3theme/aphrody-m3-theme.json.
| M3 role | Hex | Use |
|---|---|---|
primary | #FFB4A6 | primary actions, active states (rust @ tone 80 for dark contrast) |
on-primary | #561E14 | text/icons on primary |
primary-container | #733428 | filled containers, emphasised chips |
on-primary-container | #FFDAD3 | text on primary-container |
brand-rust | #CE422B | the literal brand accent / seed (logo dot, Run button) |
secondary | #E7BDB5 | secondary accents |
secondary-container | #5D3F3A | secondary fills |
tertiary | #DCC48C | highlight / “hair gold” accent (auto-derived) |
on-tertiary | #3D2E04 | text on tertiary |
tertiary-container | #554519 | tertiary fills |
error | #FFB4AB | errors |
error-container | #93000A | error fills |
surface / background | #1A1110 | base app surface (warm-tinted ink) |
surface-dim | #1A1110 | dimmest surface |
surface-bright | #423735 | brightest surface |
surface-container-lowest | #140C0B | terminal/card panels |
surface-container-low | #231918 | low containers |
surface-container | #271D1C | title bar, input bar |
surface-container-high | #322826 | hovered fills |
surface-container-highest | #3D3230 | active fills |
on-surface | #F1DFDB | primary text |
surface-variant | #534340 | variant surface |
on-surface-variant | #D8C2BD | muted text, labels, placeholders |
outline | #A08C89 | borders, dividers |
outline-variant | #534340 | subtle separators |
inverse-surface | #F1DFDB | inverse (snackbars) |
inverse-primary | #904B3E | inverse primary |
shadow / scrim | #000000 | shadows, scrims |
success | #7CCF8A | terminal “ok” lines (aphrody extension, not core M3) |
The earlier hand-tuned mockups used flatter inks (
#0F0F0F/#1E1E1E); the canonical M3 surfaces above are warm-tinted toward the rust hue. Prefer the canonical values for new work; both read as “near-black dark”.
Type scale (M3, Roboto / Roboto Mono for code)
| Style | Size / line-height | Weight | |
|---|---|---|---|
| Display Large | 57 / 64 | 400 | |
| Display Medium | 45 / 52 | 400 | |
| Display Small | 36 / 44 | 400 | |
| Headline Large | 32 / 40 | 400 | |
| Headline Medium | 28 / 36 | 400 | |
| Headline Small | 24 / 32 | 400 | |
| Title Large | 22 / 28 | 400 | |
| Title Medium | 16 / 24 | 500 | |
| Title Small | 14 / 20 | 500 | |
| Body Large | 16 / 24 | 400 | |
| Body Medium | 14 / 20 | 400 | |
| Body Small | 12 / 16 | 400 | |
| Label Large | 14 / 20 | 500 | |
| Label Medium | 12 / 16 | 500 | |
| Label Small | 11 / 16 | 500 | |
| Code (aphrody) | 14 / 22 | 400 — Roboto Mono | terminal panel |
Shape scale
| Token | Radius |
|---|---|
corner-none | 0 |
corner-extra-small | 4 |
corner-small | 8 |
corner-medium | 12 |
corner-large | 16 |
corner-extra-large | 28 |
| window / panels (aphrody) | 18 |
Elevation (dark, tonal)
M3 dark uses surface-tint overlays rather than heavy shadows. aphrody panels sit on surface-container-* tones (above) with an optional 1px outline-variant border instead of a drop shadow; the mascot panel uses a 10%-opacity brand-rust spotlight fill.
Provenance
- Kit: Material 3 Design Kit (Google), Figma community, Apache-2.0 usage.
- Brand rust
#CE422B+ dark inks: aphrody (see the GUI built in the Figma “Aphrody” file andapps/photoshop-uxp). - Full canonical M3 spec: https://m3.material.io. These tokens are the aphrody-tuned subset; defer to the spec for components not listed.