copied design-overview.md from website repo
This commit is contained in:
parent
fc53c6e5b4
commit
b415f1110c
1 changed files with 184 additions and 0 deletions
184
Website/design-overview.md
Normal file
184
Website/design-overview.md
Normal file
|
|
@ -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 |
|
||||
Loading…
Add table
Add a link
Reference in a new issue