Live preview — every control on the right rewrites this UI in real time

A lesson on UX

You're on track for this week — here's what's left to do.

Tasks done today

6 / 9

▲ On pace to finish by 5pm

Study hours

12.5

▲ 1.5 hrs over your goal

Day streak

8 days

▲ Personal best — keep going!

This week's goals

Finish History essay60%

Revise Biology — 5 sessions4 / 5

Math practice streakDone ✓

Read 50 pages32 / 50

Achievements

8-day streakStudied 8 days running

Early birdRevised before 9am

Deep focus5 × 25-min sessions

Essay masterSubmit 3 essays early

Typography specimen

Tonight's study goals ✍️

Read this and notice how size, weight, leading and kerning change how easy it is to read. Cramped text makes revision feel exhausting; clear, well-spaced text is easier to focus on. Drag the sliders and find the setting that feels readable — that instinct is exactly what UX designers train.

3 subjects · due this week · updated just now

Button styles

Sizes

Due soon

History essay — first draftThe Cold War · 1,200 words Tomorrow

Algebra problem set 6Questions 1–18 · Mr. Okafor Fri

Biology quiz revisionCells & photosynthesis · 30 min/day Mon

Icon sets

The same six icons drawn four ways — notice how style changes the whole mood.

Linethin · 1.6px

Boldheavy · 2.6px

Roundedsoft · round caps

Solidfilled · accent

Construction Kittweak · learn · ship

Appearance

Light vs. dark isn't decoration — it changes contrast, mood and eye strain. Flip it and watch every surface, border and shadow adapt.

Color mode

Accent color--accent

The one bold hue that signals "this is the primary action." Used sparingly, it guides the eye.

Typography

How text looks is most of how an interface feels. These five properties are the grammar of type.

Typefacefont-family

Geistmodern

Interneutral

Montserratgeometric

Archivogrotesque

Robotoclassic

Font size15px

Font size — how large the base text is. Everything else scales relative to it (this UI uses em units).

Heading weight600

Font weight — the thickness of letter strokes (100 thin → 900 black). Weight creates hierarchy without changing size.

Body weight400

Regular text usually sits at 400. Too heavy and paragraphs feel loud and tiring.

Leading1.55

Leading (line-height) — vertical space between lines. Tight leading cramps; airy leading aids reading. Turn on the baseline guide below to see it.

Kerning0px

Kerning (letter-spacing) — horizontal space between letters. A touch of positive spacing suits ALL-CAPS labels; negative tightens big headings.

Spacing & layout

White space is a design element. Padding sits inside a box; margin & gap sit between boxes.

Density preset

A shortcut that sets padding & gap together — the single biggest lever on how "busy" an app feels.

Padding22px

Padding — breathing room inside cards, buttons and the sidebar, between the edge and the content.

Gap / margin18px

Margin / gap — the space between separate elements. Consistent gaps are what make a layout feel "designed."

Sidebar width232px

Wide enough for labels, narrow enough to leave the content room. A core layout trade-off.

Shape & depth

Corners and borders set the personality; shadows establish what floats above what.

Corner radius14px

Border-radius — 0 reads sharp & technical; large reads soft & friendly.

Border weight1px

Thin hairlines separate without shouting. Set to 0 for a borderless, shadow-led look.

Shadow elevation

Shadow = elevation. The more an element "lifts," the more important it appears.

Teaching guides

X-ray overlays that make invisible spacing visible — like a designer's inspector.

Padding bandTints the padding inside cards (green)

Element outlinesReveals margins & gaps between boxes

Baseline gridShows leading on the specimen text

Live CSS

Everything you change is just CSS. Here's the current recipe: