A title sits in the body family.
No filled icon, no coloured circle, no shadow at rest. Hover lifts 2px and adds a soft drop shadow.
Inside Lanka · Route Studio
Shape a route through Sri Lanka.
A field studio for shaping a trip that fits how you travel — backed by editorial guides, themed routes and curated journeys.
Field notes
Three ways into the Studio.
Themes, journeys and guides are the editorial layer behind every route — each one a way to start shaping yours.
01
Themes
Pick a mood.
Wild ocean. Tea-country quiet. Bird-rich wetlands. Each theme opens the Studio with the right moments pre-loaded.
Open in Studio → 02 JourneysStart from a curated route.
Editor-built 7- and 10-day routes, ready to take into the Studio and reshape — lengthen a stay, swap a region, make it yours.
Browse journeys → 03 GuidesRead before you shape.
Slow, regional field notes — the south coast in October, the highlands at dawn, where to step off the train. Context the Studio draws from.
Read the guides →
Section
Guides
Reserved space.
Editorial, regional and practical guides will populate this section once the content layer is connected.
Empty template
Section
Themes
Reserved space.
Cross-cutting interests — wildlife, archaeology, tea country, coast — will live here.
Empty template
Section
Journeys
Reserved space.
Multi-day itineraries assembled from the guide library will appear here.
Empty template
Section
About
Inside Lanka is a slow, considered field guide to Sri Lanka. The site shell is in place; copy will follow.
Section
Contact
Contact form and details will be added in a later build session.
Build session 1
Design system proof
A visible audit of every brand decision in the system. Each token, surface, type role, button, card, input, badge and divider is rendered exactly once so brand drift is impossible to hide.
01 — Palette
Midnight Ocean#0D2B3E Ocean#3D5A6B Slate Teal#7BAFC0 Mist#E8EEF1 Paper#F7F9FA Brass#B89A5A
The only six colours.
02 — Themes
Light and dark, locked.
--color-bg
--color-surface
--color-surface-2
--color-surface-offset
Primary text
Secondary text
Muted text
Faint text
--color-bg
--color-surface
--color-surface-2
--color-surface-offset
Primary text
Secondary text
Muted text
Faint text
03 — Typography
Two families. Four roles per page, maximum.
Display · italic
Inside Lanka.
H2 · Cormorant 500
A field guide, slowly assembled.
H3 · Satoshi 500
Section titles use the body family.
Lead · Satoshi 300
Lead paragraphs introduce a section without leaning on serif italics.
Body · Satoshi 400
Body copy sits at --text-base with a 1.6 line-height. Long-form prose is constrained to a 65-character measure for readability and a calmer page rhythm.
Eyebrow
Eyebrow label
Pull quote
“The map invites a pause; the route-point is the only fixed thing.”
Link
An inline underlined link and a brass-rule link for emphasis.
04 — Buttons
Primary, secondary, ghost. Two-pixel radius.
Hover, focus and active states are wired to the brass token. Focus ring is a 2px brass outline at 3px offset.
05 — Card
Guide · Sample
Theme · Sample
Journey · Sample
Surface, 1px border, 2px radius.
Restraint is the brand.
A single brass moment per viewport — used here on the eyebrow accent only when warranted, never decoratively.
Composed of guides and rules.
Cards are reusable shells. The same component renders a guide, a theme or a journey — content discipline lives in the editorial layer.
06 — Input
Label, field, helper.
We use this only to reply. No marketing list.
07 — Badge / chip
Quiet metadata.
Wildlife
South Coast
Hill country
Featured
08 — Dividers
Two rules. One reserved.
Slate Teal · 30% · 120px · left aligned
Brass horizon rule · 1px · sparing
09 — Motion
One easing, three durations.
Easing cubic-bezier(0.16, 1, 0.3, 1). Hover transitions 200ms, state transitions 400ms, scroll reveals 800ms. Reveals fade and translate 12px upward. The prefers-reduced-motion query collapses every animation to instant.