The full Hugeicons free set - 6,156 icons from @outbuild/icons. Search by name; click an icon to copy its id, or shift-click to copy its SVG.
Semantic color tokens (DS-1). Brand violet is the interactive accent (D4). Feedback-warning and feedback-info are new locked tokens. All flip with the theme.
Surface & text
Accent & feedback
Role badges (the shared 8-role axis)
Locked scale (D1): badge 3, control 6, container 10, full pill. Controls squared up from 4 to 6; containers from 8 to 10.
Control heights and the 4px spacing grid, spelled-out (D2): xsmall 20 / small 26 / medium 32 / large 40.
Control heights
Spacing (4px grid)
Inter for UI, SF Mono for code. Weights 400 / 500 / 600 / 700. Sentence case everywhere (Principle 7) - no all-caps.
The base glyph behind every leading/trailing slot. Color inherits currentColor; size is the only variant.
Color inherits the parent
The 7-Type ladder (D6). Base names are neutral; the colored siblings use brand. Primary is brand - the main CTA.
Type ladder
Sizes
With icons, icon-only, loading, disabled
Inverted (on a dark premium surface)
A field group: label, box, helper. Focus ring is brand (D4); error turns helper red. Mandatory shows "Label", optional shows "Label (Optional)".
States
With label, leading icon & helper
Used to derive the full scale.
Sizes
A read-only trigger with a trailing chevron; clicking opens the Menu. Box tokens match Input.
States
With label & leading icon
The Input field group, multi-line. Same tokens and focus behaviour; optional character counter and resize grip.
Describe the system you want.
68 / 280
A small label. Type splits into tag / role / count; Role is the shared 8-role axis, Category is the collection-type palette. Sentence case, radius 3.
Role
Category (collection types)
Count, with icon, small
A compact pill. Removable = a trailing x; selectable = a selected State; static neither. A represented color sits in the leading slot as a swatch.
States
With leading swatch & trailing remove
A 1px line in border-default. Horizontal or vertical; reused by menus, sections and toolbars.
Track + thumb. On-track is brand (D4). With a label it becomes an auto-layout row; label can sit left or right.
States & sizes
With label
Square box (radius 4) with check or dash. Checked fill is brand (D4).
Circle with an inner dot when selected; the ring and dot are brand. Grouped into a single-select stack.
A [-] value [+] numeric control. The buttons are icon-only secondary buttons; bounds disable the matching button. Not brand-accented.
Track + filled portion + thumb, all brand. Used by the channel sliders in the color editor.
Initials, image or icon; circle or rounded; neutral background by default. Used for collections and the user profile.
A color tile - the product's core atom. The fill is the color itself (utility, not a token). Selected shows a brand ring; an optional hairline border keeps light fills legible.
Sizes & shape
Selected, border, gradient
Loading indicator; color inherits currentColor. Ring and dots are indeterminate; progressive fills to a percentage with rounded caps.
A horizontal determinate bar with rounded ends. Tone is brand by default; warning and danger signal a limit (the trial meter uses these).
Brand - 64%
Warning - 85%
Danger - 96% (near the limit)
A muted loading placeholder with a shimmer. Shapes: line / text / block / circle / pill.
A tiny non-interactive hint: dark background, inverse text, optional pointer arrow. Distinct from Popover (which holds interactive content).
A draggable handle for split panes (e.g. the AI dock). Hover and dragging show a brand line.
A small image thumbnail with an optional remove button - used by AI attachments.
A scrollable container with edge fades and a thin styled scrollbar - the consistent scroll treatment across the UI.
A list of action rows in a raised container (radius 10). Items carry leading/trailing icons; selected is brand, danger is its own type, with dividers between groups.
Two types: underline nav tabs (brand underline on the active tab) and a segmented pill control.
Underline
Segmented
The canonical horizontal row: leading slot + label (+ secondary line) + trailing slot. Selected is a brand highlight. Composes other components in its slots.
One container primitive (radius 10). Standard puts an icon over a title and description; panel uses a header bar then a body. Background tone is applied per context.
Turn one base color into a full, accessible scale.
A centered dialog over a blocking scrim; flex-column so the body scrolls between a sticky header and footer (radius 10). One unified Modal across the plugin.
A floating panel for arbitrary content (vs Menu's action rows). Header, close, footer and scroll are booleans; the body is a slot.
Generated 2 minutes ago
An inline contextual message toned by status: a subtle tinted box with a status icon. Distinct from Banner. Tones: info / success / warning / danger.
Heads up
This palette has two near-identical greens.
System applied to the file.
Contrast on grade 300 is below AA for body text.
Couldn't reach the AI service. Retry.
A prominent full-width notice with a real CTA button - more prominent than Alert. A full subtle tint and full border, no single-sided accent (Principle 8).
A single collapsible section: a header with a trailing chevron and a collapsible body. A group is a stack of these.
A centered placeholder for an empty area: icon, title, description and an optional CTA button.
No collections yet
Create your first token collection to get started.
A multi-step indicator: nodes plus connectors. Completed and current are brand; upcoming is muted. The connector is brand up to the current step.
A monospace viewer with an optional header (filename + copy/download). The syntax palette stays utility.
"brand-500": { "$value": "#5b5bd6", "$type": "color" }
A searchable, grouped selector for a token reference - the one canonical picker. Composes Input + List item + Swatch + Popover.
Primitives
A row of actions (mostly icon buttons) with an optional title and group dividers. Composes Button + Divider.
A label + value metric, stacked or inline. Used in harmony stats, the contrast summary and palette metadata.
The AI composer (promoted from bespoke): an auto-grow field with an attachments row, a leading action and a brand send button. Focus border is brand.
One conversation turn. Assistant is left-aligned plain content (no bubble, no avatar) with a header + feedback row; user is a right-aligned neutral bubble with a squared corner.
A horizontal row of color stops - the reusable inline palette. Layout strip is a row; stack is overlapping swatches capped with a +N count (for pasted-color echoes).
Strip - seamless & gapped
Stack
+5The assistant's prose vehicle - a structured rich-text block with paragraphs, lists, bold, inline code and inline hex chips.
The ramp keeps an even perceptual step using OKLCH lightness.
The primary token is #5b5bd6.
A 2-D grid of swatches (vs the 1-D strip), optionally selectable with headers. Powers the Tailwind picker and the all-grades docs grid.
The grid primitive. List layout is rows of fields; matrix is an N x N cross-grid - it powers the WCAG contrast matrix with swatch headers and contrast-badge cells.
| White | Slate | Ink | |
|---|---|---|---|
| Brand | 7.1 | 5.2 | 2.8 |
| Success | 4.9 | 2.6 | 1.4 |
Visualizes a token's resolution: Component to Semantic to Alias to Primitive to #hex, with tier dots. The terminal node is the emphasized resolved color.
Shows what changed in place (corner-peek): the after palette, where each changed stop carries a folded corner of its previous color. Apply / Reject actions.
A staged-progress visualization for multi-step AI work: the token architecture assembles bottom-up, each tier solidifying as it completes.
Proactive next steps at the end of a turn. Because a suggestion becomes the user's next message, each is an outgoing ghost bubble (right-aligned, dashed brand).
A prompt echo or quoted reference that grounds a multi-part answer. Muted tint, no left-border accent (Principle 8).
You asked
Pull a palette from this brand and make it accessible.
A preview of a pasted URL or an AI citation: favicon or thumbnail, title and domain. Compact or rich layout.
Refactoring UI - color palettes
refactoringui.com