Skip to content

Commit 85273c5

Browse files
mariuspruvotmariuspruvot
committed
feat(web): implement Direction E design system tokens
Replace the existing color palette with the warm dark Direction E theme (#14110e bg, #e2a039 amber accent, #f2ede4 bone text). Swap primary mono font to JetBrains Mono, add grain overlay utility, and overline class. Old token names kept as deprecated aliases for backward compat.
1 parent e46c070 commit 85273c5

2 files changed

Lines changed: 102 additions & 51 deletions

File tree

‎apps/web/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
79
<title>helPRs</title>
810
</head>
911
<body>

‎apps/web/src/index.css‎

Lines changed: 100 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
@import "tailwindcss";
22

3-
/* Berkeley Mono — commercial font, falls back to IBM Plex Mono */
3+
/* JetBrains Mono — primary monospace font */
4+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
5+
6+
/* Inter — body text */
7+
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap');
8+
9+
/* Berkeley Mono — commercial font, optional local override */
410
@font-face {
511
font-family: 'Berkeley Mono';
612
src: url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
@@ -23,49 +29,50 @@
2329
font-display: swap;
2430
}
2531

26-
/* IBM Plex Mono fallback from Google Fonts CDN */
27-
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
28-
29-
/* Inter — premium sans-serif for body text readability */
30-
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap');
31-
3232
@theme {
33-
/* Primary */
34-
--color-primary: #201d1d;
35-
--color-primary-light: #fdfcfc;
36-
--color-surface: #302c2c;
37-
38-
/* Surfaces */
39-
--color-light-surface: #f1eeee;
40-
--color-input-bg: #f8f7f7;
41-
42-
/* Semantic — Amber identity: insight, illumination, comprehension */
43-
--color-accent: #E2A039;
44-
--color-accent-hover: #C8891F;
45-
--color-accent-active: #A87018;
46-
--color-danger: #ff3b30;
47-
--color-danger-hover: #d70015;
48-
--color-danger-active: #a50011;
49-
--color-success: #30d158;
50-
--color-warning: #ff9f0a;
51-
--color-warning-hover: #cc7f08;
52-
--color-warning-active: #995f06;
33+
/* === Direction E: Warm Dark + Amber === */
34+
35+
/* Canvas */
36+
--color-bg: #14110e;
37+
--color-bg2: #1a1612;
38+
--color-card: #1f1b16;
39+
--color-card-hi: #261f19;
5340

5441
/* Text */
55-
--color-text-primary: #fdfcfc;
56-
--color-text-secondary: #9a9898;
57-
--color-text-secondary-light: #424245;
58-
--color-text-muted: #6e6e73;
42+
--color-ink: #f2ede4;
43+
--color-ink2: #c9c2b5;
44+
--color-dim: #8a8275;
45+
--color-dim2: #5a5348;
46+
47+
/* Structure */
48+
--color-rule: #2a241d;
49+
--color-rule-str: #3a322a;
50+
51+
/* Accent — amber */
52+
--color-accent: #e2a039;
53+
--color-accent-soft: #f3c989;
54+
--color-accent-dim: #7a5620;
5955

60-
/* Border */
61-
--color-border: rgba(15, 0, 0, 0.12);
62-
--color-border-strong: #646262;
63-
--color-border-tab: #9a9898;
56+
/* Semantic */
57+
--color-ok: #7fb37a;
58+
--color-warn: #e8a347;
59+
--color-danger: #d66b5e;
6460

6561
/* Typography */
66-
--font-family-mono: 'Berkeley Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
62+
--font-family-mono: 'Berkeley Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
6763
--font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
6864

65+
/* Typography Scale */
66+
--font-size-heading: 38px;
67+
--font-size-body: 16px;
68+
--font-size-caption: 14px;
69+
--font-size-small: 12px;
70+
--font-size-overline: 10px;
71+
--font-weight-bold: 700;
72+
--font-weight-semibold: 600;
73+
--font-weight-medium: 500;
74+
--font-weight-regular: 400;
75+
6976
/* Spacing (8px grid) */
7077
--spacing-1: 4px;
7178
--spacing-2: 8px;
@@ -80,25 +87,67 @@
8087
--spacing-20: 80px;
8188
--spacing-24: 96px;
8289

83-
/* Typography Scale */
84-
--font-size-heading: 38px;
85-
--font-size-body: 16px;
86-
--font-size-caption: 14px;
87-
--font-weight-bold: 700;
88-
--font-weight-medium: 500;
89-
--font-weight-regular: 400;
90-
9190
/* Border Radius */
9291
--radius-default: 4px;
9392
--radius-input: 6px;
94-
--radius-card: 10px;
9593
--radius-button: 8px;
94+
--radius-card: 10px;
9695
--radius-pill: 9999px;
9796

98-
/* Shadows — ring-based depth system inspired by Vercel/Raycast */
99-
--shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.06);
100-
--shadow-ring-strong: 0 0 0 1px rgba(255, 255, 255, 0.10);
101-
--shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 24px -8px rgba(0, 0, 0, 0.3);
102-
--shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 48px -12px rgba(0, 0, 0, 0.4);
103-
--shadow-glow-accent: 0 0 24px -4px rgba(226, 160, 57, 0.15);
97+
/* Shadows */
98+
--shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.04);
99+
--shadow-ring-strong: 0 0 0 1px rgba(255, 255, 255, 0.08);
100+
--shadow-card: 0 0 0 1px var(--color-rule), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.4);
101+
--shadow-elevated: 0 0 0 1px var(--color-rule-str), 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 48px -12px rgba(0, 0, 0, 0.5);
102+
--shadow-glow-accent: 0 0 24px -4px rgba(226, 160, 57, 0.2);
103+
104+
/* === Deprecated aliases (remove after page rebuilds) === */
105+
--color-primary: #14110e;
106+
--color-primary-light: #f2ede4;
107+
--color-surface: #1f1b16;
108+
--color-light-surface: #f2ede4;
109+
--color-input-bg: #1a1612;
110+
--color-accent-hover: #c8891f;
111+
--color-accent-active: #a87018;
112+
--color-success: #7fb37a;
113+
--color-warning: #e8a347;
114+
--color-warning-hover: #c8891f;
115+
--color-warning-active: #a87018;
116+
--color-danger-hover: #b85a4e;
117+
--color-danger-active: #9a4a40;
118+
--color-text-primary: #f2ede4;
119+
--color-text-secondary: #c9c2b5;
120+
--color-text-secondary-light: #8a8275;
121+
--color-text-muted: #5a5348;
122+
--color-border: var(--color-rule);
123+
--color-border-strong: var(--color-rule-str);
124+
--color-border-tab: #8a8275;
125+
}
126+
127+
/* Grain overlay — warm ambient glow on canvas */
128+
.grain::before {
129+
content: "";
130+
position: absolute;
131+
inset: 0;
132+
pointer-events: none;
133+
opacity: 0.4;
134+
background:
135+
radial-gradient(ellipse at 15% 0%, rgba(232, 163, 71, 0.05), transparent 60%),
136+
radial-gradient(ellipse at 85% 100%, rgba(232, 163, 71, 0.03), transparent 55%);
137+
}
138+
139+
/* Pulsing dot animation */
140+
@keyframes pulse-dot {
141+
0%, 100% { opacity: 1; }
142+
50% { opacity: 0.3; }
143+
}
144+
145+
/* Overline letter-spacing */
146+
.overline {
147+
font-family: var(--font-family-mono);
148+
font-size: var(--font-size-overline);
149+
font-weight: var(--font-weight-semibold);
150+
letter-spacing: 0.16em;
151+
text-transform: uppercase;
152+
color: var(--color-dim);
104153
}

0 commit comments

Comments
 (0)