00
Velora design system
An inventory of every style, structure and component this site is built from. Use it as the single source of truth when adding new sections or pages.
For agents
Read this page before you build. Reuse what already exists rather than creating something new.
Never add, rename or edit a color style, text style or component while building a section. If something is missing, compose it from the components in section 08.
Every new section uses the Section > Container skeleton in section 04, the in-view reveal in section 06, and the voice in section 07.
This page is documentation. Keep it static and free of appear effects.
01
Color guide
Seventeen color styles. Two warm sand accents, a page background, an image scrim, and a thirteen-step neutral ramp from white to black.
For agents
Always reference a color style, never a raw hex value.
Neutral 12 is the default text color. Use Neutral 10 for secondary copy and Neutral 09 for labels.
Main 01 and Main 02 are accents for hover states and hairlines only. Never use them for body text.
Place text on imagery only over the Overlay scrim.
Main 01
#E3CAA6
Warm sand accent. Button underline on hover and hairlines on dark surfaces.
Main 02
#9E8867
Deeper sand. Accent underline and small accent marks on light surfaces.
BG
#FAFAFA
Page and navigation background. The default canvas behind every section.
Overlay
#000000 55%
Scrim over imagery so white text stays legible. Work card hover overlay.
Neutral 00
#FFFFFF
Cards and panels that need to lift off the page background.
Neutral 01
#FAFAFA
Alternate section background. Same value as BG.
Neutral 02
#F4F4F4
Label chips, quiet fills, and the ring around round avatars.
Neutral 03
#EEEEEE
Dividers and hairlines between list rows.
Neutral 04
#E6E6E6
Card and input borders. A slightly stronger separator.
Neutral 05
#DADADA
Disabled surfaces and image placeholders.
Neutral 06
#CCCCCC
Disabled text on light fills and icon outlines.
Neutral 07
#BDBDBD
Placeholder text and inactive icons.
Neutral 08
#AEAEAE
Tertiary metadata on light backgrounds.
Neutral 09
#999999
Label and eyebrow text. The default color of Others/Label.
Neutral 10
#6D6D6D
Secondary body copy, section headers and work content.
Neutral 11
#212121
Brand wordmark and near-black interface text.
Neutral 12
#000000
Primary text color for all headings and body copy.
02
Typography guide
Three families are loaded: Inter for almost everything, Inter Display for the smallest body size, and Inter Tight held in reserve. Tracking is always negative and tightens as type grows.
For agents
Apply a text style by name. Never set font size, weight, letter spacing or line height by hand.
Headings carry their own semantic tag. Use one Heading/H1 per page and keep the ladder in order.
Sizes read desktop / tablet / phone. A single value means the style is fixed at every breakpoint.
Body copy sits at 16px everywhere. Reserve Body/Body - S for captions and fine print.
Heading/H1
Inter · 500 · −0.06em · 120%
80px / 64px / 40px
h1 · Neutral 12
Heading/H2
Inter · 500 · −0.06em · 120%
64px / 58px / 36px
h2 · Neutral 12
Heading/H3
Inter · 500 · −0.05em · 120% / 120% / 130%
48px / 38px / 32px
h3 · Neutral 12
Heading/H4
Inter · 500 · −0.05em · 140% / 140% / 130%
32px / 26px / 22px
h4 · Neutral 12
Heading/H5
Inter · 500 · −0.05em · 140%
22px / 20px / 18px
h5 · Neutral 12
Heading/H6
Inter · 500 · −0.05em · 140%
18px / 18px / 18px
h6 · Neutral 12
Heading/Section Header
Inter · 500 · −0.05em · 130%
26px / 22px / 18px
h2 · Neutral 10
Others/Section Intro
Inter · 500 · −0.04em · 140%
28px / 22px / 18px
Neutral 12
Others/Nav
Inter · 400 · −0.04em · 140%
16px / 16px / 24px
#666666
Others/Brand
Inter · 600 · −0.04em · 140%
18px at every breakpoint
Neutral 11
Others/Button Text
Inter · 500 · −0.04em · 140%
16px at every breakpoint
Neutral 12
Others/Label
Inter · 500 · −0.03em · 140% · uppercase
13px at every breakpoint
Neutral 09
Body/Body - Regular
Inter · 400 · −0.04em · 140%
16px / 16px / 16px
Neutral 12
Body/Body - Work Content
Inter · 400 · −0.04em · 140%
16px at every breakpoint
Neutral 10
Body/Body - S
Inter Display · 400 · −0.04em · 140%
14px at every breakpoint
Neutral 12
03
Shape and surface
The radius scale is small and the spacing scale is fixed. Depth comes from fill contrast, never from shadow.
For agents
Default to a 4px radius. Only go fully round for avatars and the cursor.
Keep radii concentric: a 4px child inside a 12px parent, never the other way round.
Never add a drop shadow. There are none anywhere on this site.
Give every container with a visible edge horizontal padding before you place text inside it.
Stay on the spacing scale: 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80.
Corner radius
2px
Label chips
The smallest radius on the site.
4px
Images, media wrappers, cards, panels
The default. Used more than every other value combined.
6px
Work card surface
Slightly softer because the card carries a 12px inset.
8px
Work detail gallery wrappers
Larger media blocks on the work detail page.
100px
Testimonial avatar and the custom cursor
Fully round. Never used on rectangular content.
Padding
Section container
80px · 80px 40px · 64px 24px
The page rhythm. Do not override it per section.
Work detail container
64px 80px · 64px 40px · 40px 24px
Narrower vertical rhythm for long-form reading.
Error page container
120px 80px
Extra room around a single centred message.
Card, panel or note
32px
Uniform on all four sides.
Label chip
4px 8px
Paired with a 2px radius and a Neutral 02 fill.
Button
8px
Set through the button padding control, not on the instance.
Navigation bar
0px 80px outer · 10px 0px on the link row
Horizontal padding only on the bar itself.
Service row
12px 0px
Vertical only; the divider carries the horizontal edge.
Accordion row
0px 0px 20px
Bottom padding separates the row from its divider.
List row
0px 0px 24px
The standard rhythm for stacked list items.
Surfaces and borders
Borders
Always 1px solid. Neutral 02 rings the testimonial avatar and Main 01 outlines the cursor.
Shadows
None. Not a single drop shadow is used anywhere on the site.
Card surfaces
Neutral 00 cards sit on the BG page fill. Contrast alone creates the lift.
Separators
A 1px Neutral 03 rule, or the Divider component inside repeating lists.
04
Container and layout
Every section on this site is the same two-frame skeleton: a full-bleed Section holding one Container that caps the content at 1400px.
For agents
Build every new section as a Section frame holding exactly one Container frame. Content never attaches to the Section directly.
Backgrounds and full-bleed media go on the Section. Max width and padding go on the Container.
Reuse the padding and gap values below instead of inventing new ones.
When a grid collapses to a single column on a narrower breakpoint, switch it to a vertical stack rather than setting the column count to 1.
Section — full bleed, no max width, carries the background fill
Container — max width 1400px, padding 80px / 80px 40px / 64px 24px
Content — headers, grids, lists, component instances
Section width
1fr, height fit-content, padding 0px
Full bleed. Never give a Section a max width.
Section layout
Stack, vertical, align centre
Centres the Container inside the viewport.
Container width
1fr with a 1400px max width
The single content measure across the whole site.
Container layout
Stack, vertical, distribute start, align start
Grid is used only where the design calls for it.
Container padding
80px · 80px 40px · 64px 24px
Desktop · tablet · phone.
Container gap
80px · 48px · 40px
Content-heavy sections. Tighter sections use 24px to 32px.
Breakpoints
Desktop ≥ 1200px · Tablet 810–1199px · Phone ≤ 809px
Framer manages these automatically.
Hero exception
Section height 100vh with 64px top padding
Clears the fixed navigation. Container height 1fr, padding 40px 80px 64px 80px, gap 32 / 48 / 64px. Phone drops to fit-content.
Grid use
Review section only, 24px gap
Becomes a vertical stack on tablet and phone.
05
Section patterns
Six repeating section recipes. Start from the closest one rather than composing a layout from scratch.
For agents
Pick the nearest pattern below and adapt it. Do not invent a new section shape without reason.
Every content section opens with a Section header component so the page reads consistently.
Repeating content comes from a CMS Collection List, never from duplicated cards.
Two-column sections collapse to a single vertical stack on tablet and phone.
Hero
Full-height vertical stack, centred. Brand, H1, section intro, primary button.
Gap grows 32 / 48 / 64px. Height drops to fit-content on phone.
Work index
Section header, Style 1, then a CMS Collection List of Work cards.
Container gap 80 / 48 / 40px. Cards go full width on phone.
Services
Section header then numbered Service rows separated by Dividers.
The Service component switches to its Tablet and Phone variants.
About
Two-column horizontal container, space-between. Section header left, Experience accordion right.
Becomes a vertical stack on tablet and phone.
Reviews
Grid container of Testimonial components, 24px gap.
Becomes a vertical stack on tablet and phone.
Work detail
Title block, Work information meta list, content sections, galleries, then a Next work label and card.
Container padding tightens to 64px 40px then 40px 24px.
06
Motion and effects
One reveal does almost all of the work: a short upward fade triggered when a layer enters the viewport. Everything else is a small variation on it.
For agents
Use the standard reveal on every new section. Apply it to the section’s direct content blocks, not to every leaf.
Stagger siblings by 0.1s in document order and stop at 0.3s. Longer chains feel slow.
Leave replay off and set no exit effect. Content animates once.
Hover is limited to colour and transform. Never add shadow or scale to a card on hover.
The hero’s on-mount entrance is page-load choreography. Do not copy it into other sections.
Standard reveal
Appear on in view · threshold 0.5 · replay off · no exit. From opacity 0, y +30px. Spring, stiffness 200, damping 58, mass 1.
Section headers, cards, lists, media blocks. The default for all new work.
Reveal stagger
The same reveal with delays of 0s, 0.1s, 0.2s and 0.3s applied in document order.
Sibling blocks inside one section.
Soft reveal
Appear on in view, y +30px, spring stiffness 200, damping 30, delay 0s or 0.1s.
Large media blocks and the work grid, where a looser settle reads better.
Component micro-reveal
Appear on in view, y +8px, tween cubic-bezier 0.44, 0, 0.56, 1 over 0.4s, delays 0s / 0.2s / 0.4s.
Children inside the Service and Experience accordion components.
Button hover
The 1px underline grows from 0% to 100% width and shifts to Main 01 or Main 02.
Every Button instance. No other hover decoration.
07
Writing style and tone
A calm, first-person studio voice. Short declarative sentences, concrete outcomes, no hype.
For agents
Write in sentence case. Let the Others/Label style apply uppercase instead of typing in capitals.
Keep headlines to three to eight words and one idea.
No exclamation marks, no emoji, no marketing superlatives.
Use curly quotes and apostrophes, and an en dash for ranges.
Never end a heading, label or button with a full stop.
Page headline
Sentence case
Three to eight words. One idea. Balance the wrap.
Section header
Sentence case
One to three words. Selected works. Services. About.
Section intro
Sentence case
One or two sentences, around 25 words. Balance the wrap.
Body copy
Sentence case
Two to four sentences per paragraph. Plain language over jargon.
Button label
Sentence case
Two or three words, verb led. View work. Get in touch.
Label and eyebrow
Uppercase, applied by the style
Type it in sentence case; Others/Label transforms it.
Navigation link
Sentence case
A single word wherever possible.
Metadata
Sentence case
Client, role, service and date read as short value pairs.
Numbers
Two digits
Services are numbered 01, 02, 03.
Dates and ranges
Numerals with an en dash
2024 – Present. Never a hyphen.
08
Component list
Thirteen canvas components cover every repeating element on the site. Each row below is a live instance, not a picture of one.
For agents
Always build from this list. If nothing fits, compose a new component out of the ones here rather than starting from raw frames.
Never edit, rename or restyle a component while building a section. Change it through its controls only.
Where a component has Tablet, Phone or Touch Device variants, set the matching variant per breakpoint on a single instance. Do not place one instance per breakpoint.
Bind repeating content to a CMS Collection List instead of duplicating instances by hand.
Basic Element/Button
Text link with an optional Phosphor icon and a 1px underline that draws in on hover. No fill, no radius.
Variants: Primary · XL
Basic Element/Label
Small uppercase chip on a Neutral 02 fill with a 2px radius. Used for eyebrows and the next-work marker.
Variants: Default
NEXT WORK
Basic Element/Divider
A 1px horizontal rule that separates repeating rows in service and experience lists.
Variants: Default
Basic Element/Cursor
Custom circular pointer outlined in Main 01. Follows the mouse and swaps state over work cards.
Variants: Default · On Work
Navigation/Brand
The studio wordmark lockup used in the navigation bar and the footer.
Variants: Default · On Dark
Navigation/Nav link
A single navigation item with its own padding and text colour controls.
Variants: Default · Mobile · Footer Touch Device
Navigation/Navigation
Sticky top bar holding the brand, the link row and the mobile menu toggle.
Variants: Desktop · Phone · Phone Open
Section/Section header
The eyebrow heading and optional description that opens every content section.
Variants: Style 1 / Desktop · Style 1 / Phone · Style 2
Section/Work
Work card with thumbnail, title, type and a hover overlay. Bind it to the Works collection.
Variants: Default · Touch Device
Section/Work information
A label and value pair used in the work detail meta list.
Variants: Variant 1
CLIENT
WanderEase
Section/Service
Numbered service row with title, description and image.
Variants: Desktop · Tablet · Phone
Section/Experience accordion
Expandable role entry showing title, company, dates and details.
Variants: Collapsed · Expanded · Phone/Collapsed · Phone/Expanded
Section/Testimonial
A quote with a round avatar, name and position.
Variants: Default
Clean, professional, and easy to use. Velora gave my agency the polished online presence it needed."
John Doe
Marketing Specialist, DreamLive
Dependencies in use
Phosphor for icons, plus Smooth Scroll, Logo, Slideshow, Spinner and Video. One code component, Workshop/ParallaxImage.tsx, drives the parallax media on work detail pages. Use these through the components above rather than placing them directly.
The Footer and Lunis Badge components are intentionally left out of this list.
09
Imagery
Editorial photography in warm neutral tones, natural light and generous negative space. Ten images currently live outside the CMS.
For agents
Match this register: warm neutrals, soft daylight, calm composition. No heavy filters or saturated colour.
Images take a 4px radius and a fill crop inside a wrapper frame set to clip.
Work thumbnails come from the Works collection. Never hard-code a work image onto the canvas.
Reuse an image already in the project before uploading a new one.
10
Content model
One CMS collection powers the site. Works holds four entries and drives both the work grid and the work detail pages at /:Works.
For agents
Render Works through a CMS Collection List using the Section/Work component. Never duplicate cards by hand.
Bind the card thumbnail to Thumbnail Image and the link to the work detail path with the slug variable.
Add a field to the collection rather than hard-coding new copy onto a work card.
Divider fields are editor-only grouping. They carry no content.
Title
String
Also the slug source. Used as the card and detail page heading.
Work Type
String
Short descriptor shown under the title on the card.
Work #
String
Two-digit index, 01 upward.
Brief Overview
String
One line used on the card hover overlay.
Work Summary
String
Intro paragraph on the detail page.
Thumbnail Image
Image
Card and detail hero image. Bind, never hard-code.
Date
Date
Shown in the Work information meta list.
Client
String
Meta list value.
Role
String
Meta list value.
Service
String
Meta list value.
Site Link
Link
Optional external link to the live site.
Section 1 - Title
String
Heading for the first detail section.
Section 1 - Content
Formatted text
Body copy for the first detail section.
Section 1 - Gallery
Array
Image set for the first detail section.
Section 2 - Title
String
Heading for the second detail section.
Section 2 - Content
Formatted text
Body copy for the second detail section.
Section 2 - Gallery
Array
Image set for the second detail section.