Skip to content

Commit 4d39a02

Browse files
LykhoydaLykhoyda
authored
Merge pull request #3 from Lykhoyda/feat/ui-redesign
feat: Quiet Confidence UI redesign — teal brand, Geist typography
2 parents b57ae3a + 1471f87 commit 4d39a02

20 files changed

+1103
-895
lines changed

‎docs/design-preview.html‎

37.3 KB
Binary file not shown.

‎docs/logo-explore.html‎

10.5 KB
Binary file not shown.

‎docs/testudo-icon.png‎

2.22 KB
Loading

‎packages/extension/assets/extracted-raw.png‎

-4.8 MB
Binary file not shown.

‎packages/extension/assets/icon-testudo.svg‎

Lines changed: 6 additions & 8 deletions
Loading

‎packages/extension/blocked.html‎

Lines changed: 85 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,77 +7,122 @@
77
<link href="fonts/fonts.css" rel="stylesheet">
88
<style>
99
:root {
10-
/* Cipher Terminal — deep carbon foundation */
11-
--bg-void: #07070c;
12-
--bg-app: #0c0c14;
13-
--bg-surface: #12121e;
14-
--bg-surface-hover: #181828;
15-
--bg-elevated: #1a1a2a;
16-
17-
/* Phosphor green — the signal */
18-
--phosphor: #00e599;
19-
--phosphor-dim: #00b377;
20-
--phosphor-glow: rgba(0, 229, 153, 0.12);
21-
--phosphor-faint: rgba(0, 229, 153, 0.06);
22-
23-
/* Severity spectrum */
24-
--danger: #ff3b5c;
25-
--danger-glow: rgba(255, 59, 92, 0.12);
26-
--warning: #ffaa2c;
27-
--warning-glow: rgba(255, 170, 44, 0.12);
28-
--neutral: #4a4a6a;
29-
--neutral-glow: rgba(74, 74, 106, 0.12);
30-
31-
/* Typography */
32-
--text-bright: #f0f0f5;
33-
--text-primary: #c8c8d8;
34-
--text-muted: #6e6e8a;
35-
--text-dim: #3e3e55;
10+
/* Surface stack — 4 elevation layers */
11+
--bg: #0a0a0b;
12+
--surface: #141416;
13+
--surface-raised: #1c1c1f;
14+
--surface-hover: #222226;
3615

3716
/* Borders */
38-
--border-hard: rgba(255, 255, 255, 0.06);
39-
--border-glow: rgba(0, 229, 153, 0.15);
17+
--border: rgba(255, 255, 255, 0.06);
18+
--border-hover: rgba(255, 255, 255, 0.1);
19+
--border-strong: rgba(255, 255, 255, 0.14);
20+
21+
/* Brand — desaturated teal */
22+
--brand: #1a9b8c;
23+
--brand-hover: #26b5a4;
24+
--brand-dim: #0f7268;
25+
--brand-bg: rgba(26, 155, 140, 0.1);
26+
--brand-border: rgba(26, 155, 140, 0.28);
27+
28+
/* Semantic */
29+
--safe: var(--brand);
30+
--safe-bg: var(--brand-bg);
31+
--safe-border: var(--brand-border);
32+
--warn: #f59e0b;
33+
--warn-bg: rgba(245, 158, 11, 0.1);
34+
--warn-border: rgba(245, 158, 11, 0.25);
35+
--danger: #dc2626;
36+
--danger-bg: rgba(220, 38, 38, 0.1);
37+
--danger-border: rgba(220, 38, 38, 0.3);
38+
39+
/* Text hierarchy */
40+
--text-bright: #fafafa;
41+
--text-primary: #e5e5e7;
42+
--text-secondary: #a0a0a8;
43+
--text-muted: #6b6b72;
44+
--text-dim: #5a5a60;
4045

4146
/* Fonts */
42-
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
43-
--font-mono: 'Roboto Mono', monospace;
47+
--font-ui: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
48+
--font-mono: 'Geist Mono', ui-monospace, monospace;
49+
50+
/* Radii */
51+
--r-sm: 6px;
52+
--r-md: 8px;
53+
--r-lg: 10px;
54+
--r-xl: 14px;
55+
56+
/* ── Legacy token aliases ──
57+
Preact components in src/components/blocked/ reference these CSS variable
58+
names via inline styles. Map them onto the new token system so the existing
59+
component code renders in the new "Quiet Confidence" style without edits. */
60+
--bg-void: var(--bg);
61+
--bg-app: var(--bg);
62+
--bg-surface: var(--surface);
63+
--bg-surface-hover: var(--surface-hover);
64+
--bg-elevated: var(--surface-raised);
65+
66+
--danger-glow: var(--danger-bg);
67+
--warning: var(--warn);
68+
--warning-glow: var(--warn-bg);
69+
70+
--phosphor: var(--brand);
71+
--phosphor-dim: var(--brand-dim);
72+
--phosphor-glow: var(--brand-bg);
73+
--phosphor-faint: var(--brand-bg);
74+
75+
--border-hard: var(--border);
76+
--border-glow: var(--brand-border);
4477
}
4578

4679
* { margin: 0; padding: 0; box-sizing: border-box; }
4780

48-
body {
81+
html, body {
4982
min-height: 100vh;
83+
background: var(--bg);
84+
}
85+
86+
body {
5087
font-family: var(--font-ui);
51-
background: var(--bg-void);
5288
color: var(--text-primary);
5389
display: flex;
54-
align-items: center;
90+
align-items: flex-start;
5591
justify-content: center;
92+
padding: 96px 24px 64px;
93+
line-height: 1.5;
94+
-webkit-font-smoothing: antialiased;
95+
-moz-osx-font-smoothing: grayscale;
5696
overflow-x: hidden;
5797
}
5898

59-
/* Noise texture overlay */
99+
/* 3px danger top strip — signals severity */
60100
body::before {
61101
content: '';
62102
position: fixed;
63-
inset: 0;
64-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
65-
pointer-events: none;
103+
top: 0;
104+
left: 0;
105+
right: 0;
106+
height: 3px;
107+
background: var(--danger);
66108
z-index: 100;
109+
pointer-events: none;
67110
}
68111

69112
#app {
70113
width: 100%;
71-
max-width: 640px;
72-
padding: 24px;
114+
max-width: 480px;
115+
display: flex;
116+
flex-direction: column;
117+
gap: 20px;
73118
}
74119

75120
::-webkit-scrollbar { width: 4px; }
76121
::-webkit-scrollbar-track { background: transparent; }
77122
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 2px; }
78123

79124
:focus-visible {
80-
outline: 1px solid var(--phosphor);
125+
outline: 1px solid var(--brand);
81126
outline-offset: 2px;
82127
}
83128

‎packages/extension/fonts/fonts.css‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Material Symbols — icons */
12
@font-face {
23
font-family: 'Material Symbols Outlined';
34
font-style: normal;
@@ -6,45 +7,55 @@
67
src: url(material-symbols-outlined.woff2) format('woff2');
78
}
89

10+
.material-symbols-outlined {
11+
font-family: 'Material Symbols Outlined';
12+
font-weight: normal;
13+
font-style: normal;
14+
line-height: 1;
15+
letter-spacing: normal;
16+
text-transform: none;
17+
display: inline-block;
18+
white-space: nowrap;
19+
word-wrap: normal;
20+
direction: ltr;
21+
-webkit-font-feature-settings: 'liga';
22+
-webkit-font-smoothing: antialiased;
23+
}
24+
25+
/* Geist — variable weight 300-700 */
926
@font-face {
10-
font-family: 'Inter';
27+
font-family: 'Geist';
1128
font-style: normal;
12-
font-weight: 400 700;
29+
font-weight: 300 700;
1330
font-display: swap;
14-
src: url(inter-latin-ext.woff2) format('woff2');
15-
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
31+
src: url(geist-latin.woff2) format('woff2');
32+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1633
}
1734

1835
@font-face {
19-
font-family: 'Inter';
36+
font-family: 'Geist';
2037
font-style: normal;
21-
font-weight: 400 700;
38+
font-weight: 300 700;
2239
font-display: swap;
23-
src: url(inter-latin.woff2) format('woff2');
24-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
40+
src: url(geist-latin-ext.woff2) format('woff2');
41+
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
2542
}
2643

44+
/* Geist Mono — variable weight 400-600 */
2745
@font-face {
28-
font-family: 'Roboto Mono';
46+
font-family: 'Geist Mono';
2947
font-style: normal;
30-
font-weight: 400 500;
48+
font-weight: 400 600;
3149
font-display: swap;
32-
src: url(roboto-mono-latin.woff2) format('woff2');
50+
src: url(geist-mono-latin.woff2) format('woff2');
3351
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
3452
}
3553

36-
.material-symbols-outlined {
37-
font-family: 'Material Symbols Outlined';
38-
font-weight: normal;
54+
@font-face {
55+
font-family: 'Geist Mono';
3956
font-style: normal;
40-
font-size: 24px;
41-
line-height: 1;
42-
letter-spacing: normal;
43-
text-transform: none;
44-
display: inline-block;
45-
white-space: nowrap;
46-
word-wrap: normal;
47-
direction: ltr;
48-
-webkit-font-feature-settings: 'liga';
49-
-webkit-font-smoothing: antialiased;
57+
font-weight: 400 600;
58+
font-display: swap;
59+
src: url(geist-mono-latin-ext.woff2) format('woff2');
60+
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
5061
}

‎packages/extension/fonts/geist-latin-ext.woff2‎

14.9 KB
Binary file not shown.

‎packages/extension/fonts/geist-latin.woff2‎

27.7 KB
Binary file not shown.

‎packages/extension/fonts/geist-mono-latin-ext.woff2‎

12.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)