Vanguard Design

Vanguard 1.0's charcoal and blue, organized into functional roles. Components use roles, never raw hex, so a role can be retuned in one place. Every text role clears WCAG AA on every background.

JetBrains Mono everywhere, as in Vanguard 1.0: team numbers, scores and timestamps align in columns without extra work. The scale is anchored at 13px for dense, data-heavy screens.

Four radii and three shadows. Controls are 6px, floating panels 8px. Shadows only appear on things that float; resting surfaces separate by border and tone.

One primary action per view. Secondary is the default. Danger stays quiet until hovered, so the destructive option never has the most visual weight. Loading keeps focus on the button and blocks repeat clicks.

A square button with an icon and a required label. The label becomes the accessible name and appears as a tooltip on hover and keyboard focus.

Actions on a thing, not navigation. Full keyboard support: arrows move, typing jumps, Escape closes. Group related items, put destructive ones last behind a separator.

Single-line text. Inputs sit in an inset well so they read as fillable on any surface. Focus adds a blue edge and halo; errors swap both to red and never rely on color alone (see Field).

Wraps a control with its label, help text and error, and wires up id, aria-describedby and aria-invalid for you. Errors pair color with an icon and a message that says how to fix it.

Multi-line text. Resizes vertically by default; `autosize` grows with the content instead.

Independent on/off choices that take effect on submit. The label is part of the hit target. Indeterminate shows a parent whose children are partly selected.

A setting that applies immediately, like a light switch. If the change needs a Save button, use a Checkbox instead.

One choice from a short list, all options visible. Arrow keys move the selection. For more than about five options, use a Select.

Pick one option from a list too long to show at once. Typeahead works while the trigger is focused, even closed. Options can carry a description and be disabled.

Switch between views of the same content. Always has exactly one selection; clicking the active segment does nothing. For separate content panels, use Tabs.

Pick a value from a continuous range where the exact number matters less than the position. Pair with a visible value; arrow keys step, Page Up/Down jump.

Switch between related panels without leaving the page. The underline marks the active tab, as in Vanguard 1.0's admin nav; counts summarize what's inside. Arrow keys move between tabs.

Stacked sections that expand in place, for secondary detail people only sometimes need. Don't hide anything required to finish a task.

Focused tasks that need the page to wait. Focus moves in and is trapped; Escape, the ✕ and clicking outside close it. Keep the primary action last in the footer.

Interrupts to confirm a consequential action. Name the button after the action (“Delete note”, not “OK”). The confirm can be async: it shows progress and the dialog waits.

Non-modal floating content anchored to a trigger: quick settings, previews, small forms. Closes on Escape or outside click, and focus returns to the trigger.

A short text label for a control, shown on hover and keyboard focus. Never put essential information or interactive content in one. Once one tooltip opens, neighbors open instantly.

Compact status and metadata, from Vanguard's W/L/T match pills. Subtle is the default; solid is for the one thing on screen that must pop. Red and blue are alliance colors, not status.

An inline message about the page or a section. Icon, color and text carry the tone together. Say what happened and what to do next.

Progress of a known amount of work, or an indeterminate bar when the length is unknown, like Vanguard's status bar loader. Label it, or give it an aria-label.

For short waits in a small space. Prefer a Progress bar or a skeleton for anything that fills a region.

Groups related content on a surface. The optional stripe marks a category, such as the alliance a card belongs to, as in Vanguard's match details.

Circles for people, rounded squares for teams. Falls back to initials while the image loads or if it fails.

A 1px divider between groups. Decorative by default; set decorative=false when it separates meaningful sections.

Keyboard keys in hints and menus.