# Aviune design system

https://aviune.com/design

For people and agents building Aviune. Dark is the first-visit default.

## Chapters

- Brand: https://aviune.com/design/brand
- Color: https://aviune.com/design/color
- Type & space: https://aviune.com/design/type
- Components: https://aviune.com/design/components
- Motion: https://aviune.com/design/motion
- Foundations: https://aviune.com/design/foundations

## Rules

### 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.

## Components

### TextLink

Source: src/components/text-link.tsx

Use prominent for one primary destination in a group. Omit it for an inline or secondary link.

```tsx
<TextLink href="/minecraft-server-hosting" prominent>Explore Minecraft hosting</TextLink>
```

### Disclosure

Source: src/components/disclosure.tsx

Use a shared name for an exclusive group. Omit name when multiple items may stay open. The summary is a native keyboard target.

```tsx
<div className="topic-list"><Disclosure title="Game support" name="topics"><p>Compatibility details.</p></Disclosure></div>
```

### ThemeToggle

Source: src/components/theme-toggle.tsx

Use once in the shared header. It changes the whole site and remembers the visitor’s choice.

```tsx
<ThemeToggle />
```

### MotionPreference

Source: src/components/motion-preference.tsx

Pair with a paragraph with id="motion-help". This is a saved site preference; an OS reduced-motion preference still wins.

```tsx
<MotionPreference />
```

### CopyCode

Source: src/components/design/copy-code.tsx

Keep the text selectable if copying is blocked. Announce success only after clipboard writing succeeds.

```tsx
<CopyCode code="color: var(--accent);" label="Copy CSS" />
```

## Data and assets

- Tokens and rules: https://aviune.com/design/tokens.json
- CSS: https://aviune.com/design/tokens.css
- https://aviune.com/assets/brand/aviune-wordmark.svg
- https://aviune.com/assets/brand/aviune-wordmark-mono.svg
- https://aviune.com/assets/brand/aviune-mark.svg