Graphic Design Reference
Fonts
| Role |
Family |
Weight |
Notes |
| Headings (h1–h6, .title) |
Gambarino |
400 |
Serif, from Fontshare |
| Subtitles (.subtitle) |
Inter |
400 |
Sans-serif, from Google Fonts |
| Body / UI text |
Inter |
400–700 |
Sans-serif |
| Card titles (feature, blog, team) |
Fragment Mono |
400 |
Monospace, from Google Fonts |
| Team card role label |
Inter |
500 |
Uppercase, tracked |
Heading style: letter-spacing −1px, line-height 1.05em, antialiased
Subtitle style: letter-spacing −0.5px, line-height 1.2em
Body line-height: 1.6 (blog post content: 1.8)
Color Palette
Named swatches
| Name |
Hex |
Description |
$darkgun |
#2b2d2d |
Very dark charcoal |
$linen |
#fdfcf9 |
Warm off-white (hero image bg) |
$silver |
#d1d5db |
Light grey (borders, table lines) |
$black |
#000000 |
Pure black (navbar shadow) |
$deepteal |
#1e2e30 |
Dark teal (footer background) |
$carbon |
#484a4a |
Dark grey (heading color) |
$stone |
#666666 |
Medium grey (body/secondary text) |
$ash |
#a8a8a8 |
Light grey (footer copyright, fine print) |
$dgtlblue |
#3e8ed0 |
Digital blue (primary brand/accent) |
$whitesmoke |
#f6f6f6 |
Near-white (card borders, table headers) |
$gallery |
#f0f0f0 |
Light grey (hover bg on default pricing buttons) |
$white |
#ffffff |
Pure white |
$white95 |
#fffffff5 |
Pure white at 95% opacity (navbar bg) |
$parchment |
#f7f5f0 |
Warm paper-white (footer links, team card bg) |
$warmsand |
#e4ddd0 |
Warm beige |
Section surface / card pairs
| Section |
Surface bg |
Card bg |
| Canvas / Hero / Blog list / Preloader |
$arctic #dde8f2 |
— |
| Features |
$biscuit #ede8df |
$vanillapaper #faf8f4 |
| Why |
$driftwood #e2d9cc |
$oatmeal #f5f2ec |
| Pricing |
$seafog #e4ede8 |
$parchment #f7f5f0 |
| Blog post / body bg |
$vanillapaper #faf8f4 |
— |
| Team |
$biscuit #ede8df |
$vanillapaper #faf8f4 |
Design Motif
Every major section overlays a subtle dot/grid pattern on its surface background:
- Hero: radial dot grid (dots, not lines)
- Features, Why, Blog post, Team: cross-hatch grid (horizontal + vertical lines)
- Grid color:
$darkgun at 4% opacity (rgba(43,45,45, 0.04)) — invisible except on very light backgrounds
- Grid cell size: 20 × 20 px, grid line: 1 px
Element-by-Element Reference
Navbar (.floating-navbar)
| Property |
Value |
| Background |
$white95 (#fffffff5) + backdrop-filter: blur(10px) |
| Position |
Fixed, centered, floating 1rem from top |
| Border radius |
12px |
| Box shadow |
rgba(black, 0.1) |
| Nav links |
Font-weight 500; hover color $dgtlblue |
| Logo height |
3.5rem |
| CTA button bg |
$dgtlblue #3e8ed0, text $white |
Hero (#hero)
| Property |
Value |
| Body background |
$arctic #dde8f2 (via body / $surface-bg-1) |
| Dot grid overlay |
$darkgun 4% opacity, 20px spacing |
| Image placeholder bg |
$linen #fdfcf9, border-radius 16px |
| Heading |
Gambarino 400, color $carbon |
| Subtitle |
Inter 400, color $carbon |
Feature Cards (.section-features / .feature-card)
| Property |
Value |
| Section bg |
$biscuit #ede8df + grid overlay |
| Card bg |
$vanillapaper #faf8f4 |
| Card border |
1px solid $vanillapaper (same as bg, invisible) |
| Card border-radius |
8px |
| Card shadow |
rgba(0,0,0, 0.02) → hover rgba(0,0,0, 0.05) |
| Card hover |
translateY(-5px) |
| Card title font |
Fragment Mono 400, color $darkgun |
| Card body text |
Inter 400, color $stone #666666 |
Why Section (.section-why)
Same layout as Features; card bg changes to $oatmeal #f5f2ec, section bg to $driftwood #e2d9cc.
Pricing Section (.section-pricing)
| Property |
Value |
| Section bg |
$seafog #e4ede8 + grid overlay |
| Card bg |
$parchment #f7f5f0 |
| Card border |
0.5px solid $silver |
| Featured card border |
2px solid $dgtlblue |
| Featured badge bg |
$dgtlblue, text $white, font 11px/500 |
| Tier label |
12px, uppercase, $stone, letter-spacing 0.07em |
| Plan title |
18px / 500, color $carbon |
| Price amount |
32px / 500, color $carbon |
| Period / billing |
14–13px, $stone |
| Feature checkmark |
#22c55e (green) |
| Default button |
border $silver, bg $parchment, color $carbon |
| Featured button |
border + text $dgtlblue; hover: bg $dgtlblue, text $white |
| Add-on bg |
$driftwood #e2d9cc |
| Fine print |
12px, $ash |
Team Cards (.team-card)
| Property |
Value |
| Section bg |
$biscuit + grid overlay |
| Card bg |
$vanillapaper #faf8f4 |
| Name font |
Fragment Mono 400, 1.5rem, color $darkgun |
| Role label |
Inter 500, 0.875rem, $dgtlblue, uppercase, tracked 0.05em |
| Bio text |
Inter 400, 1rem, $stone, line-height 1.6 |
| Photo |
200×200px, border-radius 8px |
Blog List (.blog-section / .blog-card)
| Property |
Value |
| Section bg |
$arctic #dde8f2 |
| Card bg |
$vanillapaper #faf8f4 |
| Card border |
1px solid $gallery #f0f0f0 |
| Card title font |
Fragment Mono 400, color $darkgun |
| Meta / excerpt |
Inter, color $stone |
| "Read more" link |
$dgtlblue, Inter 500, 0.875rem |
Blog Post (.blog-post-section)
| Property |
Value |
| Page bg |
$vanillapaper #faf8f4 + grid overlay |
| Post title |
Gambarino, color $carbon |
| Body text |
Inter 400, color $carbon, line-height 1.8 |
| h2 / h3 inside post |
Gambarino, color $darkgun |
| Blockquote |
Left border 4px $dgtlblue, italic, color $stone |
| Table header |
bg $whitesmoke, font-weight 600 |
| Table borders |
1px solid $silver |
| Post footer border |
1px solid $silver |
| Property |
Value |
| Background |
$deepteal #1e2e30 |
| Section titles |
Inter 600, 0.75rem, uppercase, $icemist #f0f5fa, tracked 0.08em |
| Links |
Inter 400, 0.95rem, $parchment #f7f5f0, line-height 2 |
| Link hover |
$dgtlblue |
| Tagline |
Inter 400, 0.875rem, $icemist |
| Copyright |
Inter 400, 0.875rem, $ash #a8a8a8 |
Buttons (.button.is-primary)
| Property |
Value |
| Background |
$dgtlblue #3e8ed0 |
| Text |
$white |
Back-to-Top Button (#backtotop)
| Property |
Value |
| Background |
$dgtlblue |
| Icon color |
$white |
| Shape |
50px circle |
