Study 01 · The interface, under a lens
Small details.
Different feeling.
A working field guide to the design baseline. Adjust a value, compare the result, and find the point where an interface starts to feel considered.
01 / Geometry
Let corners belong
to each other.
A nested surface feels calmer when the curves share a centre. The gap is part of the radius, not an unrelated number. Move the padding and watch the outer corner follow it.
outer radius = inner radius + padding
Where to use this
Cards containing artwork, inset fields and controls within a rounded panel. Keep the image’s own 1px inset outline independent of the container shadow.
02 / Alignment
Centre what you see.
A triangle’s bounding box and its visual weight are different things. A small optical nudge can make a play symbol sit where it feels centred. Icon-and-text buttons similarly need a little less space on the icon side.
Match icon stroke weight to the adjacent type. Adjust visually, then check the hit target separately.
The buttons are alignment samples, not audio players.
03 / Depth
Give light a job.
A border traces an edge. A small contact shadow and a broader ambient shadow describe how a surface sits above another. Keep the elevation useful: a button can look pressable without floating halfway across the room.
Layer a tight contact shadow with a soft, low-opacity ambient shadow.
A small surface
Same content.
A different relationship to the page.
Layered shadows enabled.
04 / Rhythm
Space carries structure.
Items in a group should feel closer to one another than to the next group. Start with twice the space between groups, then tune for the content. That rhythm often removes the need for another divider.
Linked sections also need scroll-margin-top. Follow any topic link above to see the clearance.
05 / Typography
Numbers can stand still
while changing.
Proportional digits change the width of a timer as it updates. Tabular figures give each digit an equal slot. Keep the surrounding label stationary too, rather than making your eye chase the value.
font-variant-numeric: tabular-nums
Type details worth keeping
- Use local WOFF2 files for web fonts. This page uses system text and the gallery’s existing WOFF2 handwriting.
- Store normal capitalization; apply display casing with CSS.
- Use font-aware underlines, curly quotes and the ellipsis character.
- Turn on platform font smoothing in the root layout.
06 / Measure
Make reading
feel unhurried.
Give article text a measure of 60–75 characters when space allows. Balance headings, use pretty wrapping for short descriptions, and let long-form paragraphs wrap normally. Narrow screens naturally use shorter lines.
Contain long IDs with overflow-wrap. A truncated label needs a way to reveal the whole thing.
Consider the space between words and ideas.
An interface has a rhythm before it has a color. A short heading creates a pause; a carefully measured paragraph gives an idea room to develop without making your eye travel too far.
Read the full truncated label
Field notes on the quiet relationships between type, space, movement and meaning.
07 / Motion
Open from somewhere.
Motion has a point of origin. This occasional popover opens from the trigger you choose. Its exit uses less travel and a short fade. Repeated, high-frequency menus should open immediately instead.
Transitions can reverse mid-flight. Try opening and closing quickly. The example honors your system’s reduced-motion setting.
08 / Feedback
A press should answer.
A small pressed scale acknowledges contact. When the state changes, crossfade the icons rather than snapping between unrelated silhouettes. Keep the label honest and the control’s dimensions stable.
Incoming icon: scale 0.25 → 1, opacity 0 → 1, blur 4px → 0. No transition: all.
Try Space or Enter on the focused button. Saved state lasts until reload.
09 / Color
Name the purpose.
Measure the result.
A component consumes “text” and “surface” tokens, not a palette index. Contrast belongs to the surface immediately behind the letters. The decorative sample lets you inspect that relationship; the controls remain readable.
For this ordinary-size text, aim for at least 4.5:1. This sample uses opaque sRGB colors, so the displayed ratio is directly calculable.
Themes and gradients
- Build a separate dark palette and use one switching mechanism.
- Disable transitions during a theme switch.
- Choose oklab for even brightness, oklch for vivid midpoints, or sRGB for muted blends.
- Reserve “accent” for the brand color. Every palette step needs a purpose.
Only the sample’s text token changes.
10 / Access
An error needs
a way forward.
Let someone submit, then explain what needs correcting. Keep the label visible, associate the error with its field, and focus the first invalid input. A red border alone does not tell you what happened.
This is a local validation demonstration. It sends nothing, creates no account, and permits pasting.
11 / Interaction
Leave the front door open.
Native links support a new tab. Native buttons support the keyboard. Visible focus shows where you are. This little sequence keeps the same order on screen and in the document.
Press Tab to move through the controls, then Space or Enter to activate. The decorative glow cannot swallow a click.
Small safeguards
- The skip link is this page’s first tab stop.
- No positive tabindex, focusable hidden decorations, or icon-only controls without names.
- Touch targets are at least 44px here; hover effects only apply to hover-capable pointers.
- Routine messages use role=status. Urgent errors alone deserve role=alert.
- Reduced motion never removes a state label or blocks the action.
No option chosen yet.
Explore the motion study ↗12 / Writing
Say what happens next.
An empty surface should explain what belongs there and offer one useful action. “Create a note” is a better invitation than “OK.” A destructive confirmation should name exactly what will be removed.
Use sentence case, consistent next-step labels, enabling labels on toggles, descriptive links, and “you” instead of “the user.”
Your first field note
Keep a detail you’d like to use in your next interface.
This note exists only in this page.