outline®
DESIGN SYSTEM / 01
THE RULES.
FOUNDATIONS / COMPONENTS / MOTION
Edit the system here. Reuse it everywhere.
01
/
Color system
COLOR SYSTEM.
A quiet foundation. One unmistakable accent. Each swatch is bound to a shared color style.
Surface/Paper
#F5F5F2
Surface/Ink
#20211F
Surface/White
#FFFFFF
Surface/Raised
#ECEDE7
Text/Primary
#20211F
Text/Secondary
#62655D
Text/Inverse
#F5F5F2
Text/Inverse secondary
#B8BBB2
Action/Primary
#D4FA40
Action/Hover
#C3E832
Media/Lavender
#DED8EF
Border/Light
#D4D6CC
Border/Dark
#55584E
State/Focus
#536616
State/Success
#376D32
State/Error
#AD362F
02
/
Type with a point of view
TYPE WITH A POINT OF VIEW.
Inter gives the system its voice. Oswald adds an editorial rhythm. Every style includes desktop, tablet, and phone sizes.
WE MAKE
BRANDS MOVE.
Headings/H1
Inter / 800 · 104 / 76 / 48px
Stand out.
Headings/H2
Oswald / 600 · 80 / 64 / 44px
MAKE IT MATTER.
Headings/H3
Inter / 600 · 40 / 34 / 28px
A little healthy ambition.
Headings/H4
Inter / 600 · 28 / 26 / 24px
Independent by design.
Headings/H5
Inter / 600 · 22 / 22 / 20px
Every detail counts.
Body/Large
Inter / 400 · 22 / 20 / 18px
Good work starts with a clear point of view.
Body/Default
Inter / 400 · 18 / 18 / 16px
We’re strategists, designers, developers, and writers who care about the details.
Body/Small
Inter / 400 · 14 / 14 / 14px
Branding / Web design / Content
UI/Label
Inter / 500 · 14 / 14 / 13px
01 / SELECTED PROJECTS
UI/Button
Inter / 500 · 16 / 16 / 16px
Explore the work
UI/Caption
Inter / 500 · 12 / 12 / 12px
CAPTION / SUPPORTING DETAIL
03
/
Room to move
ROOM TO MOVE.
One alignment system makes the expressive layouts feel intentional. Sections fill the screen; their content shares the same inner container.
Desktop
1440px canvas · 1328px max · 56px gutters
Tablet
810px canvas · 32px gutters
Phone
390px canvas · 20px gutters
4
8
12
16
24
32
48
64
96
128
Space: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Corners: 0 for actions, 4 for inputs, 12 for media, circular for round arrows. Reading measure: 640px.
04
/
Made to be used
MADE TO BE USED.
These are linked component instances. Hover, press, and tab through them to inspect the interaction states.
Primary action
Secondary action
Inverse action
Primary / Secondary / Inverse include native hover and pressed variants. Disabled actions have no destination. Round controls use a 52px target; text links keep a 44px minimum target.
06
/
Good work, well framed
GOOD WORK, WELL FRAMED.
One project card owns the image, title, summary, service metadata, and destination. The imagery below is AI-generated for Outline.
PROJECT PREVIEW
PALMA
A fictional hospitality brand used to demonstrate the Outline project system. Replace its content through the card controls; the design stays consistent.
Editable controls: Project title, Summary, Services, Project image, Project link, Variant.
07
/
Clarity on demand
CLARITY ON DEMAND.
The service accordion opens on click and closes on a second click. Number, title, and description are editable controls.
08
/
Start a conversation
START A CONVERSATION.
Native inputs, clear labels, and visible focus. The example is for validation and interaction checks; configure the delivery recipient before launch.
Every state considered.
State specimens above are display examples. The form itself uses Framer’s native validation and submission-state wiring.
09
/
Motion with purpose
MOTION WITH PURPOSE.
Movement draws attention to work and interaction. It never carries information that disappears when motion is reduced.
Reveal once
0.6 seconds · 24px travel. Sections reveal once when entering the viewport.
Respond quickly
0.2 seconds. Hover and press states make actions feel immediate and stay inside safe bounds.
Respect preferences
Reduced motion is enabled at site level. Content, order, and controls remain available without movement.
A LITTLE HEALTHY AMBITION.
Scroll past this panel and return. The entrance is configured to run once.
10
/
Built to work together
BUILT TO WORK TOGETHER.
Twelve reusable components, a shared palette, and responsive text styles. Keep this page as the working reference when assembling the marketing pages.