184 lines
6.6 KiB
Markdown
184 lines
6.6 KiB
Markdown
# 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 |
|