Design system
The violet and the near-black, and the components that carry them. Every value below is read from the running theme rather than restated, so this page cannot lie about what the site actually uses.
No token has fallen back to Nuxt UI's slate — semantic tokens and the neutral ramp underneath.
Brand
Violet is the only accent. Anything active, selected or primary wears it.
Neutral ramp
What every raw `text-neutral-400` / `bg-neutral-800` utility resolves through. The semantic tokens above sit ON TOP of this: overriding them does not reach these, which is how 205 utilities stayed slate long after the theme looked fixed. Set once by `ui.colors.neutral` in app.config.
Surfaces
Deepest to highest. The near-black leans very slightly violet — blue channel a few points over red — never blue-grey.
Borders
Translucent white rather than an opaque colour, so a border takes the tone of whatever is under it instead of contradicting it.
Text
The zinc scale, the same one the theme’s own --fg-* variables use. The site ran two parallel neutral scales and only one of them was ours.
Status
Four statuses, four well-separated hues. `info` is cyan rather than blue — Tailwind’s blue read as a framework default.
Typography
Two faces. Gilroy Black for headings — heavy, uppercase. Proxima Nova for everything else.
Gilroy Black · var(--title-font-family)
FLAVIBOT
Proxima Nova · var(--default-font-family)
The Discord bot that does everything
Music, moderation, levels, tickets and automations.
Secondary copy, in text-muted.
A piece of metadata, in text-dimmed.
Motion
Three durations, and what is moving decides which: fast for something the pointer is touching, base for something entering or leaving, slow only for something crossing the whole viewport. Longer than that is decoration and needs a reason.
Curves: --ease-out-quart by default, --ease-spring for an arrival.
Badges
Fields
The Nuxt UI components and the project's own, side by side.
UFormField — the site's most used wrapper (649 uses)
What members type before a command.
Variable-aware fields in-house
A textarea that knows the bot's variables: it colours them, completes them as you type, and flags the ones that do not exist.
Field group
Controls
Pickers
Both in-house pickers wrap a Nuxt UI component to give it the project's API: a plain string as v-model, a clear button, three sizes.
2026-08-21T20:30 — local wall clock, like a datetime-local.#947cea.The Nuxt UI components underneath
UCalendar
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
UColorPicker
Overlays
A tooltip explains, a popover holds a control, a modal asks for a decision, a slideover takes a whole form.
Data
Table
| Rule | Trigger | Runs |
|---|---|---|
| Anti-link | Message | 1284 |
| Welcome | Member join | 312 |
| Honeypot | Message | 27 |
Avatars
fAccordion and collapsible
Timeline
Separator
Loading skeletons
Feedback
An error stays on screen carrying its code; the toast is reserved for success. The full bench, with all ten error classes, is at /dashboard/<server>/test.
UAlert
Progress
The dashboard's page states in-house
This page could not load its settings
A feature pull failed
Icons
Six collections are bundled locally — no network request, but every icon used grows the client bundle. material-symbols is the dashboard's default set.
Keys
Shape and depth
--ui-radius is 6px. A colour bar sits on a corner of 4px or less, Discord-embed style — never a thin rail down a rounded card.