Theme tokens and presets
This is the reference behind Appearance: the colours Fledge calculates, the checks it runs and the built-in presets. The same file is used by the panel (live preview) and by the API (validation), so these tables are what the code does.
Colour tokens
Each token is a CSS custom property named --<token>. The first two columns are Fledge's own palettes; other palettes are calculated from an accent colour and a tint.
| Token | Used for | Fledge dark | Fledge light |
|---|---|---|---|
--bg | Page background | #0b0b0a | #f7f6f2 |
--surface | Cards and panels | #121211 | #fefdfb |
--surface-2 | Inputs, raised areas | #191917 | #f0efeb |
--surface-3 | Hover and pressed states | #22221f | #e7e5df |
--raised | Menus, dialogs, toasts | #161614 | #ffffff |
--border | Dividers and card borders | #23231f | #e3e2db |
--border-strong | Input and button borders | #31302b | #d1cfc8 |
--border-hover | Borders on hover | #3d3c36 | #bcbbb4 |
--text | Body text | #ece9e2 | #171611 |
--text-2 | Secondary text | #a4a199 | #4f4d47 |
--text-3 | Hints, placeholders, disabled text | #6f6d66 | #676762 |
--primary | Main button | #ebe5d6 | #201f1b |
--primary-hover | Main button on hover | #f6f1e5 | #34332e |
--primary-text | Text on the main button | #141310 | #fbfaf7 |
--accent | Links, focus rings, switches, highlights | #8fb596 | #36724b |
--on-accent | The knob of a switch that is on | #ffffff | #ffffff |
--ok | Success | #78c08a | #17703f |
--warn | Warning | #f0a832 | #80570a |
--bad | Error and delete | #f26a5c | #c1272d |
--busy | Busy and information | #86a4f0 | #2a56d6 |
--on-bad | Text on a solid delete button | #1d0b08 | #ffffff |
--seg-alt | Second colour in stacked bars | #6d8f74 | #598a69 |
--terminal-bg | Console and file editor background | #080807 | #100f0e |
--terminal-text | Console text | #d4d1c9 | #d3d1c9 |
--shadow-ink | Colour of shadows | #000000 | #4f4d47 |
--wash | Hover overlays (white on dark, black on light) | #ffffff | #000000 |
--gloss | Highlight on buttons | #ffffff | #ffffff |
--scrim | Dimmed backdrop behind dialogs | #050504 | #0e0d0b |
Soft and line variants (--accent-soft, --ok-soft, --warn-soft, --bad-soft, --busy-soft, --accent-line) are always mixed from their base colour in the stylesheet, so changing a base colour changes them too.
Readability checks
Every palette is checked before it can be saved. Cannot be saved means the pair fails the minimum; Warning only reports it. High contrast raises the minimums.
| Pair | Minimum | Minimum (high contrast) | If it fails |
|---|---|---|---|
| Text on the page background | 4.5:1 | 7:1 | Cannot be saved |
| Text on cards | 4.5:1 | 7:1 | Cannot be saved |
| Text on raised areas | 4.5:1 | 7:1 | Cannot be saved |
| Text in menus and dialogs | 4.5:1 | 7:1 | Cannot be saved |
| Secondary text on cards | 4.5:1 | 7:1 | Warning |
| Secondary text on the page background | 4.5:1 | 7:1 | Warning |
| Hints and placeholders on cards | 3:1 | 4.5:1 | Warning |
| Links and focus rings on cards | 3:1 | 7:1 | Cannot be saved |
| Links and focus rings on the page | 3:1 | 7:1 | Cannot be saved |
| Accent text under 4.5:1 is hard to read at small sizes | 4.5:1 | 4.5:1 | Warning |
| Text on the main button | 4.5:1 | 7:1 | Cannot be saved |
| Text on a delete button | 4.5:1 | 7:1 | Cannot be saved |
| Success colour on cards | 3:1 | 4.5:1 | Cannot be saved |
| Warning colour on cards | 3:1 | 4.5:1 | Cannot be saved |
| Error colour on cards | 3:1 | 4.5:1 | Cannot be saved |
| Busy colour on cards | 3:1 | 4.5:1 | Cannot be saved |
| Console text | 7:1 | 7:1 | Cannot be saved |
| The four status colours | Look different with red-green colour blindness | Warning |
Calculated palettes also keep hints and placeholders at 4.5:1 on every surface. The built-in Fledge dark palette is the exception: it keeps its original 3.6:1 for hints so that an untouched panel looks exactly as before, which is why the Fledge preset can show that row as a warning in the editor; every other preset, and High contrast, passes.
A chosen accent that is too dim is moved (lighter on dark, darker on light) until the first rows pass, and the editor says so. Only colours you pin yourself, or exotic combinations, can fail.
Presets
Every preset has a dark and a light palette. Choosing one also sets the font, corner radius and density shown.
| Preset | Description | Dark (page, accent) | Light (page, accent) | Font | Corners | Density |
|---|---|---|---|---|---|---|
| Fledge | Warm black with sage accents. The default. | #0b0b0a, #8fb596 | #f7f6f2, #36724b | Geist | 10 px | comfortable |
| Midnight | Blue-black with a sky accent. | #0a0b0d, #7cb7ff | #f3f6fb, #1d62c9 | Geist | 10 px | comfortable |
| Ember | Warm dark with an orange glow. | #0c0b0a, #f0955a | #f9f5f1, #ab4900 | Geist | 8 px | comfortable |
| Terminal | Black, phosphor green, monospace, square corners. | #0a0b0a, #58e07b | #f4f6f4, #117638 | Monospace | 0 px | compact |
| Paper | Warm white with a deep green accent. | #0b0b0a, #8fb596 | #f7f6f1, #2f6b46 | Geist | 10 px | comfortable |
| Snow | Cool, bright and quiet. | #0a0b0c, #7aa7ff | #f4f6f8, #2457d6 | Geist | 10 px | comfortable |
| Violet | Deep purple with a soft lilac accent. | #0b0b0c, #b69cff | #f6f5f9, #6a3fd1 | Geist | 10 px | comfortable |
| High contrast | Maximum separation (AAA text) for low vision. | #0b0b0b, #ffd84d | #f6f6f6, #003eb8 | Geist | 10 px | comfortable |
Fonts, sizes and shape
| Setting | Choices |
|---|---|
| Font | Geist (the fledge default); Inter (neutral and familiar); Atkinson Hyperlegible (designed for low vision); System font (whatever the device uses); Monospace (terminal look). Fonts are bundled with the panel; nothing is loaded from other sites. |
| Text size | 90%, 100%, 110%, 120% (--text-scale) |
| Corner radius | square, 4 px, 8 px, 10 px, 14 px, 18 px (--radius-scale, 10 px is 1) |
| Density | compact (0.88), comfortable (1), spacious (1.12) (--density, scales control and row heights) |