Cardiff
Sea-foam white, deep ocean-navy, and a clean ocean-blue accent — the aesthetic of a polished, surf-adjacent creative agency. Relaxed, coastal, and approachable, with soft editorial reading surfaces.
Version 1.0.0Meet Cardiff
A look at its colors and typography, from the headline to the smallest details.
A place for your next chapter.
Your ideas, your stories, your point of view. Give them a home that feels like you.
Thoughtful type, a clear palette, and space for what matters.
A place for your next chapter.
Your ideas, your stories, your point of view. Give them a home that feels like you.
Thoughtful type, a clear palette, and space for what matters.
The identity
A character of its own
Cardiff is a coastal-agency system: sea-foam white canvas, deep ocean-navy text, and one clean ocean-blue accent used for links, buttons, and rules. It reads like a good surf-adjacent studio — relaxed and approachable, but polished enough to ship serious work and serious writing.
- coastal
- relaxed
- polished
- approachable
- editorial
The palette
Color with intention
Light palette
#f7f9fc#0d1f33#1a7aad#daedf8#e8f0f7Dark palette
#0b1826#e7eef6#4aa8db#17303f#132635The typography
Find your voice in type
Headings
Make a little room for possibility.
"Trebuchet MS", "Helvetica Neue", Arial, sans-serifBody
Good stories start with a clear point of view.
-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serifCode & details
Aa Bb Cc · 0123456789
"SFMono-Regular", Menlo, Consolas, monospaceMade for
Who it speaks to
Coastal and lifestyle brands, independent creative and design agencies, and consumer SaaS teams that want approachable professionalism — sites that carry marketing pages, a working blog, and light documentation without ever feeling corporate or salesy.
The voice
How it sounds
Relaxed, direct, and specific — the way a good agency talks in a kickoff meeting. Short declarative sentences, concrete detail over hype, and an easy blog voice that sounds like a person, not a brand. Confident without shouting; approachable without being cute.
Art direction
The thinking behind the look
Sea-foam white (#f7f9fc) canvas with deep ocean-navy (#0d1f33) text and a clean ocean-blue accent — links at #176d92 for AA-safe reading, buttons and rings at #1a7aad. Panels and rules pick up the ocean-blue tint, so cards and heroes read as pale-blue washes over foam. Trebuchet MS headings (a touch of geometric personality, no loaded serif) over a system-sans body, 0.75rem medium-soft radii, navy-tinted shadows, and an open 5rem section rhythm. In dark mode: ocean at night — deep navy-teal (#0b1826), moonlit-foam text (#e7eef6), and a brighter ocean blue (#4aa8db).