White
#fefefe
Page backgrounds, white sections, filled cards and buttons.
Navy or dark text: AA/AAA.
Reference
Design system
The colors, type scale, spacing, components and grids every page of this site is built from.
Designed and built in Lovable. Each component below is the same code the live pages use, so a change here is a change everywhere. All sample text and imagery on this page is illustrative.
Colors
Gray
#fbf9f7
Gray section backgrounds and filled cards.
Navy or dark text: AA/AAA.
Cream
#fcf6ee
Filled cards and buttons only; not section backgrounds.
Navy or dark text: AA/AAA.
Mint
#eaf5f5
Filled cards and buttons only; especially quotes and supporting content.
Navy or dark text: AA/AAA.
Blob blue
#dce9fe
Section backgrounds and small decorative labels.
Navy or dark text: AA/AAA.
Navy
#033145
Primary text, eyebrow text, filled cards or buttons, strong borders and icons.
White text: AA/AAA.
Muted navy
#5b6f79
Secondary text such as metadata, captions, explanatory notes and supporting card copy. Not for primary body text or FAQ answers.
AA for normal text on white, gray, cream, mint and blob backgrounds.
Teal
#0095b3
Underlines, icons, prices, large text and interactive emphasis.
Not AA for normal text on light backgrounds; never use it there alone.
Soft teal
#b7dbe5
Filled buttons and compact link treatments.
Navy or dark text: AA/AAA.
Border
#e8e4de
Quiet dividers and hairline borders; navy is used for strong outlined cards.
Decorative only; never communicates meaning alone.
Dark
#070512
Dark sections, the footer, filled cards and buttons.
White text: AA/AAA.
Typography & rhythm
Heading 1
Bricolage Grotesque 400, fluid 45.7–63.5px
The quick brown fox jumps over the lazy dog
Heading 2
Same scale as Heading 1
The quick brown fox jumps over the lazy dog
Heading 3
Bricolage Grotesque, fluid 37.6–50.6px
The quick brown fox jumps over the lazy dog
Heading 4
Bricolage Grotesque, fluid 24.1–29px
The quick brown fox jumps over the lazy dog
Quote
Bricolage Grotesque, fluid 21.7–32.8px
The quick brown fox jumps over the lazy dog
Paragraph 1
DM Sans, fluid 18.7–20.3px
The quick brown fox jumps over the lazy dog
Paragraph 2
DM Sans, 16px
The quick brown fox jumps over the lazy dog
Paragraph 3
DM Sans, fluid 14.3–14.9px
The quick brown fox jumps over the lazy dog
Eyebrow
Fragment Mono, uppercase, navy by default
The quick brown fox jumps over the lazy dog
Eyebrow
Heading
Paragraph spacing begins after the heading.
Eyebrow → heading
16px
Heading → paragraph
24px
A second paragraph follows at 20px.
Buttons & links
Cards & usage
Filled
No visible border. May be white, mint, cream or gray.
Outline
Transparent with a navy border.
Ghost
No background and no border.
Cards are for repeating elements.
Value props, blog posts, and a group of links to different pages are cards. One-off prose, headings, and single text blocks sit directly on the section background. Blog post listings always use cards.
An image alone in a column (MediaColumn) gets the same internal padding as a card, so it lines up with neighbouring content instead of hugging the column edges.
Patterns
Cards
Stage
Pre-seed to Series A
Early traction needs clear product direction.
Model
Sales-driven B2B SaaS
Turn deal pressure into a durable strategy.
Team
Founder-led product
Add an experienced product partner.
Table rows
2023 — 2026
Example Co
Fractional CPOB2B SaaS, Series A
Rebuilt the roadmap around revenue and hired the first product managers.
Product areas
Roadmapping, Discovery, Team building
2020 — 2023
Another Co
Product LeadB2B SaaS, Seed
Turned early customer evidence into a focused product direction.
Product areas
Research, Strategy, Delivery
Quotes
Short pull quotes on a mint card. Sample text shown.
“A short quote sits on a mint card and stays to two or three lines so it reads in one glance.”
“Longer quotes are trimmed to the sentence that carries the point.”
Heroes
Full
More than one viewport tall, with vertically centered content. The background bleeds edge to edge behind the header; content sits in a 2:1 grid and images keep their natural aspect ratio with rounded corners.
Full hero
A full opening statement
Use for immersive opening pages with enough room to establish a strong visual world.
Default
Truepic builds technology that shows where digital content comes from and whether it has been altered. I led developer tools and projects supporting media provenance.
Responsive grids
1
1
1:1
1
2
2:1
1
2
1:2
1
2
1:1:1
1
2
3
1:1:1:1
1
2
3
4
1:2:1
1
2
3
Compact content such as footer links may keep columns at smaller widths. Larger content such as blog cards stacks sooner.