mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply Justine ink & parchment design system

Browse Source 
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases)
- Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code)
- Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif
- Project shell and global chrome use semantic colors
- Replace Outfit/Newsreader references across TSX inline styles

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-04-01 21:03:40 -07:00
parent 06238f958a
commit bada63452f
33 changed files with 300 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/AtlasChat.tsx
View File

@@ -140,7 +140,7 @@ function MessageRow({
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "0.68rem", fontWeight: 700,
color: isAtlas ? "#fff" : "#8a8478",
fontFamily: isAtlas ? "Newsreader, serif" : "Outfit, sans-serif",
fontFamily: isAtlas ? "var(--font-lora), ui-serif, serif" : "var(--font-inter), ui-sans-serif, sans-serif",
}}>
{isAtlas ? "A" : userInitial}
</div>
@@ -149,14 +149,14 @@ function MessageRow({
<div style={{
fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
{isAtlas ? "Vibn" : "You"}
</div>
{/* Content */}
<div style={{
fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
whiteSpace: isAtlas ? "normal" : "pre-wrap",
}}>
{renderContent(clean)}
@@ -175,7 +175,7 @@ function MessageRow({
color: saved ? "#2e7d32" : "#fff",
border: saved ? "1px solid #a5d6a7" : "none",
fontSize: "0.78rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: saved || saving ? "default" : "pointer",
transition: "all 0.15s",
opacity: saving ? 0.7 : 1,
@@ -186,7 +186,7 @@ function MessageRow({
{!saved && (
<div style={{
marginTop: 6, fontSize: "0.72rem", color: "#a09a90",
fontFamily: "Outfit, sans-serif", lineHeight: 1.4,
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", lineHeight: 1.4,
}}>
{phase.summary}
</div>
@@ -218,7 +218,7 @@ function MessageRow({
display: "inline-block", padding: "8px 16px", borderRadius: 7,
background: "#1a1a1a", color: "#fff",
fontSize: "0.76rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif", textDecoration: "none",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", textDecoration: "none",
}}
>
Review architecture →
@@ -234,7 +234,7 @@ function MessageRow({
style={{
padding: "7px 14px", borderRadius: 6, border: "1px solid #e0dcd4",
background: "none", fontSize: "0.74rem", color: "#6b6560",
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
>
Try again
@@ -256,7 +256,7 @@ function MessageRow({
padding: "9px 18px", borderRadius: 8, border: "none",
background: archState === "loading" ? "#8a8478" : "#1a1a1a",
color: "#fff", fontSize: "0.78rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: archState === "loading" ? "default" : "pointer",
transition: "background 0.15s",
}}
@@ -288,7 +288,7 @@ function TypingIndicator() {
<div style={{
width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "0.68rem", fontWeight: 700, color: "#fff", fontFamily: "Newsreader, serif",
fontSize: "0.68rem", fontWeight: 700, color: "#fff", fontFamily: "var(--font-lora), ui-serif, serif",
}}>A</div>
<div style={{ display: "flex", gap: 5, paddingTop: 10 }}>
{[0, 1, 2].map(d => (
@@ -425,7 +425,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
return (
<div style={{
display: "flex", flexDirection: "column", height: "100%",
background: "#f6f4f0", fontFamily: "Outfit, sans-serif",
background: "#f6f4f0", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
<style>{`
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
@@ -443,7 +443,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
<div style={{
width: 44, height: 44, borderRadius: 11, background: "#1a1a1a",
display: "flex", alignItems: "center", justifyContent: "center",
fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 500, color: "#fff",
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 500, color: "#fff",
animation: "breathe 2.5s ease infinite",
}}>A</div>
<style>{`@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }`}</style>
@@ -466,7 +466,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
style={{
position: "absolute", top: 12, right: 16,
background: "none", border: "none", cursor: "pointer",
fontSize: "0.68rem", color: "#d0ccc4", fontFamily: "Outfit, sans-serif",
fontSize: "0.68rem", color: "#d0ccc4", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
padding: "3px 7px", borderRadius: 4, transition: "color 0.12s",
}}
onMouseEnter={e => (e.currentTarget.style.color = "#8a8478")}
@@ -504,7 +504,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
padding: "5px 12px", borderRadius: 20,
border: "1px solid #e0dcd4",
background: "#fff", color: "#6b6560",
fontSize: "0.73rem", fontFamily: "Outfit, sans-serif",
fontSize: "0.73rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: "pointer", transition: "all 0.1s",
whiteSpace: "nowrap",
}}
@@ -541,7 +541,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
disabled={isStreaming}
style={{
flex: 1, border: "none", background: "none",
fontSize: "0.86rem", fontFamily: "Outfit, sans-serif",
fontSize: "0.86rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
color: "#1a1a1a", padding: "8px 0",
resize: "none", outline: "none",
minHeight: 24, maxHeight: 120,
@@ -553,7 +553,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
style={{
padding: "9px 16px", borderRadius: 7, border: "none",
background: "#eae6de", color: "#8a8478",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: "pointer", flexShrink: 0,
display: "flex", alignItems: "center", gap: 6,
}}
@@ -569,7 +569,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
padding: "9px 16px", borderRadius: 7, border: "none",
background: input.trim() ? "#1a1a1a" : "#eae6de",
color: input.trim() ? "#fff" : "#b5b0a6",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: input.trim() ? "pointer" : "default",
flexShrink: 0, transition: "all 0.15s",
}}