Yuni-ku

Design system

The component patterns and tokens behind every Yuni-ku product page.

Color tokens

From globals.css. Use the semantic name (foreground), not the hex.

background

foreground

muted

muted-foreground

border

accent

Typography

Geist Sans. Tracking and weight do the heavy lifting.

Display heading

text-4xl md:text-6xl font-medium leading-[1.05] tracking-tight

Quiet objects, sized to your space.

Section heading

text-2xl font-medium tracking-tight

Saved designs

Subheading

text-xl font-medium tracking-tight

Featured

Eyebrow

Internal

Body

text-base leading-relaxed

Yuni-ku is a small, considered library of 3D-printable designs.

Body small

text-sm leading-relaxed

Stand pot and pan lids on edge, sized to your set.

Muted body

text-sm text-muted-foreground

Nothing saved yet.

Caption

text-xs text-muted-foreground

10 saved designs

Tabular caption

text-xs tabular-nums text-muted-foreground

160 × 120 × 40 mm

Buttons

One primary per surface. Bordered for everything else.

Primary button

Secondary button

Muted link

Forgot your password

Accent link

Create an account

Disabled primary

Icon buttons

Round, bordered. Used as viewer overlays.

Icon button (circular, default)

Icon button (circular, active)

Icon button (circular, disabled)

Selectors

Live demos — click them.

Segmented selector (binary)

Segmented selector (3 options)

Range slider

Width160 mm

Stepper (whole-number)

Gang count

Checkbox

Mixing area

Dropdown menu (interactive)

Dropdown panel (expanded)

you@example.com

Saved designs

Pills & chips

Small status / category indicators.

Category chip (default)

All

Category chip (active)

Organize

Status pill (success)

Fits

Status pill (warning)

Too tall

Form inputs

Borders, never shadows. Focus ring is just the border color.

Text input

Labelled field

Native select (styled)

Surfaces

Cards, badges, dividers.

Bordered card

Pricing tier

Personal

Unlimited downloads for your own home.

Highlighted card (inverted)

Pricing tier

Free

Make an account and start printing.

Overlay badge (viewer chrome)

160 ×120 ×40

Section divider

"or" divider

Feedback

Small, transient, never modal.

Inline toast

Saved

Inline error

Layout containers

Reusable wrapper widths.

Page max width (max-w-7xl)

mx-auto max-w-7xl px-6

Reading width (max-w-3xl)

mx-auto max-w-3xl px-6

Form width (max-w-sm)

max-w-sm