L-000 · v0.2
Component library
The site is drawn as a floor plan: square corners, ink rules, a blueprint blue and a highlighter yellow. Tokens live in app/globals.css, and the reasons for each one are in brief.md.
L-101
Color
Blueprint on white. Cobalt carries large fields, not just accents. Marker yellow only ever means “this one is being handled.”
sheet
#ffffff
Drawing sheet: page ground
vellum
#e9eefb
Tracing paper: alternate panels, readouts
grid
#cfd8f3
Drafting grid, light rules
ink
#0e1a3a
Drafting ink: text, walls, 2px rules
muted
#4a5578
Secondary text
cobalt
#2446d8
Blueprint line: primary actions, large fields
cobalt-deep
#14286f
Title block, dark fields
marker
#ffcf3f
Highlighter: the room or row being handled
L-102
Type
Standard system fonts: San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Hierarchy comes from size and weight.
Your home, handled.
Display: System sans 700 · 84 / 0.95 · −3.5%
Your home, handled.
Heading: System sans 700 · 56 / 1.02 · −2.5%
Your home, handled.
Title: System sans 700 · 24
Your home, handled.
Body: System sans 400 · 18 / 1.6
K-01 · KITCHEN
Annotation: System mono 400 · 14, used only in drawings and sheet numbers
L-202
Marks
Door swing logo (the plan symbol for a door: come right in), grid bubbles for steps and rooms, and sheet numbers in place of eyebrows.
L-301
Floor plan
Original plan with seven rooms. On the home page it's interactive in the hero and scroll-driven in the room tour. Shown here with the bath marked.
L-302
Move route
Scroll this into view: the route fills and boxes travel from the current home to the new one.
L-401
Move estimator
Live planning range from home size, distance and date flexibility. Rates are samples and are labeled as such.
ILLUSTRATIVE PLANNING RANGE · SAMPLE RATES
$1,340–$1,700
About 7 crew hours, packing not included
Illustrative estimate for planning. Booked moves use an itemized quote from a licensed mover.
L-402
Accordion
One open at a time. The open row is marked, and the plus loses its vertical stroke.
Answer text sits at a comfortable 64 characters wide.
L-501
Motion
Every animation has a job. Nothing fades up on scroll, and nothing is hidden waiting for JavaScript.
Walls draw in
CSS stroke-dashoffset, 1.1s, cubic-bezier(0.65,0,0.35,1), 0.12s stagger
Drafting the house; runs without JS
Headline ink
CSS clip-path wipe, 0.9s, cubic-bezier(0.77,0,0.175,1), 0.18s stagger
Ink laid down left to right
Room highlight
Fill to marker, 0.2s ease-out, on hover, focus, tap or scroll
Shows what's handled where
Move route
motion useScroll → pathLength + box x, linked to scroll
Your stuff moves with the page
Dimension line
CSS scroll-driven scaleX where supported, drawn otherwise
Measuring out the steps
Button
Highlighter background-size wipe, 0.25s ease-out
A marker pass
Smooth scroll
Lenis, duration 1.1
Keeps the sticky tour and route smooth