Aviune design system
Foundations
Layout, accessibility and rules for building.
The rules behind the interface.
Start with the existing component
Reuse TextLink for destinations and Disclosure for expandable content. Use native buttons for actions. Keep essential content readable before JavaScript loads.
Use color by role
Use semantic variables, not copied hex values. Pair action with action-text. Accent identifies links and focus. A color alone never communicates availability or an error.
Design both themes
Dark is the first-visit default. The theme control remembers an explicit choice. Check every state on page, surface and panel in both themes; never invert images.
Keep the identity intact
Use the approved SVGs at their native aspect ratio. Keep logo paths and lettering unchanged. Use a monochrome mask when the full-color asset loses contrast.
Write for the reader
Customer pages explain hosting, availability and useful next steps. Keep claims specific and supported. No em dashes, invented metrics, decorative status dots or filler labels. Technical guidance belongs in this design reference.
Make the keyboard path visible
Use semantic landmarks, one H1, named controls and visible focus. Match DOM order to visual order. Close the mobile menu with Escape and return focus to its trigger; navigation moves focus to content.
Give content room
Use a 1408px maximum page width, 64px desktop gutters, 40px tablet gutters and 24px mobile gutters (20px at 360px and below). Keep reading passages around 45 to 68 characters wide. Let text determine panel height.
Make movement optional
Respect prefers-reduced-motion at first paint. Essential content is always visible. Stop atmospheric work offscreen and in hidden tabs. The Accessibility setting and Escape stop the aurora and water.
A frame, then room for content.
45 to 68 characters
Stack columns on narrow screens. Keep controls at least 44px tall where practical. Test 320px reflow and 200% zoom without horizontal page scrolling or clipped labels. Functional separators can clarify a group; decorative strokes under headings add no information.
Before a change is ready.
- Identify the shared component and semantic tokens the change needs.
- Render the actual page in dark and light themes, including a narrow viewport.
- Use the keyboard. Check focus, labels, disabled or error states and reduced motion.
- Run behavior tests that protect the affected flow, then lint, typecheck and build.
- Inspect the rendered result. Fix concrete findings and record remaining limits.
pnpm tokens:check
pnpm check
# With the production preview running:
pnpm test
pnpm test:recoveryFor people and agents.
The structured reference contains the same token values, component examples and rules shown here. Use it as project guidance when working on Aviune. Local experiments do not change the published system.
https://aviune.com/design/reference.md