ad3laid3/Vellum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Swap brand accents, and lift the nav off the page

Browse source 
- Primary accent is now purple (#c084fc); blue-violet (#6d7cff) becomes the
  secondary. The primary button uses dark ink on purple for contrast, since
  white on that purple is only about 2.5:1.
- The sidebar gets its own surface (--nav-bg, #212121) one step below the page
  (#292929) with a stronger divider, so it reads as a distinct rail rather than
  blending into the content. Nav link, count and section colours lifted off
  --faint onto --muted for legibility against the darker rail.
- Light mode mirrors the same structure.

Verified: accent resolves to #c084fc, secondary to #6d7cff, nav to #212121 on a
#292929 page.
This commit is contained in:
mithral 2026-10-10 17:45:43 -04:00
parent e55686bd21
commit 28d26f18c9
2 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/app.css
View file

@ -5,26 +5,31 @@
:root {
/* ── Surfaces ─────────────────────────────────────────────────────── */
/* Brand charcoal, taken from the logo's own background (#303030). */
/* Brand charcoal, taken from the logo's own background (#303030). The nav
sits a step below the page so it reads as a distinct rail rather than
blending into the content. */
--bg: #292929;
--surface: #303030;
--surface-2: #3a3a3a;
--surface-3: #454545;
--border: #3d3d3d;
--border-strong: #4e4e4e;
--nav-bg: #212121;
--nav-border: #454545;
/* ── Ink ──────────────────────────────────────────────────────────── */
--text: #f2f2f2;
--muted: #b5b5b5;
--faint: #868686;
--nav-fg: #c9c9c9;
/* ── Emphasis ─────────────────────────────────────────────────────── */
/* The logo's glow: blue-violet primary, purple secondary. */
--accent: #6d7cff;
--accent-hover: #8490ff;
--accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
--accent-text: #ffffff;
--accent-2: #c084fc;
/* Purple primary, blue-violet secondary — the logo's two hues. */
--accent: #c084fc;
--accent-hover: #cf9dff;
--accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
--accent-text: #1a1024;
--accent-2: #6d7cff;
--danger: #ff6b6b;
--success: #4ade80;
@ -91,16 +96,19 @@
--surface-3: #e6e6e8;
--border: #e2e2e4;
--border-strong: #cfcfd3;
--nav-bg: #ffffff;
--nav-border: #d8d8dc;
--text: #1a1a1c;
--muted: #5e5e64;
--faint: #8a8a90;
--nav-fg: #4a4a52;
--accent: #5a6bff;
--accent-hover: #4759f0;
--accent: #9333ea;
--accent-hover: #7e22ce;
--accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
--accent-text: #ffffff;
--accent-2: #9333ea;
--accent-2: #4f5bd5;
--danger: #c0392b;
--success: #1f8a4c;

15
web/src/lib/components/Shell.svelte
View file

@ -177,8 +177,8 @@
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4) var(--space-3);
border-right: 1px solid var(--border);
background: var(--surface);
border-right: 1px solid var(--nav-border);
background: var(--nav-bg);
overflow-y: auto;
}
.brand {
@ -211,10 +211,13 @@
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
color: var(--nav-fg);
text-align: left;
cursor: pointer;
font-size: .964rem;
transition:
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.navlink:hover {
background: var(--surface-2);
@ -227,7 +230,7 @@
}
.count {
font-size: .857rem;
color: var(--faint);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.section {
@ -235,7 +238,7 @@
font-size: .786rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--faint);
color: var(--muted);
}
.foot {
margin-top: auto;
@ -243,7 +246,7 @@
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
border-top: 1px solid var(--nav-border);
}
.who {
display: flex;