Design system

How Clurb is made to look and feel.

The same values the Mac app uses. Paper is for your things; glass is for the controls that float above them.

The idea

Clurb is a small desk. Everything you make is paper: notes, luggage-tag bookmarks, receipt clips, cards on a board. Paper has color, a soft shadow and a slight tilt, and it lifts when you pick it up. Everything you do to the paper, like the action strip, toasts and the clips header, is Liquid Glass floating above it, as Apple's guidelines ask. The pin is the mascot and marks what you keep.

Paper colors

The big number is ink's contrast on each paper. Everything passes 4.5:1, most pass 10:1. In Dark Mode, paper dims 10% so it doesn't glare, and ink stays dark on it.

Ink, desk and surfaces

Pin colors

You pick the pin's color and face: Clurb, Sleepy, Shades, Wink, Bot or Plain dot. On Bubblegum, buttons use ink text (5:1), never white (3:1).

Type

Role	Face	Size
Brand moments	Bricolage Grotesque	Welcome, App Store art, this site's headlines
Note title	SF Pro, semibold	19 to 21
Note text	SF Pro, regular	15 to 16, line height 1.4. Grows with the system text size
Clip text	SF Mono	13
Everything else	SF Pro	System sizes, title case for buttons and menus, sentence case for descriptions

Shape

Object	Corners	Other
Note	10, all four, continuous	Default 236 × 228, rest tilt −3° to 3°, 0° when selected
Bookmark tag	16 left, 46 right	300 × 92, favicon tile 46, a punched hole
Clip receipt	6	Dotted perforation, an expiry ring
Board column	14	Clear, a dashed outline, labels on white tape
Hit targets	36 pt minimum, strip buttons and handles 42 to 44 pt

The dots

Dots are Clurb's small signature.

• Grab dots. Three 5 pt circles, 5 pt apart, ink at 35%, centered in a note's 26 pt top strip. They say "hold here".
• Checkboxes. 15 pt rings in muted ink; ticked ones fill with ink and the line is struck through.
• The pin's eyes. Two white circles with ink pupils. On this site they follow your pointer and blink every few seconds.
• The orbit. On this site's home page, Clurb's features circle the pin as bubbles: notes, boards, bookmarks, clipboard, reminders, drawing, archive. One slow ring, 90 seconds a turn, each bubble bobbing a little. It stops for Reduce Motion.

Motion

Motion only answers you: picking up, putting down, appearing. Nothing moves on its own except a ringing reminder and the pin's blink.

Moment	How it moves
Pick up	Scale 1.04, extra tilt 2 to 3°, a deeper shadow. Spring, response 0.12, damping 0.75
Put down	Settles back to rest tilt on the same spring
Pin on and off	Drops in from above. Spring, response 0.3, damping 0.6
Appearing (this site)	Fade and barely scale, 0.9 s, iCloud's easing
Reduce Motion	Every move becomes a 0.15 s fade. No tilt, no springs

iCloud's easing, cubic-bezier(.32, .08, .24, 1):

Clurb's spring for small controls, cubic-bezier(.34, 1.36, .5, 1):

Glass, and where it isn't

Liquid Glass (regular) is only for floating controls: the action strip, the clips header and footer, toasts and notices. Never on notes, tags, receipts or the pin. Apple's guidelines put it plainly: don't use Liquid Glass in the content layer. With Reduce Transparency or Increase Contrast, glass turns solid on its own.

Words

• Plain and short. "Note deleted." not "Your note has been successfully deleted."
• Name things the same everywhere: notes, bookmarks, boards, clips, Archive, Recently Deleted.
• Title case on buttons and menu items, sentence case for descriptions. An ellipsis only when more input follows.
• Promise only what ships. No features that aren't there yet.

Accessibility

• Every gesture has a menu item or shortcut. Nothing is hover-only or touch-only.
• Text contrast of at least 4.5:1 everywhere, measured, in Light and Dark.
• VoiceOver names every item and offers its actions. Text grows with the system size.
• Increase Contrast adds ink outlines; Reduce Transparency and Reduce Motion are respected throughout.