Green instead of gold, and a leaf that reads at 16px

The brand accent was rune gold. It is now mallorn green: --gold becomes
--leaf in tokens.css and everywhere it resolved, and the mark's wafer is
the green of the leaves lembas travels wrapped in rather than the biscuit
inside. Yellow is left to mean exactly one thing in the interface -- a
warning -- instead of two.

Two knock-on choices the rename forced:

  - Code keywords move from the brand accent to --warning. Strings are
    --success, which is green; keywords in leaf green beside them is not
    a colour scheme.
  - --success itself leans teal now. Two greens a hue apart read as one
    colour rendered badly, and an unread dot has to be tellable from a
    brand badge at a glance.

The mark is redrawn, not just recoloured. The blade is ovate -- widest a
third up from the base, rounded where the stem meets it, drawn out only
at the tip -- because the old one was pointed at both ends and read as an
eye. It is also much larger relative to the tile: at 16px the silhouette
is all that survives, and a small leaf on a large tile is a green square
with a smudge on it. Veins sweep towards the tip and shorten as the blade
narrows. The score cross is thinner and fainter so it stays texture.

A single diagonal score was tried first and rejected: behind a diagonal
leaf it does not read as scoring, it reads as a line struck through the
mark.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
2026-07-31 22:24:53 +02:00
parent 2a79d962a3
commit 71dc46455c
30 changed files with 322 additions and 281 deletions
+6 -6
View File
@@ -342,7 +342,7 @@ button, input, textarea, select {
background: var(--surface-active);
color: var(--ink-muted);
}
.badge--gold { background: var(--gold-soft); color: var(--gold); }
.badge--leaf { background: var(--leaf-soft); color: var(--leaf); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
@@ -381,7 +381,7 @@ button, input, textarea, select {
}
.sidebar__brand:hover { color: var(--ink); }
.sidebar__brand .brand-mark { width: 1.65rem; height: 1.65rem; flex: none; }
.sidebar__brand .brand-llm { color: var(--gold); }
.sidebar__brand .brand-llm { color: var(--leaf); }
.sidebar__actions {
display: flex;
@@ -554,7 +554,7 @@ button, input, textarea, select {
place-items: center;
padding: var(--sp-6);
background:
radial-gradient(ellipse 60% 50% at 50% 0%, var(--gold-soft), transparent 70%),
radial-gradient(ellipse 60% 50% at 50% 0%, var(--leaf-soft), transparent 70%),
var(--bg);
}
.auth__card {
@@ -826,7 +826,7 @@ button, input, textarea, select {
font-size: var(--text-sm);
font-weight: 500;
}
.picker__pin { color: var(--gold); }
.picker__pin { color: var(--leaf); }
.picker__option-desc {
font-size: var(--text-xs);
color: var(--ink-faint);
@@ -842,8 +842,8 @@ button, input, textarea, select {
font-size: 0.6875rem;
padding: 0 0.35rem;
border-radius: var(--radius-sm);
background: var(--gold-soft);
color: var(--gold);
background: var(--leaf-soft);
color: var(--leaf);
}
.picker__tick { color: var(--accent); flex: none; margin-top: 0.35rem; }
.picker__empty {
+6 -4
View File
@@ -131,7 +131,7 @@
height: 1.05em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--gold);
background: var(--leaf);
opacity: 0.75;
animation: caret 1.05s steps(1) infinite;
}
@@ -167,7 +167,7 @@
.reasoning__summary::-webkit-details-marker { display: none; }
.reasoning__summary:hover { color: var(--ink); background: var(--surface-hover); }
.reasoning__icon { color: var(--gold); flex: none; }
.reasoning__icon { color: var(--leaf); flex: none; }
.reasoning__label { flex: 1; font-style: italic; }
.reasoning__chevron {
@@ -225,7 +225,7 @@
}
.tool-activity__summary::-webkit-details-marker { display: none; }
.tool-activity__summary:hover { color: var(--ink); background: var(--surface-hover); }
.tool-activity__icon { color: var(--gold); flex: none; }
.tool-activity__icon { color: var(--leaf); flex: none; }
.tool-activity__label { flex: 1; }
.tool-activity__count { color: var(--ink-faint); }
.tool-activity[open] .reasoning__chevron { transform: rotate(180deg); }
@@ -423,7 +423,9 @@
so code follows the active theme. classprefix "pg-" is set in markdown.py.
*/
.pg-c, .pg-c1, .pg-cm, .pg-cs, .pg-cp { color: var(--ink-faint); font-style: italic; }
.pg-k, .pg-kn, .pg-kd, .pg-kc, .pg-kr, .pg-kt { color: var(--gold); }
/* Keywords take --warning, not the brand accent: strings are already green, and
two greens in one code block is not a colour scheme, it is a bug report. */
.pg-k, .pg-kn, .pg-kd, .pg-kc, .pg-kr, .pg-kt { color: var(--warning); }
.pg-s, .pg-s1, .pg-s2, .pg-sb, .pg-sd, .pg-se, .pg-sh, .pg-si, .pg-sx { color: var(--success); }
.pg-m, .pg-mi, .pg-mf, .pg-mh, .pg-mo { color: var(--danger); }
.pg-nf, .pg-nd { color: var(--accent); }
+23 -13
View File
@@ -77,7 +77,7 @@
MORIA (default, dark)
Deep stone and lamplight: the halls under the mountain. Surfaces are cool and
near-neutral so the gold and mithril accents carry all the colour.
near-neutral so the mallorn and mithril accents carry all the colour.
---------------------------------------------------------------------------
*/
:root,
@@ -105,18 +105,27 @@
--accent-ink: #0B0E11;
--accent-soft: rgba(143, 179, 204, 0.14);
/* Rune gold: the warm accent. Brand colour, and the assistant's mark. */
--gold: #E0B252;
--gold-hover: #EDC46F;
--gold-soft: rgba(224, 178, 82, 0.13);
/*
Mallorn: the brand accent, and the assistant's mark. A yellow-leaning leaf
green, so it stays warm against the mithril blue rather than turning the
palette into two cool accents that compete.
*/
--leaf: #9BCC5A;
--leaf-hover: #B1DD74;
--leaf-soft: rgba(155, 204, 90, 0.14);
/* Ember: destructive actions and errors. */
--danger: #E2795A;
--danger-hover: #EC8E72;
--danger-soft: rgba(226, 121, 90, 0.14);
--success: #7FB77E;
--success-soft: rgba(127, 183, 126, 0.14);
/*
Success leans teal rather than leaf. Two greens a hue apart read as one
colour rendered inconsistently -- an unread dot beside a brand badge has to
be tellable from it at a glance.
*/
--success: #5FBFA0;
--success-soft: rgba(95, 191, 160, 0.14);
--warning: #DFAE58;
--warning-soft: rgba(223, 174, 88, 0.14);
@@ -137,7 +146,7 @@
SHIRE (light)
Parchment, ink and moss: warm, low-contrast, easy to read for a long time.
Backgrounds are deliberately off-white -- pure #FFF next to the gold accent
Backgrounds are deliberately off-white -- pure #FFF next to the leaf accent
reads as clinical rather than as paper.
---------------------------------------------------------------------------
*/
@@ -165,16 +174,17 @@
--accent-ink: #FDFBF5;
--accent-soft: rgba(62, 107, 122, 0.12);
--gold: #A8801A;
--gold-hover: #8E6B12;
--gold-soft: rgba(168, 128, 26, 0.13);
/* The same mallorn, darkened until it holds its own as text on parchment. */
--leaf: #4C7A22;
--leaf-hover: #3C6318;
--leaf-soft: rgba(76, 122, 34, 0.13);
--danger: #A6432B;
--danger-hover: #8C3722;
--danger-soft: rgba(166, 67, 43, 0.11);
--success: #4F7A3F;
--success-soft: rgba(79, 122, 63, 0.12);
--success: #2C7360;
--success-soft: rgba(44, 115, 96, 0.12);
--warning: #98701A;
--warning-soft: rgba(152, 112, 26, 0.13);