Styleguide
The colours, type, links, components, grid, motion and content model behind Umbra.
Colour
Eleven colour tokens. Every fill, line and text colour on the site uses one of them, so a new palette takes a few token edits.
Background/Page
#0A0A0A
Page and footer background
Background/Surface
#141414
Image frames before they load
Background/Hover
#1E1E1E
Hover fill on dark surfaces
Background/Inverse
#FFFFFF
Buttons and row hover
Text/Primary
#FFFFFF
Headings and body text
Text/Secondary
#FFFFFF 56%
Muted text and labels
Text/Tertiary
#FFFFFF 34%
Placeholders and quiet details
Text/Inverse
#0A0A0A
Text on white
Text/Inverse Secondary
#0A0A0A 50%
Muted text on white
Border/Line
#FFFFFF 18%
Row lines and form fields
Overlay/Scrim
#0A0A0A 55%
Darkens images under text
Typography
Gambarino for headings, Inter for text. Every text layer uses one of these styles. Sizes are Desktop / Tablet / Phone.
Display
Gambarino · 128 / 88 / 52 · h1
Umbra Studio
Title
Gambarino · 56 / 44 / 34 · h2
Selected work
Statement
Gambarino · 56 / 40 / 30 · p
We make identities, campaigns and websites.
Heading
Gambarino · 30 / 26 / 22 · h3
Brand identity
Heading Muted
Gambarino · 30 / 26 / 22 · p
Names, wordmarks and the systems around them.
Body
Inter · 16 / 16 / 16 · p
We are a design studio in London and Lisbon. We work on identity, campaigns, motion and websites.
Body Muted
Inter · 16 / 16 / 16 · p
Summaries, captions and secondary notes.
Label
Inter · 13 / 13 / 13 · p
Identity, Motion
Label Muted
Inter · 13 / 13 / 13 · p
March 2026
Marquee
Gambarino · 128 / 96 / 64 · p
Say hello
Wordmark
Gambarino · 364 / 243 / 112 · p
Umbra
Links
Three link styles. Hover changes colour only, in 0.15s.
Components
Reusable parts with their own states. Edit the main component and every page follows.
Button
Form submit button with Pending, Success and Error states. Set its text in the Label control.
Service Item
One row of the Services list. Click it to open the description, deliverables and image. Side Inset matches the page margin.
Matrix Links
A code component in the Main layout template. It scrambles link text on hover. Turn it off with the template variable Matrix Links.
Footer
Template variable on Main. Shows or hides the footer on a page.
Footer CTA
Template variable on Main. Shows or hides the call to action above the footer links.
Layout
One 12-column grid on every page. Content sits on its column lines, and nested grids also have 12 columns.
Desktop 1200
Margin 24, gap 24. Sections 160 apart, the first one 176 from the top. Title to content 64.
Tablet 810
Margin 20, gap 20. Sections 120 apart, the first one 144 from the top. Title to content 48.
Phone 390
Margin 16, gap 12. Sections 96 apart, the first one 112 from the top. Title to content 40.
Motion
Calm entrances, quick hovers. Every effect plays once.
Page titles
Rise in by character.
Section titles
Rise in by word.
Leads
Rise in by line.
Text and CMS rows
Fade up 24px in 0.6s.
Images
Settle from a scale of 1.08 to 1 in 1s.
Page transition
A wipe between pages.
Hover
Colour changes in 0.15s. Rows and cards never scale.
Replay
Everything plays once. Reduced motion settings are respected.
Content model
Four CMS collections feed the lists and detail pages. Fields are listed in editor order.
Projects
Detail page at /work. Sorted by Order.
Field
Type
Title
Text
Slug
Slug
Client
Text
Year
Text
Discipline
Text
Summary
Text
Cover
Image
Gallery
Images, three per item
Body
Formatted text
Order
Number
Featured
Toggle
Services
No detail page. Sorted by Order.
Field
Type
Title
Text
Slug
Slug
Summary
Text
Description
Text
Deliverables
Text, comma list
Image
Image
Order
Number
Journal
Detail page at /journal. Newest first.
Field
Type
Title
Text
Slug
Slug
Date
Date
Author
Text
Summary
Text
Cover
Image
Body
Formatted text
Team
No detail page. Sorted by Order.
Field
Type
Name
Text
Slug
Slug
Role
Text
City
Text
Portrait
Image
Order
Number
Bio
Text
Remix project