Note: Profile mockup uses --c- prefixed tokens (e.g. --c-follow-border, --c-gear-stroke). Foundations uses longer names (e.g. --follow-border, --icon-gear). Both conventions are documented — do not rename.
Typography
Type Scale
Display — Raptor V2 700 / 28px / -0.3px
Welcome to not'd
Large Title — Raptor V2 700 / 26px / -0.4px
elan
Title — Raptor V2 600 / 20px / -0.2px
To Pimp a Butterfly
Headline — Raptor V2 600 / 17px / 0
This account is private
Name — Raptor V2 700 / 15px / 0
Albums for Night Driving
Body — Inter 460 / 15px
This album changed everything for me. The way Kendrick weaves jazz, funk, and spoken word into something that feels both monumental and deeply personal.
Callout — Inter 500 / 14px
Follow · Edit Profile · Log
Subhead — Inter 400 / 13px
Kate Bush · 2d · late-night, neon, alone
Desc — Inter 460 / 13px
enjoys listening to albums start-to-finish
Data — Inter 400 / 11px / tabular-nums
8 albums · 47 albums · 284 followers
Caption — Raptor V2 600 / 11px / uppercase
Current Rotation · Recent Logs · Lists
Spacing
Scale
xxs 2
xs 4
sm 8
md 12
lg 16
xl 24
xxl 32
xxxl 48
Shape
Border Radii
none 0
xxs 3
xs 4
md 10
lg 14
xl 20
full ∞
ALBUM ART RADIUS — TIERED BY SIZE
Small · 3px ≤64px
Medium · 4px 65–120px
Large · 6px 120px+
Grid · 0px zero-gap
Radius tapers proportionally: ~5% at small, ~4% at medium, ~2% at large. Shelf items (62–94px) use small tier (3px) — tighter radius reinforces physical sleeve feel under perspective transforms.
Components
Primitives
Star Rating — Display
★★★★★5 stars — filled only, no empty slots
★★★★4 stars — no trailing ☆
★★★★★4.5 stars — CSS clip half star, not ½ literal
Section Header — with rule, label left, action right
Current Rotation
Manage
Follow Button — Primary CTA (filled) vs Secondary States (outlined)
Section Header Actions — subordinate links on rule-through line
Recent Logs
All logs
Current Rotation
Manage
Log Entry Row — album art + title/stars, artist/time, journal excerpt
Hounds of Love
★★★★★
Kate Bush ·2d
A perfect album, front to back. The way side two builds from dream into urgency is something I think about constantly…
List Text Hierarchy — 3-tier text stack (title, description, count)
Albums for Night Driving
late-night, neon, alone
8 albums
List Coverflow Art — 3-cover perspective stack (72x48 container)
Light
Dark
Ghost Shelf — rotation empty state (shelf-a-5 pyramid, opaque fills)
Light
Dark
Privacy Wall — centered private profile gate
This account is private
Follow to see their logs, lists, and rotation.
Light
This account is private
Follow to see their logs, lists, and rotation.
Dark
Error State — profile load failure with retry
Couldn't load profile
Retry
Light
Couldn't load profile
Retry
Dark
Other-User Empty — no content yet, no decoration
No albums yet
Light
No albums yet
Dark
Tab Bar Icons — 24px, outline (inactive) / filled (active)
Inactive
Active
Inactive
Active
Inactive
Active
Light
Inactive
Active
Inactive
Active
Inactive
Active
Dark
Motion
Morphing Icons — 3-Line System
Every icon is exactly 3 <line> elements in a 14×14 viewBox. Icons morph by interpolating 12 numbers (3 lines × 4 coordinates). Unused lines collapse to the center point (7,7).
Inspired by Benji Taylor. In React Native, each coordinate is a Reanimated shared value animated with withSpring.
All Icons — tap any to morph the preview
Morph Preview
Light
Dark
plus
Coordinate Map — all icons are 3 lines in a 14×14 viewBox
Icon
L1 x1,y1
L1 x2,y2
L2 x1,y1
L2 x2,y2
L3 x1,y1
L3 x2,y2
Rot
Search Icon Morph — circle+path system
Magnifying glass ↔ person silhouette. 220ms damped spring (subtle overshoot) on circle attributes; the small handle/legs piece can't path-interpolate (different topologies: line vs arc), so it crossfades inside the spring window. Triggered by @ prefix in search input. Tap tiles or type in pills below.
Feed lives left, Search in the middle, Profile lives right. Tapping between them slides directionally while the header transforms: avatar scales (or collapses into the search pill), text cross-fades, action icon morphs via the 3-line system.
Tap any tab icon to trigger the transition. Feed→Search: avatar collapses, pill expands from left. Search→Profile: pill collapses, avatar grows.
Interactive Demo — tap tabs to transition1×
9:41
not'd
elan
47 albums · 284 followers · 163 following
enjoys listening to albums start-to-finish
Light
9:41
not'd
elan
47 albums · 284 followers · 163 following
enjoys listening to albums start-to-finish
Dark
Timing Specification — values for React Native translation
Property
Duration
Curve
RN Equivalent
Content slide (translateX)
220ms
snap
withTiming(x, { duration: 220 })
Header text exit ("not'd")
120ms
power1.out
withTiming, asymmetric (fast exit)
Header text enter (name/stats/bio)
140ms
snap
withSpring, staggered 50ms
Avatar scale
220ms
snap
withTiming on layout props
Action icon morph (coords)
400ms
damped spring
withSpring(SPRING_SMOOTH)
Tab icon fill/outline swap
150ms
power1.inOut
withTiming, immediate
Content slide uses timing (not spring) to avoid overshoot revealing empty space at content edges. Icon morph uses spring for physicality. Tab icon state change is near-instant — acknowledge the tap before the transition begins.
Motion
Tab Transitions — Empty Profile State
Same transition, but landing on a first-time user’s empty profile. Ghost scaffolding is static — no entrance animation.
Tap any tab icon to trigger the transition. The empty profile shows placeholder slots for rotation, logs, and albums.
