Unposed · dev

Paper & film v1

Every colour token, the type ramp, and every control class from docs/design-system.md. The first scope follows the browser colour scheme; the two below force a theme so both can be read at once.

Follows the browser

Switch the browser or the system to dark and this scope swaps with it.

Colour

Design system section 2. Translucent tokens sit on a stripe so alpha reads.

Ground and surfaces

--ground 
--ground-0 
--surface 
--surface-2 

Text

--text 
--text-2 
--text-3 

Accent (wisteria)

--accent 
--accent-pressed 
--accent-soft 

Destructive (ember)

--ember 

Lines

--hairline-strong 
--hairline 
--hairline-soft 

Primary button

--btn-bg 
--btn-fg 

Materials

--glass 
--glass-border 

Type

Design system section 3. Size / weight / tracking / line height.

RevealDisplay · .t-display · 40 / 800 / -0.045em / 1.00
Your eventsTitle 1 · .t-title1 · 34 / 800 / -0.040em / 1.00
Maya and TomTitle 2 · .t-title2 · 28 / 800 / -0.040em / 1.04
Share the linkTitle 3 · .t-title3 · 22 / 700 / -0.030em / 1.10
Rooftop dinnerHeadline · .t-headline · 17 / 700 / -0.012em / 1.20
Reveals in 6 hoursBody strong · .t-body-strong · 15 / 700 / -0.012em / 1.30
Photos stay hidden until the reveal.Body · .t-body · 15 / 500 / -0.008em / 1.40
42 photos from 11 guestsSecondary · .t-secondary · 13 / 500 / 0 / 1.35
Section labelLabel · .cap · 11 / 700 / 0.14em / caps
9,999 · 12.4k · 00:42.num · tabular figures for counts and times

Space

Design system section 4. Base 4.

--s1 ·  
--s2 ·  
--s3 ·  
--s4 ·  
--s5 ·  
--s6 ·  
--s7 ·  
--s8 ·  

Shape

Design system section 5. Corners are continuous on iOS; the web uses the same radii.

Thumbnails, tiles--r-sm ·  
Fields, sheets--r-md ·  
Cards, panels--r-lg ·  
Buttons, chips--r-full ·  

Elevation

Design system section 6. A shadow states elevation, never decoration.

e0 flat
e1 card
e2 floating

Glass

Design system section 7. Blur 24, saturate 140%, floating controls only.

Join

Controls

Design system section 9. Minimum target 44, 8 between two targets.

Primary buttoncapsule · 52 high · 17/700 · one per screen
Inline primarycapsule · 38 high · 14/700
Accent buttonwisteria fill · white text
Secondary button38 high · 1px hairline-strong · ink text
Tertiary buttonaccent text · no chrome
Destructiveember text · ember outline
Disabledsurface fill · ink-3 text · no border
Small button34 high · 13/700
Icon button40 circle · 1px hairline-strong · icon at 20
Chipcapsule · 36 high · 14/600
Segmentedtrack surface · capsule · 36 high
Field52 high · radius 12 · surface fill · 1px hairline
Maya and Tom
Field, focus1.5px accent · 3px accent-soft ring
mt
Use at least three characters.
Field, error1.5px ember · 13px ember message
18 of 29 photos
Progress4px track in accent-soft · accent fill · tabular count
Link copied
Toastink fill · paper text · 44 high · capsule

Surfaces

Design system section 10. One 16 radius container: photo panel plus paper footer.

Maya and Tom

42 photos · 11 guests

Reveals in 6 hours

Capture closes at midnight

Rooftop dinner

3 days ago · 18 photos

No photos yet

Share the link and guests can start shooting.

Light (paper), forced

Ground #F1EFEA, text #16150F, accent #6F57C9.

Colour

Design system section 2. Translucent tokens sit on a stripe so alpha reads.

Ground and surfaces

--ground 
--ground-0 
--surface 
--surface-2 

Text

--text 
--text-2 
--text-3 

Accent (wisteria)

--accent 
--accent-pressed 
--accent-soft 

Destructive (ember)

--ember 

Lines

--hairline-strong 
--hairline 
--hairline-soft 

Primary button

--btn-bg 
--btn-fg 

Materials

--glass 
--glass-border 

Type

Design system section 3. Size / weight / tracking / line height.

RevealDisplay · .t-display · 40 / 800 / -0.045em / 1.00
Your eventsTitle 1 · .t-title1 · 34 / 800 / -0.040em / 1.00
Maya and TomTitle 2 · .t-title2 · 28 / 800 / -0.040em / 1.04
Share the linkTitle 3 · .t-title3 · 22 / 700 / -0.030em / 1.10
Rooftop dinnerHeadline · .t-headline · 17 / 700 / -0.012em / 1.20
Reveals in 6 hoursBody strong · .t-body-strong · 15 / 700 / -0.012em / 1.30
Photos stay hidden until the reveal.Body · .t-body · 15 / 500 / -0.008em / 1.40
42 photos from 11 guestsSecondary · .t-secondary · 13 / 500 / 0 / 1.35
Section labelLabel · .cap · 11 / 700 / 0.14em / caps
9,999 · 12.4k · 00:42.num · tabular figures for counts and times

Space

Design system section 4. Base 4.

--s1 ·  
--s2 ·  
--s3 ·  
--s4 ·  
--s5 ·  
--s6 ·  
--s7 ·  
--s8 ·  

Shape

Design system section 5. Corners are continuous on iOS; the web uses the same radii.

Thumbnails, tiles--r-sm ·  
Fields, sheets--r-md ·  
Cards, panels--r-lg ·  
Buttons, chips--r-full ·  

Elevation

Design system section 6. A shadow states elevation, never decoration.

e0 flat
e1 card
e2 floating

Glass

Design system section 7. Blur 24, saturate 140%, floating controls only.

Join

Controls

Design system section 9. Minimum target 44, 8 between two targets.

Primary buttoncapsule · 52 high · 17/700 · one per screen
Inline primarycapsule · 38 high · 14/700
Accent buttonwisteria fill · white text
Secondary button38 high · 1px hairline-strong · ink text
Tertiary buttonaccent text · no chrome
Destructiveember text · ember outline
Disabledsurface fill · ink-3 text · no border
Small button34 high · 13/700
Icon button40 circle · 1px hairline-strong · icon at 20
Chipcapsule · 36 high · 14/600
Segmentedtrack surface · capsule · 36 high
Field52 high · radius 12 · surface fill · 1px hairline
Maya and Tom
Field, focus1.5px accent · 3px accent-soft ring
mt
Use at least three characters.
Field, error1.5px ember · 13px ember message
18 of 29 photos
Progress4px track in accent-soft · accent fill · tabular count
Link copied
Toastink fill · paper text · 44 high · capsule

Surfaces

Design system section 10. One 16 radius container: photo panel plus paper footer.

Maya and Tom

42 photos · 11 guests

Reveals in 6 hours

Capture closes at midnight

Rooftop dinner

3 days ago · 18 photos

No photos yet

Share the link and guests can start shooting.

Dark (ink), forced

Ground #141412, text #EDEAE3, accent #8C6AE8.

Colour

Design system section 2. Translucent tokens sit on a stripe so alpha reads.

Ground and surfaces

--ground 
--ground-0 
--surface 
--surface-2 

Text

--text 
--text-2 
--text-3 

Accent (wisteria)

--accent 
--accent-pressed 
--accent-soft 

Destructive (ember)

--ember 

Lines

--hairline-strong 
--hairline 
--hairline-soft 

Primary button

--btn-bg 
--btn-fg 

Materials

--glass 
--glass-border 

Type

Design system section 3. Size / weight / tracking / line height.

RevealDisplay · .t-display · 40 / 800 / -0.045em / 1.00
Your eventsTitle 1 · .t-title1 · 34 / 800 / -0.040em / 1.00
Maya and TomTitle 2 · .t-title2 · 28 / 800 / -0.040em / 1.04
Share the linkTitle 3 · .t-title3 · 22 / 700 / -0.030em / 1.10
Rooftop dinnerHeadline · .t-headline · 17 / 700 / -0.012em / 1.20
Reveals in 6 hoursBody strong · .t-body-strong · 15 / 700 / -0.012em / 1.30
Photos stay hidden until the reveal.Body · .t-body · 15 / 500 / -0.008em / 1.40
42 photos from 11 guestsSecondary · .t-secondary · 13 / 500 / 0 / 1.35
Section labelLabel · .cap · 11 / 700 / 0.14em / caps
9,999 · 12.4k · 00:42.num · tabular figures for counts and times

Space

Design system section 4. Base 4.

--s1 ·  
--s2 ·  
--s3 ·  
--s4 ·  
--s5 ·  
--s6 ·  
--s7 ·  
--s8 ·  

Shape

Design system section 5. Corners are continuous on iOS; the web uses the same radii.

Thumbnails, tiles--r-sm ·  
Fields, sheets--r-md ·  
Cards, panels--r-lg ·  
Buttons, chips--r-full ·  

Elevation

Design system section 6. A shadow states elevation, never decoration.

e0 flat
e1 card
e2 floating

Glass

Design system section 7. Blur 24, saturate 140%, floating controls only.

Join

Controls

Design system section 9. Minimum target 44, 8 between two targets.

Primary buttoncapsule · 52 high · 17/700 · one per screen
Inline primarycapsule · 38 high · 14/700
Accent buttonwisteria fill · white text
Secondary button38 high · 1px hairline-strong · ink text
Tertiary buttonaccent text · no chrome
Destructiveember text · ember outline
Disabledsurface fill · ink-3 text · no border
Small button34 high · 13/700
Icon button40 circle · 1px hairline-strong · icon at 20
Chipcapsule · 36 high · 14/600
Segmentedtrack surface · capsule · 36 high
Field52 high · radius 12 · surface fill · 1px hairline
Maya and Tom
Field, focus1.5px accent · 3px accent-soft ring
mt
Use at least three characters.
Field, error1.5px ember · 13px ember message
18 of 29 photos
Progress4px track in accent-soft · accent fill · tabular count
Link copied
Toastink fill · paper text · 44 high · capsule

Surfaces

Design system section 10. One 16 radius container: photo panel plus paper footer.

Maya and Tom

42 photos · 11 guests

Reveals in 6 hours

Capture closes at midnight

Rooftop dinner

3 days ago · 18 photos

No photos yet

Share the link and guests can start shooting.