Skip to content

Commit b17f231

Browse files
DataGomesDataGomes
committed
feat(frontend): redesign UI and self-host OFL fonts
Replace the generic indigo-on-charcoal theme with a cohesive editorial "Observatory" aesthetic: warm dark palette, Instrument Serif display + Geist body + Geist Mono data, hairline rules, tabular numerics, and a quieter score gradient (HSL oxide → wheat → sage) for the comparison grid. Updates login, chat, results index + detail, and history with semantic tokens (ink / bone / rule / ember / sage / wheat / oxide). Self-host the three font families under SIL Open Font License 1.1 to remove the build-time dependency on fonts.gstatic.com and make AWS Labs OSS compliance explicit: - bundle 4 woff2 files in frontend/app/fonts/ (distributed unmodified) - pin SHA256 hashes in SHA256SUMS for integrity verification - bundle SIL OFL 1.1 license text + copyright statements (OFL.txt) - add three attribution entries to THIRD_PARTY - switch frontend/app/layout.tsx from next/font/google to next/font/local Verified: tsc --noEmit clean; both BUILD_MODE=standalone and BUILD_MODE=export builds clean; nine Playwright screenshots across all routes with realistic mocked API data (0 console errors, 0 warnings).
1 parent a32ffbf commit b17f231

25 files changed

Lines changed: 1741 additions & 735 deletions

‎THIRD_PARTY‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,40 @@ caniuse-lite 1.0.30001759
4646

4747
caniuse-lite is a dataset of browser compatibility data used by
4848
Browserslist and related build tools. It is distributed unmodified.
49+
50+
--------------------------------------------------------------------------------
51+
52+
Geist (font) — Geist-Variable.woff2
53+
Copyright 2024 The Geist Project Authors
54+
License: SIL Open Font License, Version 1.1 (OFL-1.1)
55+
Source: https://github.com/vercel/geist-font
56+
57+
Geist is a variable sans-serif typeface bundled with the web frontend
58+
(frontend/app/fonts/Geist-Variable.woff2). The full OFL-1.1 license text
59+
and copyright statement are included in frontend/app/fonts/OFL.txt. The
60+
font is distributed unmodified.
61+
62+
--------------------------------------------------------------------------------
63+
64+
Geist Mono (font) — GeistMono-Variable.woff2
65+
Copyright 2024 The Geist Project Authors
66+
License: SIL Open Font License, Version 1.1 (OFL-1.1)
67+
Source: https://github.com/vercel/geist-font
68+
69+
Geist Mono is a variable monospace typeface bundled with the web frontend
70+
(frontend/app/fonts/GeistMono-Variable.woff2). The full OFL-1.1 license
71+
text and copyright statement are included in frontend/app/fonts/OFL.txt.
72+
The font is distributed unmodified.
73+
74+
--------------------------------------------------------------------------------
75+
76+
Instrument Serif (font) — InstrumentSerif-Regular.woff2, InstrumentSerif-Italic.woff2
77+
Copyright 2022 The Instrument Serif Project Authors
78+
License: SIL Open Font License, Version 1.1 (OFL-1.1)
79+
Source: https://github.com/Instrument/instrument-serif
80+
81+
Instrument Serif is a display serif typeface bundled with the web frontend
82+
in regular and italic styles (frontend/app/fonts/InstrumentSerif-Regular.woff2,
83+
frontend/app/fonts/InstrumentSerif-Italic.woff2). The full OFL-1.1 license
84+
text and copyright statement are included in frontend/app/fonts/OFL.txt.
85+
The font is distributed unmodified.

‎frontend/app/chat/page.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@ export default function ChatPage() {
1616

1717
if (isLoading) {
1818
return (
19-
<div className="flex h-screen items-center justify-center bg-claude-bg">
20-
<div className="text-claude-muted">Loading...</div>
19+
<div className="flex h-screen items-center justify-center bg-ink">
20+
<span className="eyebrow">
21+
Identifying
22+
<span className="cursor-block ml-2 align-baseline" />
23+
</span>
2124
</div>
2225
);
2326
}
@@ -27,7 +30,7 @@ export default function ChatPage() {
2730
}
2831

2932
return (
30-
<div className="flex h-screen bg-claude-bg">
33+
<div className="flex h-screen bg-ink">
3134
<Sidebar />
3235
<ChatInterface />
3336
</div>

‎frontend/app/fonts/Geist-Variable.woff2‎

67.8 KB
Binary file not shown.

‎frontend/app/fonts/GeistMono-Variable.woff2‎

69.3 KB
Binary file not shown.

‎frontend/app/fonts/InstrumentSerif-Italic.woff2‎

19 KB
Binary file not shown.

‎frontend/app/fonts/InstrumentSerif-Regular.woff2‎

18.2 KB
Binary file not shown.

‎frontend/app/fonts/OFL.txt‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
This directory contains font binaries bundled with this project.
2+
All fonts are licensed under the SIL Open Font License, Version 1.1.
3+
4+
The bundled fonts and their upstream copyright statements:
5+
6+
Geist (Geist-Variable.woff2)
7+
Geist Mono (GeistMono-Variable.woff2)
8+
Copyright 2024 The Geist Project Authors
9+
(https://github.com/vercel/geist-font)
10+
11+
Instrument Serif (InstrumentSerif-Regular.woff2, InstrumentSerif-Italic.woff2)
12+
Copyright 2022 The Instrument Serif Project Authors
13+
(https://github.com/Instrument/instrument-serif)
14+
15+
The full text of the SIL Open Font License, Version 1.1, follows. It is
16+
also available with a FAQ at https://openfontlicense.org.
17+
18+
19+
-----------------------------------------------------------
20+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
21+
-----------------------------------------------------------
22+
23+
PREAMBLE
24+
The goals of the Open Font License (OFL) are to stimulate worldwide
25+
development of collaborative font projects, to support the font creation
26+
efforts of academic and linguistic communities, and to provide a free and
27+
open framework in which fonts may be shared and improved in partnership
28+
with others.
29+
30+
The OFL allows the licensed fonts to be used, studied, modified and
31+
redistributed freely as long as they are not sold by themselves. The
32+
fonts, including any derivative works, can be bundled, embedded,
33+
redistributed and/or sold with any software provided that any reserved
34+
names are not used by derivative works. The fonts and derivatives,
35+
however, cannot be released under any other type of license. The
36+
requirement for fonts to remain under this license does not apply
37+
to any document created using the fonts or their derivatives.
38+
39+
DEFINITIONS
40+
"Font Software" refers to the set of files released by the Copyright
41+
Holder(s) under this license and clearly marked as such. This may
42+
include source files, build scripts and documentation.
43+
44+
"Reserved Font Name" refers to any names specified as such after the
45+
copyright statement(s).
46+
47+
"Original Version" refers to the collection of Font Software components as
48+
distributed by the Copyright Holder(s).
49+
50+
"Modified Version" refers to any derivative made by adding to, deleting,
51+
or substituting -- in part or in whole -- any of the components of the
52+
Original Version, by changing formats or by porting the Font Software to a
53+
new environment.
54+
55+
"Author" refers to any designer, engineer, programmer, technical
56+
writer or other person who contributed to the Font Software.
57+
58+
PERMISSION & CONDITIONS
59+
Permission is hereby granted, free of charge, to any person obtaining
60+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
61+
redistribute, and sell modified and unmodified copies of the Font
62+
Software, subject to the following conditions:
63+
64+
1) Neither the Font Software nor any of its individual components,
65+
in Original or Modified Versions, may be sold by itself.
66+
67+
2) Original or Modified Versions of the Font Software may be bundled,
68+
redistributed and/or sold with any software, provided that each copy
69+
contains the above copyright notice and this license. These can be
70+
included either as stand-alone text files, human-readable headers or
71+
in the appropriate machine-readable metadata fields within text or
72+
binary files as long as those fields can be easily viewed by the user.
73+
74+
3) No Modified Version of the Font Software may use the Reserved Font
75+
Name(s) unless explicit written permission is granted by the corresponding
76+
Copyright Holder. This restriction only applies to the primary font name as
77+
presented to the users.
78+
79+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
80+
Software shall not be used to promote, endorse or advertise any
81+
Modified Version, except to acknowledge the contribution(s) of the
82+
Copyright Holder(s) and the Author(s) or with their explicit written
83+
permission.
84+
85+
5) The Font Software, modified or unmodified, in part or in whole,
86+
must be distributed entirely under this license, and must not be
87+
distributed under any other license. The requirement for fonts to
88+
remain under this license does not apply to any document created
89+
using the Font Software.
90+
91+
TERMINATION
92+
This license becomes null and void if any of the above conditions are
93+
not met.
94+
95+
DISCLAIMER
96+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
97+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
98+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
99+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
100+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
101+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
102+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
103+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
104+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎frontend/app/fonts/SHA256SUMS‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
e24cec106619c03f0b3519e31b9bc55e0d5e926b6a95b8d798cd8cef215b1505 Geist-Variable.woff2
2+
5f687a5dd4c87da13deaff9f6b9503d5e62249ff501265a96b134565f9aa8c87 GeistMono-Variable.woff2
3+
0ee028dd53ac644ccbdafe25b164ab7a593e04a11da569bdcc65b19996681dc1 InstrumentSerif-Italic.woff2
4+
f3ae4af3e2e9ad592de4f2aedb75cfe49e008f6c9f2428ef8b98ec0a326742d9 InstrumentSerif-Regular.woff2

‎frontend/app/globals.css‎

Lines changed: 174 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,199 @@
33
@tailwind utilities;
44

55
:root {
6-
--background: #1a1a1a;
7-
--foreground: #f5f5f5;
6+
/* Observatory — warm dark instrument */
7+
--ink: #0c0a08;
8+
--ink-elev: #15120e;
9+
--ink-raised: #1d1812;
10+
--ink-pressed: #252017;
11+
--bone: #ece6d8;
12+
--bone-dim: #a39a87;
13+
--bone-mute: #6f6759;
14+
--rule: #2a241d;
15+
--rule-soft: #1f1a14;
16+
--ember: #d97757;
17+
--ember-soft: #3a1f15;
18+
--ember-deep: #a35336;
19+
--sage: #9bb556;
20+
--wheat: #d4a72c;
21+
--oxide: #c4524d;
22+
--paper: #f5efe6;
823
}
924

25+
html,
1026
body {
11-
color: var(--foreground);
12-
background: var(--background);
13-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
27+
background-color: var(--ink);
28+
color: var(--bone);
29+
}
30+
31+
body {
32+
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
33+
-webkit-font-smoothing: antialiased;
34+
text-rendering: optimizeLegibility;
35+
}
36+
37+
::selection {
38+
background: var(--ember-soft);
39+
color: var(--bone);
40+
}
41+
42+
::-webkit-scrollbar {
43+
width: 10px;
44+
height: 10px;
45+
}
46+
::-webkit-scrollbar-track {
47+
background: transparent;
48+
}
49+
::-webkit-scrollbar-thumb {
50+
background: var(--rule);
51+
border: 2px solid var(--ink);
52+
border-radius: 2px;
53+
}
54+
::-webkit-scrollbar-thumb:hover {
55+
background: var(--bone-mute);
56+
}
57+
58+
/* Subtle grain overlay — gives the dark UI a printed-page texture without
59+
getting in the way of legibility. */
60+
body::before {
61+
content: "";
62+
position: fixed;
63+
inset: 0;
64+
pointer-events: none;
65+
z-index: 100;
66+
opacity: 0.025;
67+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
1468
}
1569

1670
@layer utilities {
71+
.font-display {
72+
font-family: var(--font-instrument-serif), ui-serif, Georgia, serif;
73+
font-weight: 400;
74+
letter-spacing: -0.01em;
75+
}
76+
77+
.eyebrow {
78+
font-family: var(--font-geist-mono), ui-monospace, monospace;
79+
font-size: 0.6875rem;
80+
font-weight: 500;
81+
letter-spacing: 0.14em;
82+
text-transform: uppercase;
83+
color: var(--bone-mute);
84+
}
85+
1786
.text-balance {
1887
text-wrap: balance;
1988
}
89+
90+
.cursor-block {
91+
display: inline-block;
92+
width: 0.45em;
93+
height: 0.95em;
94+
background: currentColor;
95+
vertical-align: text-bottom;
96+
animation: cursor-pulse 1.05s steps(2) infinite;
97+
}
98+
@keyframes cursor-pulse {
99+
50% {
100+
opacity: 0;
101+
}
102+
}
103+
104+
.reveal {
105+
animation: reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
106+
}
107+
@keyframes reveal {
108+
from {
109+
opacity: 0;
110+
transform: translateY(8px);
111+
}
112+
to {
113+
opacity: 1;
114+
transform: translateY(0);
115+
}
116+
}
117+
.stagger-1 {
118+
animation-delay: 0.08s;
119+
}
120+
.stagger-2 {
121+
animation-delay: 0.16s;
122+
}
123+
.stagger-3 {
124+
animation-delay: 0.24s;
125+
}
126+
.stagger-4 {
127+
animation-delay: 0.32s;
128+
}
20129
}
21130

22-
/* Reduce spacing in markdown content */
131+
/* Markdown — reads more like editorial prose than wiki-text */
23132
.markdown-content p {
24-
margin: 0.25rem 0 !important;
133+
margin: 0 0 0.5rem !important;
134+
line-height: 1.6;
135+
}
136+
.markdown-content p:last-child {
137+
margin-bottom: 0 !important;
25138
}
26-
27139
.markdown-content ul,
28140
.markdown-content ol {
29-
margin: 0.25rem 0 !important;
30-
padding-left: 1.5rem !important;
141+
margin: 0.25rem 0 0.5rem !important;
142+
padding-left: 1.25rem !important;
31143
}
32-
33144
.markdown-content li {
34145
margin: 0.125rem 0 !important;
146+
line-height: 1.55;
35147
}
36-
37148
.markdown-content strong {
38149
font-weight: 600;
150+
color: var(--bone);
151+
}
152+
.markdown-content code {
153+
font-family: var(--font-geist-mono), ui-monospace, monospace;
154+
font-size: 0.86em;
155+
background: var(--ink-pressed);
156+
padding: 0.1em 0.35em;
157+
border-radius: 2px;
158+
color: var(--ember);
159+
}
160+
.markdown-content pre {
161+
background: var(--ink-pressed);
162+
padding: 0.75rem 1rem;
163+
border-radius: 3px;
164+
overflow-x: auto;
165+
margin: 0.5rem 0;
166+
border: 1px solid var(--rule);
167+
}
168+
.markdown-content pre code {
169+
background: transparent;
170+
padding: 0;
171+
color: var(--bone);
172+
font-size: 0.85em;
173+
}
174+
.markdown-content a {
175+
color: var(--ember);
176+
text-decoration: underline;
177+
text-decoration-thickness: 1px;
178+
text-underline-offset: 2px;
179+
}
180+
.markdown-content a:hover {
181+
color: var(--ember-deep);
182+
}
183+
.markdown-content h1,
184+
.markdown-content h2,
185+
.markdown-content h3,
186+
.markdown-content h4 {
187+
font-family: var(--font-instrument-serif), ui-serif, Georgia, serif;
188+
font-weight: 400;
189+
letter-spacing: -0.01em;
190+
color: var(--bone);
191+
margin: 0.6rem 0 0.3rem;
192+
}
193+
.markdown-content h1 {
194+
font-size: 1.5rem;
195+
}
196+
.markdown-content h2 {
197+
font-size: 1.25rem;
198+
}
199+
.markdown-content h3 {
200+
font-size: 1.1rem;
39201
}

0 commit comments

Comments
 (0)