Style guide · Vela

Colour

Pine 950#0A120FPage background, text on paper
Pine 900#111C18Dark cards
Pine 800#1A2A24Raised dark surfaces
Paper#EDE9E0Light sections
Paper 2#E2DDD0Cards on paper
Paper 3#F6F3ECLightest
Ember#FF6A3DThe one accent: buttons, the arc
Ember ink#A83A12Ember as text on paper (AA)
Fog#A9B8B0Secondary text on dark (AA)
Slate#4A5A52Secondary text on paper (AA)
Lamp#F2C66DREM sleep, stars
Moss#8DB8A6Light sleep
Deep#3F7A68Deep sleep

Type

Two families: Inter Tight for everything and Red Hat Mono for labels and small figures. No italics.

DisplayInter Tight 600 · 54–160 px · −3.5 %
Sleep on time.
Heading 2Inter Tight 600 · 44–136 px · −3.2 %
One night.
Heading 3Inter Tight 600 · 26–36 px · −3 %
Smart alarm
LeadInter Tight 400 · 18–21 px
Lull works out when to go to bed.
BodyInter Tight 400 · 17 px · 1.55
Paragraph text for articles and descriptions.
LabelRed Hat Mono 500 · 12 px · +8 % · caps
How it works

Components

Primary Ghost SmallPlusFreeNewImprovedFixed

Download on theApp Store Get it onGoogle Play

4.8out of 5
21,400 ratings on the App Store and Google Play

Ink Ghost

Download on theApp Store Get it onGoogle Play

The Phone component: 12 screens

Phone / tonight

Phone / winddown

Phone / breathe

Phone / sounds

Phone / sleeping

Phone / wake

Phone / report

Phone / week

Phone / journal

Phone / day

Phone / alarm

Phone / onboard

Motion system

One curve (cubic-bezier .2,.7,.1,1), three durations (0.4 s hover, 0.7 s appear, 0.9 s reveal) and one direction: bottom to top.

Pattern	Here (CSS/GSAP)
Appear	`[data-appear]`: opacity 0→1, y 24→0, blur 6→0, 0.7 s, stagger 60 ms
Line-by-line text	`[data-lines]`: each word rises from a mask, 70 ms per line
Image reveal	`[data-reveal]`: clip from the bottom, image scale 1.08→1
Words light up	`[data-scrub]`: word opacity follows scroll
Sticky phone	`[data-scroller]`: phone sticks, screen changes per step
Hover	Cards lift, arrows rotate, images zoom 1.05, 0.4 s
Marquee	CSS translate −50 %, 38 s, pauses on hover
Page transition	Pine curtain wipes up (`.curtain`) + View Transitions
Counters	`[data-count]`: numbers count up once
Reduced motion	All of the above off; content visible, marquee wraps

Signature piece: LullPhone

A phone that really works and reads the visitor’s local time. At night it works out when you’d wake if you fell asleep now; in the afternoon, when to go to bed; in the evening it opens wind-down; in the morning, the report. It really plays sound (Web Audio) and breathes with you. It lives in js/lull-phone.js; without JavaScript the static screen stays.

Option	Default	What it does
`enabled`	true	false keeps the static screen (no JavaScript runs).
`variant`	"live"	"static" shows the planner screen with fixed example times.
`wake`	"07:00"	Wake time used for the afternoon and evening plans.
`cycle` / `latency`	90 / 14	Minutes per sleep cycle and minutes to fall asleep.
`windDown`	45	Minutes of wind-down before bedtime.
`name`	"Amara"	Name in the morning greeting.
`accent`	"#FF6A3D"	Accent colour inside the phone.
`audio`	true	Real sounds (rain, brown noise, train, sea) made in the browser with Web Audio. false shows the UI only.
`scrubber`	true	The "Preview another time" slider under the phone.
`now`	null	Fix the time for screenshots, e.g. "23:40". Also `?lull-time=23:40` in the URL; `?lull=static` or `?lull=off` to test the fallback.

CMS collections

Fields marked * have English and Spanish values. The JSON lives in data/; js/cms.js renders it through each list’s <template>.

Collection	Fields	Used on
features (6)	slug, order, name, tagline, summary, screen (option), photo (image), plan (option: free, plus), stat {value, label}, points [{title, text}]	Home, Features, Feature page, Post (reference), Help article (reference), Changelog (multi-reference)
posts (6)	slug, date, readMinutes, category (option), author → team, cover (image), feature → features, featured (toggle), title, excerpt, body (blocks: p, h2, quote, list)	Home, Blog, Post page, Feature page
changelog (8)	version, date, title, items [{tag (option: new, improved, fixed), text}], features → features (multi)	Changelog
help (10)	slug, category (option), feature → features, updated, title, summary, body (blocks: p, steps, note)	Help centre, Help article, Feature page
reviews (12)	name, place, photo (optional), rating, source, featured (toggle), date, title, text*	Home, Reviews
faq (9)	group (option: home, pricing), q, a	Home, Pricing
team (4)	slug, name, photo, role, bio	About, Post (author)
press (6)	outlet, logo (option), date, url, quote*	Press kit

How to edit it

Brand. Edit the design tokens above in css/vela.css. The logo is one SVG in the header and footer.
Photos. All photos are CMS image fields or plain image tags. Keep the focal point in the middle third.
Screens. Each phone screen is an image. Export your own app screens at 1179 × 2556 and swap the image files.
Copy. Home copy lives in the page; everything repeated (features, reviews, FAQ, posts, help, changelog) lives in the CMS.
Signature. The live phone is driven by one script (lull-phone.js) with the options above. Remove the data-lull attribute to use a static screen instead.
Spanish. The Spanish site is built from the same markup via data-es attributes; add ?lang=es to any URL.

Template changelog

1.0 · 26 Sep 2026 · First release: 17 pages, 8 collections, 12 screens, LullPhone.

Style guide.