Aviune design system
Color
Two themes. Shared roles. Measured contrast.
Two themes. The same roles.
Dark is the default. Light has its own surface and text values. Use the role in your CSS so each theme gets the right color automatically.
Check a pairing.
Choose tokens from either theme, then try a different color if you need to investigate a new use. This sandbox leaves the website unchanged.
Your next Minecraft world.
#eff4ef on #101c20Meets AA for normal text
Meets AA for large text and essential UI
color: var(--text);
background: var(--page);The ratio uses WCAG relative luminance for these opaque colors. Normal text needs 4.5:1. Large text needs 3:1 at 24px regular or about 18.7px bold. Check focus, transparency and image backgrounds separately.
The palette, by purpose.
These values come from the same token source that generates the website’s stylesheet. The foreground and surface belong together.
Page
--pageThe page canvas. Use text or muted for content on it.
#101c20#f3f5f0Surface
--surfaceHover states and inset samples. Pair with text or muted.
#17282c#e7ede7Panel
--panelContained groups such as hosting details. Use sparingly to establish hierarchy.
#142428#e9eee7Text
--textHeadings, body copy and meaningful icons on page, surface or panel.
#eff4ef#172923Supporting text
--mutedDescriptions and secondary information. Keep essential text fully opaque.
#b0c0ba#52645dGlacier accent
--accentText links, selected navigation and focus rings. It does not mean a service is online.
#87d7bd#12604bAction fill
--actionPrimary action backgrounds. Always pair with action-text.
#b4e5d1#174f40Action text
--action-textContent on the action fill. Never substitute page text on a filled action.
#14372c#f5faf6Control border
--borderSupporting control edges. Focus uses accent; a border alone must not identify a control.
#496059#9aafa3Grouping border
--soft-borderFunctional separators and panel boundaries. Never use as text or the only state indicator.
#2b3d40#d4ded5color: var(--text);
background: var(--panel);
border: 1px solid var(--soft-border);