Vocabulary

Typography

How text is set, spaced, and read.

Kerning

The space between two specific characters, adjusted manually. Different from tracking, which affects all characters equally.

Tokyo

AVENUE

Waves

Only To, AV and Wa move. Every other gap stays put.

Leading

The vertical space between lines of text. Too tight and text suffocates. Too loose and it stops reading as a paragraph.

Comfortable

Good leading gives each line room to breathe, so the eye can drop to the next one without hunting for it. Too much and the paragraph falls apart into separate lines.

Line height

1.50

Tabular nums

A font feature that gives every digit the same width so numbers in columns stay aligned as they change. Essential for prices, stats, and any data that updates.

Service

Requests / min

api.lapse.dev

11,418.07

cdn-eu-west

8,960.50

auth-worker

1,111.11

image-resize

4,087.94

Weight

How thick or thin a typeface’s strokes are. Bold is for UI emphasis and hierarchy. Italic is for linguistic stress or citation, not UI hierarchy.

Linear

3 issues assigned to you

9:41

Maya Patel

Re: launch checklist

9:12

Stripe

Your payout is on its way

Tue

Jonas Berg

Notes from the review

Mon

Cap height

The height of a capital letter. Along with x-height, it determines how large a font feels on screen. Useful when matching fallback fonts or pairing typefaces.

Dashed: Inter’s cap height. Red: Heldane’s.

Font smoothing

How the browser renders font edges. On Mac, antialiased renders thinner and lighter than the default. Designers often apply it globally for a crisper feel, though it reduces fidelity on non-retina screens.

Deploy to production

main · 4 commits ahead · 2 minutes ago

Deploy to production

main · 4 commits ahead · 2 minutes ago

Visible on macOS only. Look at the dark card.

Hyphenation

Breaking a word across lines with a hyphen. Helps with narrow columns and justified text. Best left to the browser automatically to avoid breaking at unexpected moments.

Field notes

Our documentation covers internationalization, accessibility requirements, and responsive typography for administrators and contributors working across organizations.

Widow

A single word left alone on the last line of a paragraph. text-wrap: balance can fix it automatically.

Engineering · 6 min read

How we cut our build times in half without caching

A look at the three changes that mattered.

Font stack

The ordered list of fonts the browser tries before giving up. A well-matched fallback font avoids layout shift when the primary font loads, since mismatched x-heights and weights cause content to reflow.

Showing fallback…

Invite your team

Everyone you add gets their own workspace, access to shared projects, and a seat on your current plan, billed monthly.

Send invites

font-family: Inter, serif

Variable font

A single font file containing a range of weights, widths, or other axes. Lets you animate weight without layout shift and reduces font file overhead.

Aa Gg

100

1 file · every weight between

900

wght

420

Subscript

Lowered characters for formulas or notation. The HTML sub element has the same problem as sup: oversized by default and disruptive to line rhythm if left unstyled.

Shipping impact

This order emits 1.8 kg of CO₂e in transit. We offset it twice over, and our packaging is bleached without Cl₂, using H₂O₂ instead.

Tracking

Letter-spacing applied uniformly across a word or block of text. Uppercase labels almost always need more of it.

Optical kerning

Spacing adjusted by eye rather than the font’s built-in metrics. Removes awkward gaps between certain letter pairs that default metrics leave behind.

TYPOGRAPHY

Metrics only fix listed pairs. The eye catches the rest.

Type scale

A predetermined set of font sizes that work together, usually based on a ratio. Picking sizes from the scale keeps hierarchy consistent.

34px

Q3 report

22px

Revenue by region

18px

Europe

14px

Up 12% on last quarter

11px

Updated 2 hours ago

x-height

The height of a lowercase letter like x, relative to the cap height. A high x-height makes a font feel larger at the same point size, which is why two fonts at 16px can look very different in size.

The quick brown fox, set at 16px.

Ligature

Two characters that merge into a single glyph to avoid awkward collisions. fi and fl are the most common. Some ligatures are decorative and belong in display use only.

fine office
flow

Watch the f meet the i, the l, and the second f.

Text overflow

What happens when text is longer than its container. Truncation with an ellipsis is the most common solution. Use the single unicode character, not three periods, and never cut mid-word.

Maya Patel

Can you review the onboarding copy before Thursday's launch?

Jonas Berg

Pushed the pricing table changes to the staging environment

Ana Lima

Quick question about the invoice for September

Column width

220px

Clamp

A technique for fluid type sizing that sets a minimum, preferred, and maximum value. The size scales smoothly between breakpoints without needing separate declarations at each one.

Field notes

font-size: clamp(24px, 2.5vw + 16px, 48px)

Viewport

760px → 35.0px

Orphan

A single line of a paragraph stranded at the top of a new column or page. The CSS orphans property exists for this, though browser support is inconsistent. Often fixed manually.

The print works

Issue 04 · p. 12

The studio moved into

the old print works

in May, a long brick

room with north light.

Most of the presses

are gone now, but the

floor still carries

the marks they left,

and the type cases

line the far wall.

We kept them. New

hires learn to set

a line by hand in

their first week,

letter by letter.

Line length

How wide a column of text runs. Around 65 characters is comfortable. Wider and the eye struggles to find the next line.

Notes on reading

When a line runs too long, the eye has to travel all the way back across the page to find the start of the next one, and it often lands on the wrong line. When it runs too short, the reader is interrupted every few words. Somewhere between the two, around sixty-five characters, reading stops feeling like work and the text simply flows from one line into the next.

Set the measure in ch units and it scales with the font size, so the column keeps the same number of characters whether the reader zooms in or not.

Comfortable

Measure

66 characters

Superscript

Raised characters for footnotes or exponents. The HTML sup element is too large by default and disrupts line spacing. Proper superscripts are manually sized and shifted.

Pro

$24¹ / mo

Includes unlimited projects², priority support, and storage for up to 10⁹ events per month, kept for twelve months before archiving.

Color

How color is defined, mixed, and applied.

sRGB

The standard color space most screens have used for decades. All hex values live here. Its gamut is limited: there are colors a modern display can show that sRGB cannot describe.

OKLCH

A color space that matches how humans perceive brightness. Unlike HSL, two colors at the same lightness value actually look the same brightness. Useful for generating palettes and accessible color mixes.

Bug

Billing

Docs

Design

Infra

Mobile

Research

hsl(h 85% 55%)

Semantic token

A color variable named for its purpose rather than its value. --color-border-subtle instead of #e0e0e0. When the value changes, everything using the token updates.

Weekly digest

Mondays at 9:00

Mentions

Only from people you follow

Pro members get daily digests

--color-accent

#D9A21B

--color-accent-subtle

#FBF3DC

--color-border-subtle

#ECE6D6

--color-text-muted

#8A8070

Tinted neutral

A grey with a slight hue bias. Pure #808080 looks like a placeholder. A tinted neutral feels chosen.

Recent

Q3 roadmap

Edited 2h ago

Brand guidelines

Edited yesterday

Launch checklist

Edited Mon

#F2F2F2

#FFFFFF

#E0E0E0

#808080

#1A1A1A

Chroma

The OKLCH equivalent of saturation, but perceptually accurate. Reducing chroma for a light tint keeps the color alive. Reducing opacity does the same but turns it grey and lifeless.

Your trial ends in 3 days. Add a card to keep your projects.

Opacity vs visibility

Two ways to hide an element. Opacity zero still occupies space and receives pointer events. Visibility hidden removes interaction but keeps the space. Worth knowing which you need.

Try clicking the empty gap

Blending

How a layer interacts with what’s beneath it. Multiply darkens, Screen lightens, Overlay does both depending on the base color. Useful for integrating images with colored surfaces and adding depth to illustrations.

Oct 24 · Lisbon

Design Systems Night

mix-blend-mode: multiply

P3

A wider color space supported by most modern screens. Allows more vivid colors, particularly greens and reds, that sRGB cannot reach.

Green

Red

Orange

Needs a wide-gamut screen to see the jump.

Alpha

The transparency component of a color, from fully opaque to fully invisible. An alpha border recedes into the surface beneath it. A solid hex sits on top. The difference is subtle but consistently felt.

Page

Day

Week

Month

Sidebar

Day

Week

Month

Cover

Day

Week

Month

Contrast ratio

The luminance difference between a foreground and background color. WCAG requires 4.5:1 for body text, 3:1 for large text and UI components.

Pro plan

3.04:1

Billed annually. Cancel any time before your next renewal.

Large text and UI

3:1

Body text

4.5:1

Text color

#949494

Saturation

How vivid or muted a color is. Brand colors at full saturation in dark mode can vibrate off the screen. Pulling back 20-30% settles them.

Exports this month

4,821

Upgrade

View export log

Saturation

100%

Vibrating

Gradient

A transition between two or more colors. In HSL or sRGB, the midpoint often goes grey. Building gradients in OKLCH keeps the colors vivid throughout.

Deep focus

42 tracks · 2 hr 51 min

Midpoint

linear-gradient(in srgb, blue, yellow)

Dark mode

An interface built on dark surfaces. The brightest surface should sit at the top of the layering hierarchy. Light mode tokens rarely translate directly, so every color decision needs rechecking.

Projects

Website redesign

Updated 4 min ago

Rename

Duplicate

Delete

Iconography

How icons are drawn and balanced.

Stroke weight

How thick the lines of an icon are. Thin strokes disappear at small sizes. At large sizes they look frail. Weight needs to scale with size.

12px

1px

16px

1px

24px

1px

48px

1px

Filled vs outlined

Two icon styles for communicating state. Filled often signals active or selected. Outlined signals default. Mixing both without a clear system creates noise.

Pixel hinting

Adjusting icon paths to sit cleanly on a pixel grid at small sizes. A full-detail logo at 16px turns to mush without it.

Actual size

Icon size system

The defined sizes an icon is designed to appear at, typically 12, 16, 20, 24, and 48px. Each size is ideally drawn or adjusted for that specific context rather than scaled from a single master.

12

Inline

16

Button

20

Nav

24

Toolbar

48

Empty

Contextual swap

Switching from an outlined icon to a filled one (or vice versa) to signal a state change like active, selected, or toggled. The convention needs to be consistent across the product to work. Mixed usage means users can’t learn the pattern.

Mira Okafor

2h

Shipped the new onboarding today. Three screens became one.

Unified weight

When icons and surrounding text share the same visual weight. A thin-stroke icon next to bold text looks like it came from a different product. Icons should feel like they belong to the same visual family as the type beside them.

Home

Projects

Analytics

Team

Settings

Optical centre

Where something looks centred versus where it mathematically is. A play button centred by coordinates looks left-heavy. Nudge it right and it sits.

Bounding box

Centroid

translateX(0.0px)

Cap style

Whether stroke ends are square or round. Round caps feel finished in most UI contexts. Square caps can read as unrefined.

New issue

Continue

Icon library

A set of icons drawn at the same size, weight, and radius. Mixing two libraries, even similar ones, creates subtle mismatches that compound across a product.

Rename

R

Duplicate

⌘D

Copy link

⌘L

Meaning collision

When the same icon is used for two different actions in the same product. A star used for both favouriting and rating. A chevron used for both expanding and navigating. Users learn neither reliably.

Lagoon House

4.92 · Comporta

Cloud Cabin

4.71 · Sintra

Dusk Loft

4.85 · Porto

Breathing room

The space between an icon and its label inside a button or list item. Too close and they look like they collided. 6 to 8px is a reasonable starting point. The gap is part of the component design, not an afterthought.

New project

Export

Inbox

12

Icon gap

2px

Collided

Metaphor accuracy

Whether the icon actually represents what it’s supposed to. A floppy disk for save, a phone handset for call, a house for home. These work until the generation using them has never seen the physical object. Worth auditing as your audience ages.

Save

Floppy disk

Learned

Voicemail

Tape reels

Learned

Call

Desk handset

Recognised

Email

Envelope

Recognised

Attach

Paperclip

Recognised

Audience born in

2000

Layout

How space and structure organise a page.

Border radius

The rounding on a corner. An inner element inside a rounded container needs a smaller radius, calculated as outer radius minus padding. Matching both creates a visible gap.

Lagoon

24 photos

Padding

8px → inner radius 12px

Negative space

The empty area around and between elements. It defines shape, creates breathing room, and guides the eye. Crowding elements together removes clarity, it doesn’t add information.

Pro

$24

per month

Unlimited projects
Version history
Priority support

Auto layout

Figma’s implementation of flexbox: elements that space themselves, resize with their content, and respond to direction and alignment rules.

Button

Save changes

Hug 0 × 0

Overflow

What happens when content is larger than its container. Hidden clips silently. Scroll adds a scrollbar. Auto only shows one when needed. Hidden also silently breaks sticky positioning on child elements.

Inbox

5 unread

Maya Lin

Left a comment on Pricing

2m

Jonas Berg

Invited you to Roadmap

1h

Ana Costa

Resolved 3 comments

3h

Sam Ortiz

Mentioned you in Q4 plan

1d

Priya Nair

Shared Brand assets

2d

Aspect ratio

The proportional relationship between width and height. Setting it on images and embeds lets the browser reserve the right space before the content loads, preventing layout shift.

200 × 113

Width

200px

Safe area

The part of a screen not obscured by notches or home indicators. Fixed bottom elements need to account for this or they sit underneath the home indicator.

Bag

Shirt

$32

Tote

$16

Pay $48

Breakpoint

The point at which a layout changes to suit a different screen size. Best set where the content actually breaks, not at assumed device widths.

340px

Email

For receipts

maya@studio.com

Container width

400px

Grid

A system of columns that organises layout. 12 columns is conventional. 8 often works better for simpler layouts.

Field notes

Archive · About

Stories about slowing down and looking closer

Pacing a long week

Notes on dusk

The bloom season

Cloud studies

Baseline grid

A horizontal rhythm built from the line-height of body text. Creates consistency in editorial layouts. Often overkill in product UI.

Field notes

We left before sunrise, when the lagoon was flat enough to see the reef from the deck. By noon the wind had picked up.

The plan from the night before stopped making sense, so we threw it out and followed the weather instead, one small decision at a time, until the light went.

Gap

Space between flex or grid children, set on the parent. Unlike margin, it leaves no trailing space after the last item.

All

Design

Engineering

Sales

> * { margin-right: 8px }

Flexbox

A CSS layout model for arranging elements in a row or column. Controls direction, alignment, spacing, and how items grow or shrink to fill available space. The foundation of most modern UI layout.

Search

justify-content: space-between

Layout shift

When elements move unexpectedly as a page loads: images popping in, fonts swapping, content reordering. Avoided by reserving space before content loads and using size-matched font fallbacks.

Journal · 4 min read

A week on the lagoon

We left before sunrise, while the water was still flat.

Sticky positioning

An element that scrolls normally until it hits a threshold, then fixes in place. Requires a parent that is not set to overflow hidden, which silently breaks it.

Invoice

Customer

Amount

INV-1042

Linear

$1,200

INV-1041

Vercel

$480

INV-1040

Figma

$2,150

INV-1039

Notion

$96

INV-1038

Stripe

$3,400

INV-1037

Raycast

$240

INV-1036

Arc

$720

INV-1035

Loom

$150

Viewport units

Units relative to the browser window. vw and vh are the classics. dvh accounts for the mobile browser chrome that shows and hides on scroll. Using vh for full-screen mobile layouts often causes overflow because of this.

Plan your next trip in minutes

Get started

trips.app

100vh

Max-width

A cap on how wide a container gets. Without one, text lines stretch to unreadable lengths on wide screens.

fieldnotes.blog

October 4 · Field notes

What a week on the water taught us about pacing

We left before sunrise, when the lagoon was still flat enough to see the reef from the deck. By noon the wind had picked up and the plan we had made the night before stopped making sense, so we threw it out and followed the weather instead. Every good day that week started with the same small decision: wait until the water tells you what it wants, then commit to it fully and stop second-guessing the call.

Responsive

A design that adapts to different screen sizes rather than being fixed. Achieved through fluid layouts, flexible images, and breakpoints. The baseline expectation for anything on the web.

Library

Albums

Favorites

Library

Asymmetry

A layout where columns or elements are intentionally unequal. Creates tension and visual interest. Symmetry is stable but rarely interesting.

New in 4.2

Edit photos at golden hour

Warmth and shadows that follow the sun.

Z-index

The stacking order of elements on the same plane. Modals, tooltips, and dropdowns need explicit z-index values or they clip behind things they should sit above.

Members

Maya Lin

Editor

Change role

Resend invite

Remove

Pending invites

jonas@studio.com

Sent 2d ago

ana@studio.com

Sent 2d ago

Interaction

How elements respond to input.

Affordance

The visual signal that tells you how something can be used. A button looks pressable. A link looks clickable. When affordance is missing, users guess.

Your trial ends in 3 days

Keep your projects and history by choosing a plan.

Focus state

The visible indicator that an element is keyboard-focused. Removing it is an accessibility failure. Replace it with a custom style, never just delete it.

Display name

Ada Lovelace

Weekly digest

Cancel

Save

Disabled state

A non-interactive element. Using opacity alone is unreliable since it can pass or fail contrast checks unpredictably depending on the background. A specific muted token is more predictable.

Total

$48.00

Add a card to continue

Pointer events

Whether an element can receive mouse or touch input. Setting to none makes an element visually present but non-interactive, useful for decorative layers that should not intercept clicks.

Debounce

A delay before firing a function, reset each time it is triggered. Stops a search input making a request on every keystroke. 300ms is a common threshold.

Network

0 requests

Copy to clipboard

A button that copies text. Needs visible confirmation, typically a checkmark for a second or two. Without it, users click it repeatedly thinking it failed.

Install

Add the package to your project.

$ npm install motion

clicks: 0

Hover state

The visual change when a cursor moves over an interactive element. Should confirm interactivity through cursor change, color shift, or both. Color alone is not enough.

Q3 planning.pdf

2.4 MB

Pricing model.csv

180 KB

Hero export.png

1.1 MB

Hover the rows.

Active state

The visual change when an element is pressed. Without it, buttons feel unresponsive. A small scale or color shift is enough.

Dusk

$18 · print

2

no :active

Lagoon

$18 · print

2

:active

Press and hold + on each.

Cursor

The pointer icon that signals what an element does. Pointer means clickable. Default means static. Text means selectable. The wrong cursor breaks the implicit contract.

Release notes

Draft · edited 2h ago

Exports are now twice as fast. See the migration guide for details.

Hover each part of the draft

Optimistic update

Updating the UI before the server confirms the action. Feels instant. Requires a rollback if the request fails.

Maya Chen

2h

Shipped the new onboarding today. Three steps instead of seven.

Tap the heart

Touch target

The tappable area of an interactive element. The minimum is 44x44px. The visual element can be smaller than the touch target.

Leo Park

Invoice for September

icon 16 × 16 · hit area 24 × 24

Motion

How things move and transition.

Transition property

Which CSS properties animate. Animating all properties can accidentally catch layout ones and cause jank. Opacity and transform are the safe pair.

transition: all

0 layout passes

Choreography

The coordination of multiple elements animating at the same time. When several things move independently and at different timings, the result is visual noise. Good choreography staggers, sequences, or groups motion so the eye knows where to look.

Revenue this month

$48,210

Halcyon

$12,400

Kestrel

$8,950

Marlow

$6,120

Shared axis transition

When navigating between two related views, the motion direction should reflect the spatial relationship between them. Moving forward through a flow animates right. Going back animates left. Violating this creates a sense of spatial disorientation.

Settings

Appearance

System

Language

English

GPU compositing

Opacity and transform animations run on the GPU and avoid triggering layout recalculation, making them smooth even on lower-end devices. Animating properties like width, height, padding, or top forces the browser to recalculate layout on every frame. The performance difference is significant.

Layout

Paint

Composite

animation: grow — scaleX(0.4) → 1

Reduced motion

A user preference for less animation. Ignoring it can trigger vestibular symptoms. Any significant movement should check for it.

Reduced keeps the fade, just gentler.

Enter vs exit asymmetry

Entering and exiting animations should not be mirror images of each other. Enter is an arrival and should decelerate into place. Exit is a departure and should accelerate away. Reversing the enter animation for the exit makes it feel like content is arriving backwards.

exit: 400ms, enter reversed

Motion as feedback

Using animation to confirm that something happened: a button that compresses on press, a form field that shakes on invalid input, a checkmark that draws itself on success. The motion is not decoration, it is the response.

Press it empty first, then with a real address.

Entrances & exits

How elements appear and disappear.

Fade in / Fade out

An element appears or disappears by changing opacity. Nothing moves.

Type / for headings, photos and tables. Markdown works as you type, so # starts a heading and ** makes text bold.

Scale in

An element grows to full size as it appears, usually with a fade.

Reveal

A clip-path or mask uncovers the content gradually.

Slide in

An element enters from off-screen: left, right, top, or bottom.

Noor Haddad

now

Shared 2 photos with you

Pop in

An element overshoots its final size before settling, so it looks like it bounced into place.

The lagoon prints are back from the printer.

Enter / Exit

The animation an element plays when it's added to or removed from the screen.

Sequencing & timing

When each thing moves, and in what order.

Keyframes

Points you define along an animation (0%, 50%, 100%). The browser fills in everything between them.

0%

50%

100%

Vertex
Orbit
Hexly
Slate
Facet

0%

50%

100%

animation: marquee 10s linear infinite;

Stagger

Several items animate one after another, each a few milliseconds behind the last.

Delay

Time before an animation starts.

0s

0.5s

Stepped animation

An animation that jumps between fixed steps instead of moving continuously, like a countdown timer.

Updating…

0%

Interpolation / Tween

The browser generates every frame between a start value and an end value, so the motion is continuous.

Orchestration

Timing several animations so they read as one motion instead of several.

Field notes · Issue 04

A week on the lagoon

We left before sunrise, while the water was still flat enough to see the reef.

Duration

How long an animation takes.

Fill mode

Whether an element keeps the animation's first or last frame before it starts or after it ends. Set forwards and it holds the last one.

Easing

How speed changes over an animation. Every graph below plots time left to right against progress bottom to top.

Easing

The rate at which an animation speeds up or slows down.

Ease-in

Starts slow, ends fast. Feels sluggish, so it should rarely be used for UI.

Linear

Constant speed. Wrong for UI, right for spinners and marquees.

Asymmetric easing

A curve that speeds up and slows down at different rates. Real motion is asymmetric, which is why it reads better than a symmetric curve.

Ease-out

Starts fast, ends slow. The default for most UI and anything responding to the user.

Dropdown animation with ease-in on the left and ease-out on the right.

Ease-in-out

Slow, fast, slow. Good for elements already on screen moving from A to B.

Here’s a timeline animated with linear on the left and ease-in-out on the right.

Cubic-bezier

An easing curve you define yourself, with four numbers.

cubic-bezier(0.65, 0, 0.35, 1)

Spring animations

Motion driven by physics instead of a fixed duration.

Spring

Gives you more natural motion by setting tension, mass, and damping instead of a duration.

The bottom ball slows down more naturally.

Bounce

A spring loose enough to overshoot its target and wobble back into it.

Bounce

Velocity

How fast an element is moving and in which direction. Interrupt a spring and it carries that speed into the next animation instead of starting from zero.

spring

tween

Click to move, then click again mid-flight.

Stiffness, damping & mass

A spring consists of tension, mass, and damping. Drag the sliders to feel how each one changes the curve.

stiffness

damping

mass

Momentum

Motion that keeps its speed after the input stops, like a flicked card that coasts to a halt.

Click around. It carries its momentum between targets.

Interruptible animation

An animation you can redirect mid-flight instead of waiting for it to finish.

Hit replay twice in a row. One of them jumps to the new position instead of curving into it.

Movement & transforms

Changing an element’s position, size, or angle.

Translate

Move an element along the X or Y axis.

Rotate

Spin an element around a point.

Rotate

45°

3D tilt / Flip

Rotate in 3D space (rotateX / rotateY) to add depth.

Transform origin

The anchor point a scale or rotation grows or spins from.

Scale

Make an element bigger or smaller.

Skew

Slant an element along the X or Y axis, so its corners stop being right angles.

Skew X

16°

Skew Y

0°

Perspective

How strong the 3D effect looks. A lower value exaggerates depth, as if the viewer is closer.

Perspective

450

Rotation

58°

Origin-aware animation

An element animates out of whatever triggered it. A popover grows from the button that opened it, not from its own center, which is what CSS does by default.

Transitions between states

Connecting one state, view, or element to another.

Crossfade

One element fades out as another fades in, in the same spot.

Morph

One shape turns into another, like the Dynamic Island.

Layout animation

When an element's size or position changes, it animates to the new spot instead of snapping.

Sunrise

Lagoon

Dusk

Bloom

Direction-aware transition

Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.

Welcome

A quick three-step tour of how the app fits into your day.

Continuity transition

A change that connects before and after, so nobody loses the thread. The same rectangle growing and shrinking, rather than one swapping for another.

Shared element transition

An element travels and transforms from one position into another, like a thumbnail expanding into a card.

Accordion / Collapse

A section animates its height open and closed to show or hide content.

Yes, upgrade or downgrade at any time. Changes are prorated to the day, so you only pay for what you use.

Scroll

Motion tied to scrolling or navigating between views.

Scroll reveal

Elements fade or slide into place as they enter the viewport.

Scroll down ↓

Built for speed: Deploy in seconds, not hours. Everything your team needs, in one place.
Designed to scale: From side project to production. The workflow grows with your team.
Ship with confidence: Preview every change before it goes live, and roll back in one click.

Page transition

An animation that plays when navigating from one page or route to another.

App

Scroll-driven animation

An animation whose progress is tied to scroll position.

Following the weather

We left before sunrise, when the lagoon was still flat enough to see the reef from the deck.

By noon the wind had picked up, and the plan from the night before stopped making sense.

So we threw it out and followed the weather instead, one small decision at a time.

Some days that meant six hours on the water. Some days it meant a long lunch and an early night.

By Friday nobody asked what the plan was. We checked the water first and decided after.

View transition

The browser morphs between two states or pages, connecting shared elements.

Gallery

Feedback & interaction

Motion that answers something the user just did.

Hover effect

Visual change when the cursor moves over an element.

Profile

Notifications

Appearance

Billing

Hold to confirm

A progress indicator that fills while the user holds a button down.

Press and hold

Ripple

A circle expanding from the point of a tap, confirming the press.

Press / Tap feedback

A small scale-down while an element is held down, confirming the press.

Shake / Wiggle

A quick side-to-side jitter signaling an error or rejected input.

Polish & effects

The details you add last.

Blur

A blur filter that softens an element, or hides the moment two states overlap.

no blur

blur

Mask

Hide or reveal parts of an element with a shape or gradient. Like clip-path, except the edge can fade.

clip-path

mask

Skeleton / Shimmer

A placeholder with a moving sheen shown while content loads.

Tabular numbers

Fixed-width digits, so a number doesn't jitter as it changes. Any timer or counter needs them.

proportional1:11.26

tabular-nums1:11.26

Same font, same time. Only the digit widths differ.

Clip-path

Clip an element to a shape. Animate the shape and you get a reveal or a wipe.

clip-path: inset(0 100% 0 0);

Before / after slider

A draggable divider that wipes between two overlaid images to compare them.

BEFOREAFTER

Drag the divider, or focus it and use the arrow keys.

Number ticker

Digits rolling or counting up to a value.

Revenuelive

$8,264

Typewriter

Text appearing one character at a time, as if being typed.

Ask anything

⌘K

Performance

What keeps motion smooth.

Frame rate (FPS)

Frames drawn per second. 60fps is the baseline for smooth motion.

60 fps

12 fps

Same path, same speed. The bottom ball just draws fewer frames.

Dropped frame

A frame the browser didn’t draw, causing a tiny hitch in motion.

1

2

3

4

5

6

7

8

9

10

frame 6 dropped

Slowed ~25×

Layout thrashing

Animating width, height, top, or left forces the browser to redo layout on every frame.

Motion stays smooth when the browser can skip layout and paint on every frame it draws.

width

Motion stays smooth when the browser can skip layout and paint on every frame it draws.

transform

Jank

Visible stutter when the browser drops frames because it can’t keep up with the animation.

smooth

janky

Simulated. The bottom feed's main thread keeps blocking.

Compositing

Letting the GPU move or fade an element on its own layer without redoing layout or paint.

Layout

Paint

Composite

animation: grow — scaleX(0.4) → 1

Accessibility

How interfaces work for everyone.

WCAG

Web Content Accessibility Guidelines. The standard most teams use for color contrast. AA requires 4.5:1 for body text, 3:1 for large text and UI components.

$1,280.00

Paid Oct 3 · Visa ending 4242

Body text, AA

4.5:1

Fail

Large text and UI, AA

3:1

Fail

Text color · gray-900

—

Prefers color scheme

A media query that detects the user’s system theme preference. The right way to honour dark mode without requiring a separate in-product setting.

Inbox

Drafts

Focus trap

Keeping keyboard focus inside an open modal or dialog. Without it, focus escapes to the page behind the overlay.

Overview

Projects

Members

Delete project?

Pixel Studio and its 24 files will be removed.

Cancel

Delete

Focus is in the dialog

Semantic HTML

Using the right element for the job. A button handles keyboard events, focus, and role for free. A div styled as a button needs all of that added back manually.

Pixel Studio

Last edited yesterday

Color-only state

Using color as the sole signal for a state change. An error shown only by a red border is invisible to colorblind users. Always pair color with an icon or text.

Name

Ada Lovelace

Email

ada@studio

APCA

Advanced Perceptual Contrast Algorithm. A newer contrast model that accounts for font size and weight. More nuanced than WCAG for real-world conditions. The two specs sometimes disagree.

WCAG 2

APCA

Continue

3.3:1

Lc 65

Continue

6.4:1

Lc 45

Tab order

The sequence keyboard focus moves through when pressing Tab. Should follow a logical reading order. Unexpected jumps are often caused by DOM and visual order being out of sync.

First name

1

Ada

Last name

3

Lovelace

Email

2

ada@studio.co

Phone

4

+44 20 7946

Save billing details

aria-label

An accessible name for an element with no visible text. Should describe the action, not the element type. Search, not icon.

Projects

DOM order

The sequence of elements in the HTML. Screen readers follow this, not visual order. Reordering visually with CSS while leaving the DOM unchanged creates a disconnect between what is seen and what is read.

Add to bag

1

$32.00

2

3

Lagoon print

A3 · Matte paper

4

Read as: Add to bag, button → $32.00 → image → Lagoon print

Label association

Linking a label to its input via matching for and id attributes. Without it, clicking the label does not focus the field.

Email

Keep me signed in

Click the labels, not the controls.

Information Architecture

How content is structured and found.

Progressive disclosure

Showing only what is needed at each step, revealing complexity as the user goes deeper. The opposite is putting everything on one page.

New project

Name

marketing-site

Framework

Next.js

Mental model

The user’s internal picture of how something works. Good IA matches it. When it does not, users get lost and blame themselves.

Looking for: Q3 budget, a Finance file

Spreadsheets

Q3 budget

Hiring tracker

PDFs

Brand guidelines

Q3 board deck

Documents

Launch plan

Offsite agenda

Empty state

The view when there is no content yet. Should explain why and offer a next step. No data ends the journey.

Projects

0 total

No projects yet

A project holds your deployments, domains and environment variables.

Onboarding

Introducing a new user to a product. The best onboarding delivers value immediately. A user who completes one meaningful action is more likely to return than one who watched a tour.

Home

Invoices

Clients

Reports

This is Home. Your overview lives here.

1 of 4

Wayfinding

The system of signals that help users understand where they are, how they got there, and where they can go. Breadcrumbs, active states in navigation, page titles, and URL structure all contribute. When wayfinding breaks down, users feel lost without being able to say why.

tidewater.dev/app/view?id=8f3a2c

Overview

Deployments

Analytics

Settings

Details

tidewater.com

Valid

www.tidewater.com

Redirect

Labelling

The words used for navigation items, section headers, and categories. Labels that match user vocabulary get used. Labels that reflect internal naming conventions get ignored or searched around. Search query data is often the most honest signal of where labelling has failed.

Search as escape hatch

When users resort to search because navigation has failed them. High search volume for things that should be findable by browsing is a signal the IA needs work, not that search needs to be better.

Search

Overview

Customers

Settings

Account

Invoices

Visits to Invoices via

Search

74%

Navigation

26%

“invoices” is 41% of all searches

Card sorting

A research method where users group topics or features into categories that make sense to them. Used to validate or challenge IA decisions before building. Reveals the gap between how designers label things and how users think about them.

Account

Password

Invoices

Plan

Workspace

Team

Two-factor

Developers

API keys

Hierarchy

The ranking of elements by importance. Without it, everything competes and nothing wins.

Pro plan

$24 per month

Unlimited projects, custom domains and priority support.

Error state

What the UI shows when something fails. Should say what went wrong and offer a specific way to recover.

Invoice #1042

$24.00

Visa ending 4242

Something went wrong.

Confirmation dialog

A prompt before a destructive or irreversible action. Should describe what will be lost, not just ask are you sure. Keep the destructive and safe actions visually far apart.

Delete project

Removes marketing-site and everything deployed from it.

Signpost

A UI element whose only job is to orient the user: a section header, a category label, a step indicator. Good signposts are invisible when working. They only become noticeable when missing.

Maya Chen

221 Larkin Street

San Francisco

94102

Standard · 3–5 days · Free

Express · Tomorrow · $12

Depth

How many levels of navigation a user must traverse to reach content. Three levels is generally the limit before users lose track of where they are. Deeper structures need better wayfinding, or a flatter rethink.

Workspace

…

2026

Brand refresh

Workspace

Teams

Design

Projects

2026

Brand refresh

Clicks to reach

5

Content inventory

A complete list of everything in a product or site, used to identify gaps, duplicates, and orphaned pages before restructuring. Skipping it leads to redesigns that move the same broken content into a new container.

Page · 142 total

Action

Pricing

/pricing · 2 days ago

Keep

Plans

/plans · 2 years ago

Merge

Getting started

/docs/setup · 1 month ago

Keep

Quickstart

/docs/quickstart · 1 year ago

Merge

Launch week 2022

/blog/launch-2022 · 3 years ago

Delete

Summer internship

/careers/intern · 2 years ago

Delete

Copywriting

How words guide and reassure.

Microcopy

Short UI text: labels, error messages, placeholders, tooltips. Has an outsized effect on how trustworthy a product feels.

Invite

Email

Required field.

Error message

Text explaining what went wrong and how to fix it. Invalid input names nothing. Your email must include an @ symbol names everything.

Email

Invalid input

Sentence case

Capitalising only the first word and proper nouns. The default for UI labels. Title Case On Everything reads like a legal document.

Account Settings

⌘,

Invite Team Members

Export As PDF

Connect To GitHub

Keyboard Shortcuts

?

Sign Out Of All Devices

Inline error

An error message next to the field that caused it. A summary at the top of a form makes users hunt. Inline is unambiguous.

There were 2 problems with your payment details. Please review and try again.

Card number

Expiry

Tone

How the voice adapts to the moment. The same product can be encouraging during onboarding, neutral in settings, and careful around destructive actions. Same voice, different register.

Let’s make your first project

Name it anything. You can invite your team once it’s set up.

Destructive language

The copy on actions that cannot be undone. Delete, remove, disconnect, revoke. Should be unambiguous. Softening it with neutral language like clear or reset when the action is permanent misleads users about the consequences.

Reset workspace?

This will clear your workspace and give you a fresh start.

Truncation strategy

Deciding where and how text gets cut when it overflows. A name truncated mid-character is worse than one cut at a word boundary. Titles, labels, and descriptions each need their own truncation logic.

Quarterly-board-presentation-final-v3.pdf

Alexandra Montgomery

Homepage hero exploration (dark).fig

Kofi Mensah

Customer interviews transcript 2026-09-14.docx

Mateo Fernández

Sidebar width

200px

Numeric formatting

How numbers are written in the interface. 1,000 vs 1000. 3.5k vs 3,500. $1.00 vs $1. Consistency matters more than the specific convention, but the convention should match the user’s locale.

Seats used: 1000
API calls: 3.5k
Storage: 12400.5 GB
Per call: $1
This month: $2817.4

CTA

Call to action. The label on the primary action. Save changes builds more trust than Submit. Own the action, do not apologise for asking.

Edit profile

Name: Ines Duarte
Role: Product designer
Timezone: Lisbon (GMT+1)

Placeholder

Hint text inside an input that disappears when the user starts typing. Cannot replace a label. By the time they need the reminder, it is gone.

New project

Front-loading

Putting the most important word first. Export ready beats Your export is complete and available for download. Users scan.

Notifications

Your export is complete and available for download
2m
We wanted to let you know that your last payment failed
1h
There is a new comment from Ines on the Homepage file
3h
As of today, the scheduled maintenance has been moved
1d

Voice

The consistent personality behind all the words in a product. Formal or casual, technical or plain, warm or neutral. Voice stays the same regardless of context. Tone shifts within it depending on the situation.

Empty state

There are currently no messages in your inbox.

Upload failed

The file could not be uploaded. Please verify the format and retry.

Export done

Your export has been completed successfully.

Success message

Confirmation that an action completed. Often neglected. Should be specific (Saved, not Done), and brief. A success message that reads like a press release has missed the point.

Done

Scannability

Text written to be read quickly rather than thoroughly. Short sentences, active voice, key information first. Most UI copy is never fully read. Writing for scanning is not dumbing down, it is respecting the user’s attention.

Change your plan

Please note that if you decide to proceed with changing your plan, the change will take effect at the start of your next billing period on November 1, after which you’ll be charged $12 per month, your team will be limited to 3 seats instead of 10, and version history will only be kept for 7 days.

Contextual help

Explanatory text placed close to the thing it explains, at the moment the user needs it. Different from a tooltip, which requires hover, and from documentation, which requires navigation. The best contextual help is a single sentence that removes the need to ask.

Upgrade to Pro

Pro plan: $48 / month
Due today: $27.10

With a tooltip, the answer waits behind a hover.

Tools

How design is made and shared.

Design system

A shared set of components, tokens, patterns, and guidelines. At its best a living product, not a static document. The gap between the system and what ships is where inconsistency lives.

Checkout

/checkout

Settings

/settings

Invite

/team/invite

Variables

Named containers for values like colors, spacing, or type sizes that can be reused and updated from one place. Change the variable and everything referencing it updates. The foundation of any scalable design system.

accent

#D9A21B

Weekly digest

Auto-save drafts

Storage

6.2 of 10 GB

Manage plan →

Visual language

The cohesive set of decisions covering color, type, shape, motion, and tone that makes a product recognisable across every touchpoint. When it’s working, you know the product without seeing its name.

All set! Your invoice is on its way

Seats used

7 of 10

Prototype

An interactive mockup used to test or communicate a flow before it’s built. Can range from a few linked screens to something nearly indistinguishable from the real product. The fidelity should match the question being asked.

Choose a plan

Tap the first row to follow the flow.

Redline / annotation

Measurements and notes added to designs to communicate intent to developers: spacing values, color tokens, interaction behaviour, edge cases. Less necessary when teams share a design system, but still useful for anything non-standard.

Noor Haddad

Shared 2 photos with you

HiDPI / Retina

Screens with twice or more the pixel density of a standard display. Assets not prepared for it look blurry. Icons, images, and borders all need to account for 2x and sometimes 3x densities.

Actual size

On a 3x screen · 24px asset

Source of truth

The single place a team defers to for design decisions. Traditionally a Figma file, but increasingly the codebase itself as teams work closer to the real experience than a facsimile of it. Wherever it lives, it only works if everyone uses it.

color/accent, as each place sees it

Figma library

#D9A21B

Edited here

Codebase

#D9A21B

In sync

Docs site

#D9A21B

In sync

Tokens

Design decisions stored as named variables that both design tools and code can reference. A token like --spacing-4 means the same thing in Figma and in a stylesheet. Tokens are what make a design system portable across platforms.

Nightly backup

Completed 2 min ago

Figma · Padding

spacing-4

padding: var(--spacing-4);

/* 16px */

Artboard / Frame

A named canvas in a design file representing a screen, view, or component. In Sketch they’re artboards, in Figma they’re frames. Frames also define clipping, layout grids, and auto layout behaviour, making them more structural than their name suggests.

Settings — Mobile

180 × 200

Profile

Display name

Email

Time zone

Handoff

The moment design moves to engineering. Done well, it means accurate specs, shared tokens, and a designer who stays available for questions. Done poorly, it means developers making design decisions on their own.

Design

Save changes

Fill

gray-1200

Radius

full

Height

36

Text

14 / medium

Built

Save changes

Matches design

Moodboard

A collection of visual references to explore or communicate a direction before committing. Used to align stakeholders on tone and aesthetic. The best ones make an argument. The worst are just Pinterest boards.

Warm evenings

Low sun, soft contrast, nothing cold.

Open Graph

The metadata controlling how a link previews when shared: the image, title, and description. Often an afterthought, but the first impression of a page for most people who don’t visit it directly.

Maya Okafor

10:42

Exports shipped, worth a look

fieldnotes.app/changelog

fieldnotes.app

Exports are 4× faster

PDF and PNG exports now render in the background, so you can keep editing.

Analysis

How design decisions are measured.

A/B test

Two design variants running simultaneously to measure which performs better. Validates decisions with real behaviour rather than internal opinion. Results are only as good as the metric being measured.

Submit

Variant A

Winner

0.0%

0 visitors

Start free trial

Variant B

Winner

0.0%

0 visitors

Session recording

Video of individual user sessions through a product. Shows exactly where people hesitate, get confused, or give up. More specific than a heatmap, and harder to ignore.

Create a workspace

Workspace name

Tidewater

Company size

Select…

▾

Continue

0:34 / 0:42

4 rage clicks on Continue

Conversion

The moment a visitor takes the desired action. Design affects it through clarity, trust, friction reduction, and the quality of the CTA.

Create account

Email

Password

Full name

Sign up

Conversion

6.1%

610 of 10,000 visitors signed up

Fields in the form

3

Retention

How many users come back after their first visit. A product can have strong acquisition and terrible retention. Design affects both, but retention is the harder and more important problem.

W0

W1

W2

W3

W4

W5

Mar 3

100

41

30

26

24

23

Mar 10

100

44

33

28

26

Mar 17

100

52

41

36

Mar 24

100

58

47

Mar 31

100

61

Mar 17 cohort · 41% active in week 2

NPS

Net Promoter Score. A measure of how likely users are to recommend a product, on a scale of 0 to 10. A blunt instrument, but widely used as a rough signal of overall satisfaction.

How likely are you to recommend Fieldnote to a friend?

Not likely

Very likely

100 responses

NPS +25

Detractors 22%

Passives 31%

Promoters 47%

Heatmap

A visualisation of where users click, tap, or scroll on a page. Shows what draws attention and what gets ignored. Useful for spotting affordance problems and finding content nobody reaches.

Fieldnote

Pricing

Sign in

Notes that file themselves.

Capture anything. Fieldnote sorts it by project.

Get started

Capture

Sort

Share

The hottest spot is the image. It isn’t a link.

Funnel

The path users take toward a conversion goal: signing up, purchasing, completing a task. Drop-off at any step is a design problem. Most funnels lose the majority of users before the end.

Viewed pricing

12,400

66% drop off

Started signup

4,210

29% drop off

Verified email

3,010

73% drop off

Created a project

820

50% drop off

Upgraded

410

Bounce rate

The percentage of visitors who leave without taking any action. High bounce rates on key pages often point to a mismatch between what users expected and what they found.

Churn

Users who stop using the product. The inverse of retention. High churn means the product is not delivering enough value to keep people coming back.

Active users

2,739

Lost this year

1,861

Jan

No churn

Dec

Monthly churn

8%

Scroll depth

How far down a page users actually read. Most don’t get to the bottom. Content and CTAs buried below the fold may be seen by far fewer people than assumed.

Start free

100%

74%

46%

28%

19%

Seen by 19%

Components

The building blocks of an interface.

Button

The primary action trigger. Needs distinct default, hover, active, focus, disabled, and loading states. Never more than one primary button in the same view.

Invite teammate

They’ll get an email to join Tidewater.

maria@tidewater.com

Textarea

A multi-line input. Needs the same state treatment as a single-line input.

What could be better?

Visible to the product team.

63/140

Checkbox

A toggle for a binary choice. Clicking the label should toggle it, not just clicking the box itself.

Email me about

Mentions

When someone @mentions you

Replies

Replies to threads you’re in

Weekly digest

A summary every Monday

Switch

A toggle for an on/off state. Implies an immediate effect. Use for settings that take effect without a save action.

Show weekends

24-hour time

Mon

9am

Tue

Wed

2pm

Thu

10am

Fri

Drawer

A bottom sheet that pulls up from the base of the screen. A common mobile replacement for a dialog.

Lagoon

Today, 09:41 · Lisbon

Badge

A small label attached to another element. Implies a count when numeric. When it carries a word like New or a status label, it behaves more like a tag and needs different treatment.

Search mail

3

Inbox

3

Starred

Sent

Accordion

Stacked sections that expand and collapse. Good for FAQs and secondary content. Not a substitute for tabs when users need to compare across sections.

Billing questions

On the first of each month, for the seats you had on the last day of the previous one.

Stepper

A multi-step flow that shows progress through a sequence. Showing all steps upfront sets expectations. Hiding them creates anxiety.

Cart
Shipping
Payment
Review

Your cart

Linen overshirt, M

$88

Canvas tote

$24

Skeleton

A placeholder that holds the shape of content while it loads. Keeps the layout stable and signals what’s coming. Better than a spinner for list and page loads.

Activity

View all activity →

Avatar

A small image representing a user or entity. Needs a fallback when the image fails, usually initials or a generic icon.

Members

4 people

Maya Patel

Owner

Jonas Berg

Editor

Lena Ito

Editor

Sam Okafor

Viewer

Data table

A structured grid of rows and columns. Numbers should be right-aligned with tabular nums. Proper alignment does the work zebra striping is often used to compensate for.

Account	Seats	MRR
Kestrel	128	$11,520.00
Lumen Labs	14	$1,260.50
Halcyon	1,042	$81,711.00
Fieldwork	7	$588.00
Orbital	311	$24,880.25

Separator

A visual divider between items or sections. Often overused when better spacing would do the same job.

Profile

Name

Maya Patel

Email

maya@kestrel.co

Role

Owner

Billing

Plan

Team · annual

Seats

12 of 15

Renews

Mar 4, 2027

Input

A text entry field. Needs a persistent label above it, not just a placeholder. Each state (default, hover, focus, error, disabled) should be visually distinct.

Select

A dropdown for choosing one option from a list. The native HTML element is accessible but hard to style. Custom selects need careful keyboard and focus handling.

Role

Jonas Weber

Can edit files

Custom: arrow keys, Enter, Esc and typing a letter all work.

Radio group

A set of options where exactly one can be selected. Distinct from checkboxes, which allow multiple.

Standard

4–6 business days

Free

Express

2 business days

$9

Overnight

Tomorrow by 10am

$24

Total

$137.00

Slider

A control for selecting a value within a range. Should update the value live on drag, not only on release.

Exposure

0

Warmth

0

Sheet

A panel that slides in from the screen edge. Common on mobile for secondary navigation or contextual actions. Same focus and dismissal rules as a modal.

Orders

#1042

Lena Fischer

$84.00

#1041

Tomás Ortega

$212.50

#1040

Aiko Tanaka

$39.00

#1039

Sam Okafor

$148.20

#1038

Priya Nair

$66.00

Toast

A temporary notification that auto-dismisses. Duration should reflect reading time, not a flat 2 seconds regardless of length.

Tag

A label that categorises content. Tags are standalone, selectable, or removable. Badges are attached and informational. They are not the same thing.

APP-412

Sign-up button unresponsive on iPad

Labels

Bug

Onboarding

iOS

Enter to add · Backspace to remove

Tabs

Switches between related views in the same space. Best for filtering the same content by time or category. Not for navigating unrelated sections.

Visitors

4,182

+12%

Carousel

A horizontally scrollable row of items. On desktop, often a sign the layout hasn’t been solved. On mobile, a natural pattern. Either way, the first item gets most of the attention.

Pagination

Controls for moving between pages of content. Use when the full list is too long to load at once. Infinite scroll is an alternative with different tradeoffs.

INV-2036

Lumen Labs

$1,975.85

INV-2035

Brightside

$1,494.22

INV-2034

Kestrel

$1,013.59

INV-2033

Halcyon

$532.96

INV-2032

Fieldwork

$4,251.33

6–10 of 47

Spinner

An indeterminate loading indicator. Good for short action-level waits. For page or list loads, a skeleton is almost always better.

Google Drive

Synced 2m ago

Folder

Card

A contained surface grouping related content. The inner radius should be smaller than the outer, calculated from the padding. Making the full surface a link makes text selection impossible.

Lagoon cabin

Lake Bled · $184 / night

outer 20

padding 10

inner 10

Padding

10px

Combobox

An input that filters a dropdown as you type. Combines the feel of a text field with the constraints of a select.

Timezone

Progress

A bar showing completion through a determinate process. For unknown durations, use a spinner instead.

onboarding-walkthrough.mp4

0.0 of 8.4 MB · 4s left

0%

Empty state

What a view shows when there is no content yet. Should explain why and offer a first action. No items found tells the user nothing.

Webhooks

No webhooks yet

Get a request on your server when an invoice is paid or a customer signs up.