Commit
Add beige design tokens and base styles
commit
a261610
1 changed file with +48 and −30
modified client/src/index.css +48 −30
| @@ -1,32 +1,25 @@ | ||
| 1 | 1 | :root { |
| 2 | - --text: #3c3a41; | |
| 3 | - --text-h: #08060d; | |
| 4 | - --bg: #fff; | |
| 5 | - --bg-alt: #f6f5f8; | |
| 6 | - --border: #e5e4e7; | |
| 7 | - --accent: #7c3aed; | |
| 8 | - --accent-bg: rgba(124, 58, 237, 0.1); | |
| 9 | - --danger: #b3261e; | |
| 10 | - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; | |
| 11 | - | |
| 12 | - font: 16px/145% var(--sans); | |
| 13 | - color-scheme: light dark; | |
| 14 | - color: var(--text); | |
| 15 | - background: var(--bg); | |
| 16 | - -webkit-font-smoothing: antialiased; | |
| 17 | -} | |
| 2 | + --paper: #f6f1e7; | |
| 3 | + --paper-deep: #eee7d7; | |
| 4 | + --card: #fcfaf4; | |
| 5 | + --ink: #2c2620; | |
| 6 | + --ink-soft: #7a6f61; | |
| 7 | + --line: #e3d9c8; | |
| 8 | + --clay: #c46a4a; | |
| 9 | + --clay-deep: #a95538; | |
| 10 | + --clay-soft: #f0ddd2; | |
| 11 | + --moss: #7a8b6f; | |
| 12 | + --amber: #d9a441; | |
| 13 | + --danger: #b2503c; | |
| 18 | 14 | |
| 19 | -@media (prefers-color-scheme: dark) { | |
| 20 | - :root { | |
| 21 | - --text: #d1d0d6; | |
| 22 | - --text-h: #f3f4f6; | |
| 23 | - --bg: #16171d; | |
| 24 | - --bg-alt: #1c1d24; | |
| 25 | - --border: #2e303a; | |
| 26 | - --accent: #c084fc; | |
| 27 | - --accent-bg: rgba(192, 132, 252, 0.15); | |
| 28 | - --danger: #f2a29c; | |
| 29 | - } | |
| 15 | + --serif: 'Fraunces', Georgia, serif; | |
| 16 | + --sans: 'Instrument Sans', 'Segoe UI', sans-serif; | |
| 17 | + | |
| 18 | + font: 16px/1.55 var(--sans); | |
| 19 | + color-scheme: light; | |
| 20 | + color: var(--ink); | |
| 21 | + background: var(--paper); | |
| 22 | + -webkit-font-smoothing: antialiased; | |
| 30 | 23 | } |
| 31 | 24 | |
| 32 | 25 | * { |
| @@ -35,16 +28,41 @@ | ||
| 35 | 28 | |
| 36 | 29 | body { |
| 37 | 30 | margin: 0; |
| 31 | + min-height: 100vh; | |
| 32 | + background: | |
| 33 | + radial-gradient(1100px 500px at 50% -10%, rgba(196, 106, 74, 0.07), transparent 65%), | |
| 34 | + var(--paper); | |
| 35 | +} | |
| 36 | + | |
| 37 | +body::after { | |
| 38 | + content: ''; | |
| 39 | + position: fixed; | |
| 40 | + inset: 0; | |
| 41 | + pointer-events: none; | |
| 42 | + opacity: 0.05; | |
| 43 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| 38 | 44 | } |
| 39 | 45 | |
| 40 | 46 | h1, |
| 41 | 47 | h2 { |
| 42 | - font-family: var(--sans); | |
| 43 | - font-weight: 600; | |
| 44 | - color: var(--text-h); | |
| 48 | + font-family: var(--serif); | |
| 49 | + font-weight: 500; | |
| 50 | + color: var(--ink); | |
| 45 | 51 | margin: 0 0 8px; |
| 46 | 52 | } |
| 47 | 53 | |
| 48 | 54 | p { |
| 49 | 55 | margin: 0; |
| 50 | 56 | } |
| 57 | + | |
| 58 | +button { | |
| 59 | + font-family: var(--sans); | |
| 60 | +} | |
| 61 | + | |
| 62 | +input { | |
| 63 | + font-family: var(--sans); | |
| 64 | +} | |
| 65 | + | |
| 66 | +::selection { | |
| 67 | + background: var(--clay-soft); | |
| 68 | +} |