Aether

Design system

Tokens, type, and components. Local only. Press ⌘K to try the command palette.

{SWATCHES.map((s) => (

{s}

))}

Display 64

Heading one

Heading two

Heading three

Body copy sits at fifteen pixels with generous leading so long descriptions stay comfortable to read in dark mode.

Caption · metadata · 2024

Overline

DefaultAccentOutlineGlass

</Field>
                    </div>
                </Block>

<Block title="Rating">
                    <div className="flex items-center gap-4"><StarRating value={score} onChange={setScore} /><span className="text-sm">{score ?? '—'}/10</span></div>
                </Block>

<Block title="Empty state"><EmptyState icon={Gamepad2} title="Nothing here yet" description="Games you mark as played will appear here." action={<Button variant="secondary">Browse games</Button>} /></Block>

<Block title="Toast & sheet">
                    <div className="flex flex-wrap gap-3">
                        <Button variant="secondary" onClick={() => toast({ title: 'Review saved', description: 'Thanks for sharing.' })}>Success</Button>
                        <Button variant="secondary" onClick={() => toast({ kind: 'error', title: 'Something went wrong' })}>Error</Button>
                        <Button variant="secondary" onClick={() => toast({ kind: 'info', title: 'Heads up', description: 'Informational toast.' })}>Info</Button>
                        <Button variant="secondary" onClick={() => setSheet(true)}>Open sheet</Button>
                    </div>
                    <Sheet open={sheet} onClose={() => setSheet(false)} title="Sheet"><p className="text-sm text-muted-foreground">Bottom sheet on mobile, drawer on desktop.</p></Sheet>
                </Block>
            </div>
        </PublicLayout>
    );
}

{title}