|
|
@@ -0,0 +1,38 @@
|
|
|
+# Style
|
|
|
+
|
|
|
+Dark only. Surfaces stay quiet so effort reads as heat. Prefer borders over shadows.
|
|
|
+
|
|
|
+## Colors
|
|
|
+
|
|
|
+| Role | Token | Hex | Use |
|
|
|
+| --- | --- | --- | --- |
|
|
|
+| Page | `--ink-sunken` | `#0c0f14` | App background |
|
|
|
+| Surface | `--ink` | `#12161c` | Base surface |
|
|
|
+| Surface raised | `--ink-raised` | `#1b222c` | Cards, nav |
|
|
|
+| Text | `--paper` | `#f4efe6` | Primary type. Warm, not pure white |
|
|
|
+| Text dim | `--paper-dim` | `#d8d0c4` | Secondary body copy |
|
|
|
+| Muted | `--mist` | `#8b97a8` | Labels, secondary type |
|
|
|
+| Border | `--line` | `#2c3542` | Dividers |
|
|
|
+| Border strong | `--line-strong` | `#3d4a5c` | Ghost controls, stronger edges |
|
|
|
+| Action | `--ember` | `#e25b3a` | Primary button, active ring, current set |
|
|
|
+| Action pressed | `--ember-deep` | `#b84328` | Pressed or hover on ember |
|
|
|
+| Action tint | `--ember-soft` | `#f3b6a4` | Active nav text, soft ember highlights |
|
|
|
+| Recovery | `--tide` | `#3e8f86` | Rest, completed volume, secondary action |
|
|
|
+| Recovery pressed | `--tide-deep` | `#2a6861` | Pressed or hover on tide |
|
|
|
+| Recovery tint | `--tide-soft` | `#b7d8d4` | Soft tide highlights |
|
|
|
+| Target | `--sand` | `#e7c07a` | Goals, PRs, section kickers. Not a warning |
|
|
|
+| Target deep | `--sand-deep` | `#c4964a` | Pressed sand, stronger target marks |
|
|
|
+| Heart | `--pulse` | `#d4526e` | Heart rate only |
|
|
|
+| Ok | `--ok` | `#6ea36a` | Finished, success. Off the brand hues |
|
|
|
+| Warn | `--warn` | `#d4a24a` | Missed target, open set. Not sand |
|
|
|
+| Danger | `--danger` | `#c44b4b` | Errors, destructive |
|
|
|
+
|
|
|
+Ember button text is `#1a0d09`, not paper. Tide button text is `#071614`.
|
|
|
+
|
|
|
+## Use
|
|
|
+
|
|
|
+- Ink is the room. Ember is the action. Tide is rest and completion. Sand is the marker being chased.
|
|
|
+- Do not use ember, tide, or sand for status. Ok, warn, and danger stay separate so a finished set, a missed target, and a failure do not look like buttons.
|
|
|
+- Pulse is heart rate only. Do not use it for actions or errors.
|
|
|
+- Paper on ink is about 14:1. Ember on ink-sunken is about 5.4:1: large type and rings only, not small body text.
|
|
|
+- Radius `14px` on cards, `999px` on buttons and badges. Shadow, if any, `0 18px 40px rgba(0, 0, 0, 0.28)`.
|
