Primary action
The ivory action on a dark surface, with a short supporting note.
Start for freeNo credit card required
Website reference
The Caleane
design reference.
Drawn from the homepage. The original dark atmosphere, Instrument Sans, Shared Frame identity and the product’s charcoal sidebar, collected in one place.
Colour, with restraint.
The dark canvas comes from the original homepage. Ivory carries the work. Muted text and controls use neutral tones; photography carries the warmth and colour.
Original dark canvas
--site-bg
#060908Quiet surface
--site-surface
#0c100eIvory
--site-paper
#f9faf7Muted text
--site-muted
#b7bebbProduct sidebar
--site-ui-rail
#101113Product workspaces use white #ffffff, ink #202326, secondary text #6e7274 and dividers #e2e2df. The website’s dark canvas stays dark throughout.
One typeface.
A clear hierarchy.
Instrument Sans throughout. Large, regular-weight headlines; measured line lengths; clear body copy. The wordmark has its own tighter spacing and 600 weight.
Creative work,
with every decision in view.
with every decision in view.
The right version.
A clear decision.
A clear decision.
Caleane keeps your clients, projects and visual decisions together in one calm workspace.
From first enquiry to approved direction.
Shared Frame.
Caleane.
Keep the supplied symbol and the Instrument Sans wordmark together. The name is title case. The header stays compact; the footer uses the same 27px wordmark.
The symbol is 25px in the shared navigation, with a 10px gap. The supporting line lives in the footer, giving the header space to breathe.
Components that belong
to the same place.
Interactive controls use Radix UI, matching the main app’s component foundation. Actions use 3px corners. Quiet links stay as text. Outlines identify actions or interactive product boundaries; they do not frame every section.
Secondary action
For following a story or opening a deeper product view.
Input
Labels stay visible. Focus is clear and neutral.
Disclosure
Extra context appears when requested.
Inside the project
The brief, the review and the response stay together. The details expand in place, with no bounce or jump.
Project example / Maya & Lena
Living room selections
Made for everyday life.
Textured upholstery, warm timber and natural stone. Keep the layout open and the room comfortable for reading and friends.
A warmer seating direction.
Maya’s feedback stays with version 03, beside the revised material selection.
The choices belong together.
The material direction is agreed. Physical samples still need confirmation before ordering.
Component example · Illustrative project
Space with purpose.
A 1364px content width, responsive 22–64px gutters and a 24px column gap. Headings, imagery, product views and the shared footer follow the same left edge.
123456789101112
Spacing steps: 8 · 16 · 24 · 40 · 64 · 96px. Use more space between chapters, less between things that belong together.
People, doing the work.
Close portraits establish presence. Wider scenes show a believable action: a shared brief, a material choice, a specific detail under review. The characters stay recognisable as the work progresses.
Motion with weight.
The hero portraits crossfade over 1200ms. Product changes resolve over 240ms. Scroll reveals follow the reader’s position; the film action appears after the final word and shimmers once it is fully visible.
Between the first brief and the final yes, the work gets scattered across conversations.
Watch the filmThis manual sample shows the sequence. The homepage remains the reference for the actual scroll timing and fixed button position. Reduced-motion settings remove the shimmer.