From b415f1110c2012b6829961c88a2d74d298fdfe2c Mon Sep 17 00:00:00 2001
From: Richard Kranendonk <rkranendonk@mac.com>
Date: Mon, 1 Jun 2026 19:40:35 +0200
Subject: [PATCH] copied design-overview.md from website repo

---
 Website/design-overview.md | 184 +++++++++++++++++++++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 Website/design-overview.md

diff --git a/Website/design-overview.md b/Website/design-overview.md
new file mode 100644
index 0000000..ded34b3
--- /dev/null
+++ b/Website/design-overview.md
@@ -0,0 +1,184 @@
+# 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 |