Design system · v3 charcoal & cyan
The Scalar design system
Everything this template is built from: the colours, type, components, motion and spacing behind every page.
12
colours
13
text styles
11
components
01 · Brand mark
Logo
Logo component · Meta Assets page
Construction
22 · 15 · 8 px
Outer
22 px · White 30% · 1.5 px line
Middle
15 px · White 75% · 1.5 px line
Core
8 px · Accent · solid
All three squares share the bottom-left corner, so the mark grows from one point. Keep at least one core square of space around it.
Social image, favicons and touch icon
All built from the same mark on the Meta Assets page. Edit a frame there, export it as PNG, then upload it under Site Settings › General.
Social 1200 × 630 · Favicon 256 · Touch icon 180
02 · Colour styles
Colours
Surface
Background
rgb(16, 16, 18)
Page background
Card
rgb(23, 23, 25)
Cards and panels
Raised
rgb(31, 31, 34)
Hover and raised cards
Border
rgba(255, 255, 255, 0.07)
Card outlines
Border Strong
rgba(255, 255, 255, 0.12)
Inputs and emphasis
Text
Primary
rgb(245, 245, 246)
Headings and key copy
Muted
rgb(152, 152, 158)
Body copy
Subtle
rgb(98, 98, 104)
Labels, meta, captions
Brand & base
Accent
rgb(56, 214, 232)
Brand cyan: eyebrows, icons, glows
Accent Soft
rgba(33, 208, 225, 0.12)
Icon tiles and badges
White
rgb(255, 255, 255)
Main buttons, on-image text
Black
rgb(0, 0, 0)
Rarely used
03 · Text styles · Geist & Geist Mono
Typography
Display / Hero
72 / 56 / 42
Hero headline
Start scaling with AI-powered systems
Heading / H2
52 / 44 / 34
Section titles
Numbers our clients report back
Heading / H3
28 / 26 / 24
Large card titles
System audit
Heading / H4
19
Card titles
Lead qualification
Body / Large
18
Intros and quotes
We build AI automation for 7-figure operators who have outgrown their operations.
Body / Regular
16
Paragraphs
Every inbound lead is enriched, scored and routed to the right rep in under a minute.
Body / Small
14
Secondary copy, lists
Bottleneck and ROI map
Body / Caption
13
Meta and roles
Founder, Kepler
UI / Label
15
UI titles, buttons
Active automations
UI / Label Small
14
Pills, nav, small UI
Book an audit
UI / Eyebrow
12 · mono caps
Section labels
Services
UI / Mono
12
Data, timestamps
09:41 · lead scored 92
Display / Stat
56 / 48 / 40
Big numbers
412
04 · Reusable pieces
Components
Navbar
Edit links inside the Navbar component
Button
Large and small sizes
Form Button
Submit, loading, success, error
Background Shader
Hero background · Shaders
FAQ Item
Questions live in the FAQ List component
What does Scalar automate?
Lead management, onboarding, reporting, support workflows and internal ops.
How long does a project take?
Framer is a design tool that allows you to design websites on a freeform canvas, and then publish them as websites with a single click.
Navbar, CTA and Footer sit in the site template, so every page gets them. The CTA can be switched off per page in the page’s properties.
05 · Effects
Motion
Effects live on each layer
Scroll in
Fade + rise 24–40 px · 0.7 s · no bounce
Cards, rows and widgets enter as they scroll into view, 0.08 s apart per column.
Scale your
growth
Text reveal
Titles by word · copy by line · numbers by character
Headings rise in word by word, matching the hero headline.
Hover lift
Lift 4–6 px · Surface Raised · 0.4 s
Every card answers the cursor. Nothing scales up or jumps.
Live loops
Pulse 2.2 s · status dot 1.1 s · paused off-screen
Small loops show the system working without pulling focus.
06 · Spacing & corners
Layout
Container
1152 px max
Content width on every section
Section padding
120 · 96 · 72
Desktop · tablet · phone
Card gap
12 px
Between cards in a grid
Gutter
24 · 20 px
Side padding on small screens
Pill
999 px
Small UI
8–12 px
Inputs
16 px
Cards
18 px
Panels
22–28 px
07 · Customise in minutes
Make it yours
Change your brand colour
Edit “Brand / Accent” and every cyan detail follows, from eyebrows to glows and charts. Main buttons use “Base / White” with dark text.
Swap the fonts
Open the text styles and swap Geist across the Display, Heading, Body and UI folders. UI / Eyebrow and UI / Mono use Geist Mono.
Edit the menu and footer
Open the Navbar and Footer components. Each link has a title and a target section.
Check the audit form
The CTA uses a native Framer form. Submissions appear under Forms in the project settings.
Swap the logo
Edit the Mark inside the Logo component. Outer, Middle and Core are plain shapes, so recolour or redraw them, then refresh the icons on the Meta Assets page.
Tune the motion
Select any card, row or heading to change its Appear, Hover or Loop effect. Delete an effect to keep that element still.