{"name":"Aviune design system","url":"https://aviune.com/design","audience":"People and agents building Aviune interfaces","source":"src/design/tokens.json","defaultTheme":"dark","font":{"family":"Outfit","weights":[400,500,600],"source":"/fonts/outfit-latin-variable.woff2","license":"SIL Open Font License 1.1"},"pronunciation":{"readable":"AY-vee-oon","ipa":"/ˈeɪ.viː.uːn/"},"assets":["/assets/brand/aviune-wordmark.svg","/assets/brand/aviune-wordmark-mono.svg","/assets/brand/aviune-mark.svg"],"chapters":[{"slug":"brand","title":"Brand","description":"The approved artwork, its space and its voice.","url":"https://aviune.com/design/brand"},{"slug":"color","title":"Color","description":"Two themes. Shared roles. Measured contrast.","url":"https://aviune.com/design/color"},{"slug":"type","title":"Type & space","description":"Outfit, the reading scale and room to breathe.","url":"https://aviune.com/design/type"},{"slug":"components","title":"Components","description":"Working controls with their real states.","url":"https://aviune.com/design/components"},{"slug":"motion","title":"Motion","description":"Timing, feedback and a quieter setting.","url":"https://aviune.com/design/motion"},{"slug":"foundations","title":"Foundations","description":"Layout, accessibility and rules for building.","url":"https://aviune.com/design/foundations"}],"tokens":{"colors":[{"name":"page","label":"Page","dark":"#101c20","light":"#f3f5f0","use":"The page canvas. Use text or muted for content on it."},{"name":"surface","label":"Surface","dark":"#17282c","light":"#e7ede7","use":"Hover states and inset samples. Pair with text or muted."},{"name":"panel","label":"Panel","dark":"#142428","light":"#e9eee7","use":"Contained groups such as hosting details. Use sparingly to establish hierarchy."},{"name":"text","label":"Text","dark":"#eff4ef","light":"#172923","use":"Headings, body copy and meaningful icons on page, surface or panel."},{"name":"muted","label":"Supporting text","dark":"#b0c0ba","light":"#52645d","use":"Descriptions and secondary information. Keep essential text fully opaque."},{"name":"accent","label":"Glacier accent","dark":"#87d7bd","light":"#12604b","use":"Text links, selected navigation and focus rings. It does not mean a service is online."},{"name":"action","label":"Action fill","dark":"#b4e5d1","light":"#174f40","use":"Primary action backgrounds. Always pair with action-text."},{"name":"action-text","label":"Action text","dark":"#14372c","light":"#f5faf6","use":"Content on the action fill. Never substitute page text on a filled action."},{"name":"border","label":"Control border","dark":"#496059","light":"#9aafa3","use":"Supporting control edges. Focus uses accent; a border alone must not identify a control."},{"name":"soft-border","label":"Grouping border","dark":"#2b3d40","light":"#d4ded5","use":"Functional separators and panel boundaries. Never use as text or the only state indicator."}],"type":[{"name":"type-display","label":"Display","value":"clamp(3rem, 6vw, 6rem)","use":"Page-level statement. One H1 per page."},{"name":"type-heading","label":"Heading","value":"clamp(2rem, 3.6vw, 3.5rem)","use":"Section headings, with 1.13 line height and weight 600."},{"name":"type-intro","label":"Introduction","value":"clamp(1.15rem, 1.8vw, 1.45rem)","use":"Short supporting introduction, line height 1.55."},{"name":"type-body","label":"Body","value":"1.0625rem","use":"Reading text at desktop sizes. Mobile uses 1rem."},{"name":"type-small","label":"Utility","value":"0.875rem","use":"Navigation, controls and short supporting labels. Never hide essential details in tiny text."}],"spacing":[{"name":"space-1","value":"4px","use":"Tight inline alignment"},{"name":"space-2","value":"8px","use":"Related controls"},{"name":"space-3","value":"12px","use":"Labels and field content"},{"name":"space-4","value":"16px","use":"Compact groups"},{"name":"space-6","value":"24px","use":"Mobile gutters and paragraph spacing"},{"name":"space-8","value":"32px","use":"Related sections"},{"name":"space-12","value":"48px","use":"Panel padding and section gaps"},{"name":"space-16","value":"64px","use":"Desktop gutters"},{"name":"space-24","value":"96px","use":"Major section separation"}],"motion":[{"name":"duration-feedback","value":"240ms","use":"Small hover and press feedback"},{"name":"duration-disclosure","value":"300ms","use":"Native disclosure height, where supported"},{"name":"duration-arrow","value":"420ms","use":"One arrow pass on a prominent link"},{"name":"duration-scene","value":"900ms","use":"Initial landscape settle"},{"name":"duration-aurora","value":"12s","use":"First alternating sky layer"},{"name":"duration-aurora-secondary","value":"15s","use":"Second alternating sky layer"},{"name":"ease-interface","value":"cubic-bezier(0.2, 0.8, 0.2, 1)","use":"Link arrows and small controlled movement"},{"name":"ease-disclosure","value":"ease","use":"Content expansion and collapse"},{"name":"ease-atmosphere","value":"ease-in-out","use":"Continuous alternating atmosphere"}]},"rules":[{"title":"Start with the existing component","text":"Reuse TextLink for destinations and Disclosure for expandable content. Use native buttons for actions. Keep essential content readable before JavaScript loads."},{"title":"Use color by role","text":"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."},{"title":"Design both themes","text":"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."},{"title":"Keep the identity intact","text":"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."},{"title":"Write for the reader","text":"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."},{"title":"Make the keyboard path visible","text":"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."},{"title":"Give content room","text":"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."},{"title":"Make movement optional","text":"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":[{"name":"TextLink","source":"src/components/text-link.tsx","usage":"<TextLink href=\"/minecraft-server-hosting\" prominent>Explore Minecraft hosting</TextLink>","rule":"Use prominent for one primary destination in a group. Omit it for an inline or secondary link."},{"name":"Disclosure","source":"src/components/disclosure.tsx","usage":"<div className=\"topic-list\"><Disclosure title=\"Game support\" name=\"topics\"><p>Compatibility details.</p></Disclosure></div>","rule":"Use a shared name for an exclusive group. Omit name when multiple items may stay open. The summary is a native keyboard target."},{"name":"ThemeToggle","source":"src/components/theme-toggle.tsx","usage":"<ThemeToggle />","rule":"Use once in the shared header. It changes the whole site and remembers the visitor’s choice."},{"name":"MotionPreference","source":"src/components/motion-preference.tsx","usage":"<MotionPreference />","rule":"Pair with a paragraph with id=\"motion-help\". This is a saved site preference; an OS reduced-motion preference still wins."},{"name":"CopyCode","source":"src/components/design/copy-code.tsx","usage":"<CopyCode code=\"color: var(--accent);\" label=\"Copy CSS\" />","rule":"Keep the text selectable if copying is blocked. Announce success only after clipboard writing succeeds."}]}