1  # Graphic Charter — 🌀 The 17711 Frame
 2  
 3  ## Identity
 4  
 5  - **Logo**: 🌀 (spiral) — the golden spiral, symbol of Fibonacci convergence
 6  - **Product name**: 🐚 The 17711 Mesh
 7  - **Organization name**: 🌀 The 17711 Frame
 8  - **Copyright**: 2026 🌀 The 17711 Frame — MIT License
 9  
10  ## Typography
11  
12  | Role | Font | Fallback |
13  |------|------|----------|
14  | Headings | Playfair Display (serif) | Georgia, serif |
15  | Body | Inter (sans-serif) | -apple-system, sans-serif |
16  | Code | JetBrains Mono | Fira Code, monospace |
17  
18  - Line height: φ = 1.618 (golden ratio)
19  - Font sizes: Fibonacci scale (13px, 21px, 34px, 55px)
20  
21  ## Colors — Light Theme
22  
23  | Token | Value | Usage |
24  |-------|-------|-------|
25  | `--m17-bg` | #fafafa | Page background |
26  | `--m17-card` | #ffffff | Card/panel background |
27  | `--m17-text` | #1a1a1a | Primary text |
28  | `--m17-muted` | #666666 | Secondary text |
29  | `--m17-accent` | #c9a84c | Gold accent (links, buttons, highlights) |
30  | `--m17-accent-hover` | #b8963f | Gold hover state |
31  | `--m17-success` | #2e7d32 | Success states |
32  | `--m17-error` | #c62828 | Error states |
33  | `--m17-info` | #1565c0 | Info states |
34  | `--m17-border` | #e0e0e0 | Subtle borders |
35  
36  ## Colors — Dark Theme (default)
37  
38  | Token | Value | Usage |
39  |-------|-------|-------|
40  | `--m17-bg` | #0d0d0d | Page background |
41  | `--m17-card` | #1a1a1a | Card background |
42  | `--m17-text` | #f5f5f5 | Primary text |
43  | `--m17-muted` | #999999 | Secondary text |
44  | `--m17-accent` | #c9a227 | Gold accent |
45  
46  ## Spacing (Fibonacci × 0.1rem)
47  
48  | Token | Value | Source |
49  |-------|-------|--------|
50  | `--m17-space-xs` | 0.5rem | F(1) × 0.5 |
51  | `--m17-space-sm` | 0.8rem | ≈ 1/φ |
52  | `--m17-space-md` | 1.3rem | F(7)/10 |
53  | `--m17-space-lg` | 2.1rem | F(8)/10 |
54  | `--m17-space-xl` | 3.4rem | F(9)/10 |
55  | `--m17-space-2xl` | 5.5rem | F(10)/10 |
56  
57  ## Card Design
58  
59  ```css
60  .m17-card {
61    background: var(--m17-card);
62    border-radius: 12px;              /* F(6) + 4 */
63    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
64    padding: var(--m17-space-lg);
65  }
66  ```
67  
68  ## Golden Ratio Layout
69  
70  - Main content width: 61.8% of viewport (1/φ)
71  - Sidebar width: 38.2% (1/φ²)
72  - Section spacing: alternates φ and 1/φ ratios