# 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` |

### Footer (`.footer`)

| 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 |