Aviune design system
Type & space
Outfit, the reading scale and room to breathe.
Outfit. In your own words.
One self-hosted variable family carries the interface. Use regular for reading, medium for labels and semibold for headings. The approved wordmark remains a separate SVG.
Your next Minecraft world.
font-family: var(--font-outfit), Arial, sans-serif;
font-size: 64px;
font-weight: 600;
line-height: 1.13;
letter-spacing: -0.035em;A scale with a job to do.
--type-displayclamp(3rem, 6vw, 6rem)Display
Page-level statement. One H1 per page.
--type-headingclamp(2rem, 3.6vw, 3.5rem)Heading
Section headings, with 1.13 line height and weight 600.
--type-introclamp(1.15rem, 1.8vw, 1.45rem)Introduction
Short supporting introduction, line height 1.55.
--type-body1.0625remBody
Reading text at desktop sizes. Mobile uses 1rem.
--type-small0.875remUtility
Navigation, controls and short supporting labels. Never hide essential details in tiny text.
Use 1.65 line height for paragraphs. Keep long passages around 45 to 68 characters wide. Headings may tighten to 1.07 or 1.13; body text needs more breathing room. Text can wrap freely, including when a reader zooms.
Space makes the grouping clear.
--space-14pxTight inline alignment
--space-28pxRelated controls
--space-312pxLabels and field content
--space-416pxCompact groups
--space-624pxMobile gutters and paragraph spacing
--space-832pxRelated sections
--space-1248pxPanel padding and section gaps
--space-1664pxDesktop gutters
--space-2496pxMajor section separation
Choose spacing for the relationship: a label sits close to its control; unrelated sections sit farther apart. The site uses 18px navigation corners and 24px large-panel corners, reducing to 14px and 18px on mobile. Primary actions are pills.