调整skills的位置
This commit is contained in:
马宝龙
301
.codex/skills/hallmark/references/themes/carnival.md
Normal file
301
.codex/skills/hallmark/references/themes/carnival.md
Normal file
@@ -0,0 +1,301 @@
|
||||
# Theme — Carnival
|
||||
|
||||
Loud-maximalist editorial. **Duo-tone accent system across six named palette drops** (each its own mood), chunky variable display, decorative ornaments, hard-offset shadows, tinted paper. The loud sibling to Riso / Manifesto / Brutal — but **decorative, not raw**.
|
||||
|
||||
Loaded eagerly by SKILL.md Step 3 whenever the catalog pick is `carnival`. The default palette ("Cold Snap") and font stack live in [`site/css/tokens.css`](../../../../site/css/tokens.css) under `[data-theme="carnival"]`; this file carries the **palette drops** (six variants) plus the rules that tokens cannot encode.
|
||||
|
||||
## Axes (diversification)
|
||||
|
||||
- **Paper band** — light (`L 88–95%`, tinted — varies by drop)
|
||||
- **Display style** — **display-heavy** (Big Shoulders Display 800, variable-width axis)
|
||||
- **Accent hue** — **per-drop**. Each drop has its own duo-tone hue pair (warm+warm, cool+warm, warm+cool, etc.). The drop name is recorded alongside the theme name in the diversification log so consecutive builds rotate drops, not just themes.
|
||||
|
||||
## Palette drops
|
||||
|
||||
A drop is a named duo-tone palette that preserves Carnival's structural signature (saturated accent-1 + complementary accent-2 + tinted paper + deep ink) while rotating hue. **Every Carnival build picks one drop.** The catalog of six:
|
||||
|
||||
### Drop 01 · Cold Snap *(default)*
|
||||
|
||||
Warm + warm. Indie record-label, winter, scrappy. The canonical Carnival.
|
||||
|
||||
- `--color-paper: oklch(92% 0.045 50)` — warm pink-cream
|
||||
- `--color-paper-2: oklch(88% 0.050 45)`
|
||||
- `--color-paper-3: oklch(82% 0.060 40)`
|
||||
- `--color-ink: oklch(18% 0.080 20)` — deep aubergine
|
||||
- `--color-ink-2: oklch(28% 0.060 25)`
|
||||
- `--color-muted: oklch(45% 0.05 30)`
|
||||
- `--color-rule: oklch(40% 0.18 25)` — oxblood rules (decorative)
|
||||
- `--color-accent: oklch(86% 0.18 95)` — mustard
|
||||
- `--color-accent-2: oklch(40% 0.21 25)` — oxblood
|
||||
- `--color-accent-ink: oklch(18% 0.080 20)`
|
||||
- `--color-focus: oklch(40% 0.21 25)`
|
||||
|
||||
**When to pick:** independent music · winter releases · DIY scrappy · the brief mentions cassettes, vinyl, EPs.
|
||||
|
||||
### Drop 02 · Citrus Riot
|
||||
|
||||
Loud + neon. 90s zine, summer, electric. Lime against magenta — the hardest collision in the catalogue.
|
||||
|
||||
- `--color-paper: oklch(94% 0.040 85)` — pale acid cream
|
||||
- `--color-paper-2: oklch(90% 0.048 82)`
|
||||
- `--color-paper-3: oklch(84% 0.055 80)`
|
||||
- `--color-ink: oklch(20% 0.07 145)` — deep forest
|
||||
- `--color-ink-2: oklch(32% 0.05 140)`
|
||||
- `--color-muted: oklch(48% 0.04 130)`
|
||||
- `--color-rule: oklch(28% 0.28 350)` — deep magenta rules
|
||||
- `--color-accent: oklch(82% 0.20 130)` — chartreuse-lime
|
||||
- `--color-accent-2: oklch(28% 0.28 350)` — deep magenta (reads AA on paper, and as text)
|
||||
- `--color-accent-ink: oklch(20% 0.07 145)`
|
||||
- `--color-focus: oklch(28% 0.28 350)`
|
||||
|
||||
**When to pick:** zine collectives · summer drops · skate / DIY culture · briefs that want LOUD without referencing music.
|
||||
|
||||
### Drop 03 · Diner Sign
|
||||
|
||||
Americana. Cream + cherry red + navy. Postwar diner, road trip, neon-and-chrome.
|
||||
|
||||
- `--color-paper: oklch(95% 0.035 90)` — bright cream
|
||||
- `--color-paper-2: oklch(91% 0.042 88)`
|
||||
- `--color-paper-3: oklch(86% 0.050 85)`
|
||||
- `--color-ink: oklch(16% 0.04 30)` — black-brown
|
||||
- `--color-ink-2: oklch(28% 0.05 30)`
|
||||
- `--color-muted: oklch(45% 0.04 35)`
|
||||
- `--color-rule: oklch(30% 0.16 250)` — navy rules
|
||||
- `--color-accent: oklch(60% 0.22 25)` — cherry red
|
||||
- `--color-accent-2: oklch(30% 0.16 250)` — navy
|
||||
- `--color-accent-ink: oklch(95% 0.035 90)`
|
||||
- `--color-focus: oklch(30% 0.16 250)`
|
||||
|
||||
**When to pick:** food + drink · hospitality · vintage Americana · briefs mentioning burgers, milkshakes, motels, roadside.
|
||||
|
||||
### Drop 04 · Studio Night
|
||||
|
||||
Cool + cool. Dusk warmth, cyan + plum. Late-night booth, blue hour, podcast studio at midnight.
|
||||
|
||||
- `--color-paper: oklch(88% 0.05 25)` — warm dusk pink
|
||||
- `--color-paper-2: oklch(84% 0.055 22)`
|
||||
- `--color-paper-3: oklch(78% 0.06 20)`
|
||||
- `--color-ink: oklch(20% 0.05 270)` — deep navy-black
|
||||
- `--color-ink-2: oklch(32% 0.045 265)`
|
||||
- `--color-muted: oklch(48% 0.04 260)`
|
||||
- `--color-rule: oklch(24% 0.18 320)` — deep plum rules
|
||||
- `--color-accent: oklch(78% 0.18 220)` — cyan
|
||||
- `--color-accent-2: oklch(24% 0.18 320)` — deep plum (reads AA on paper, and as text)
|
||||
- `--color-accent-ink: oklch(20% 0.05 270)`
|
||||
- `--color-focus: oklch(24% 0.18 320)`
|
||||
|
||||
**When to pick:** late-night radio · podcasts about anything · music + atmosphere · briefs mentioning "late", "after dark", "blue hour", "moonlight".
|
||||
|
||||
### Drop 05 · Aqua Park
|
||||
|
||||
Cool + warm. Turquoise against coral. Summer pool, motel sign, vacation.
|
||||
|
||||
- `--color-paper: oklch(94% 0.040 180)` — pale aqua-cream
|
||||
- `--color-paper-2: oklch(90% 0.048 178)`
|
||||
- `--color-paper-3: oklch(84% 0.055 175)`
|
||||
- `--color-ink: oklch(20% 0.06 200)` — deep teal
|
||||
- `--color-ink-2: oklch(32% 0.05 198)`
|
||||
- `--color-muted: oklch(48% 0.04 195)`
|
||||
- `--color-rule: oklch(36% 0.24 35)` — deep coral rules
|
||||
- `--color-accent: oklch(72% 0.16 195)` — turquoise
|
||||
- `--color-accent-2: oklch(36% 0.24 35)` — deep coral (reads AA on paper, and as text)
|
||||
- `--color-accent-ink: oklch(20% 0.06 200)`
|
||||
- `--color-focus: oklch(36% 0.24 35)`
|
||||
|
||||
**When to pick:** summer brands · vacation / hospitality · skate / surf / pool · briefs mentioning summer, beach, motel, sun.
|
||||
|
||||
### Drop 06 · Pressroom
|
||||
|
||||
Warm + cool. Amber-gold against slate-blue. 1950s journalism, print shop, broadsheet weight.
|
||||
|
||||
- `--color-paper: oklch(89% 0.025 65)` — warm slate-cream
|
||||
- `--color-paper-2: oklch(85% 0.030 62)`
|
||||
- `--color-paper-3: oklch(79% 0.035 58)`
|
||||
- `--color-ink: oklch(16% 0.02 60)` — ink-black
|
||||
- `--color-ink-2: oklch(28% 0.025 58)`
|
||||
- `--color-muted: oklch(45% 0.025 55)`
|
||||
- `--color-rule: oklch(34% 0.10 240)` — slate-blue rules
|
||||
- `--color-accent: oklch(78% 0.18 75)` — amber-gold
|
||||
- `--color-accent-2: oklch(34% 0.10 240)` — slate-blue
|
||||
- `--color-accent-ink: oklch(16% 0.02 60)`
|
||||
- `--color-focus: oklch(34% 0.10 240)`
|
||||
|
||||
**When to pick:** journalism · newsletters · editorial / opinion · briefs mentioning "press", "newspaper", "broadsheet", "subscription".
|
||||
|
||||
### Drop rotation rule
|
||||
|
||||
The diversification log (`/.hallmark/log.json`) records the drop alongside the theme: `"theme": "carnival", "drop": "studio-night"`. **A new Carnival build picks a drop that hasn't appeared in the last 3 entries.** If only Cold Snap is in the log, any of the other five is valid. If the brief contains a strong drop signal (see "when to pick" above), honour the signal even if it tightens diversification.
|
||||
|
||||
### Pick the drop by domain first
|
||||
|
||||
Match the brief's **domain** before reaching for the loudest palette:
|
||||
|
||||
- food / drink / hospitality / street market → **Diner Sign** (or Cold Snap)
|
||||
- independent music / labels / EPs → **Cold Snap** (or Pressroom)
|
||||
- late-night / radio / podcast / after-dark → **Studio Night**
|
||||
- summer / pool / beach / vacation → **Aqua Park**
|
||||
- zine / skate / DIY / deliberately chaotic → **Citrus Riot**
|
||||
- journalism / newsletter / editorial → **Pressroom**
|
||||
|
||||
Citrus Riot and Aqua Park are the highest-chroma drops — reach for them when the brief genuinely *wants* maximum loudness, not as a default. A food market reads better in Diner Sign than in lime-on-magenta.
|
||||
|
||||
### When to construct a custom drop instead
|
||||
|
||||
If the brief explicitly names a brand colour that doesn't fit any catalog drop — e.g. *"our brand is teal and beige"* — route to the **custom theme** branch (see `custom-theme.md`) instead of stretching a Carnival drop. Drops are curated, not infinite. Six is the right number for now.
|
||||
|
||||
## Reference register
|
||||
|
||||
Dropout TV · Fly.io · Stones Throw Records · Third Man Records · Drag City · Moodelier · Kelsey Dake · Bold Monday.
|
||||
|
||||
The aesthetic: independent music labels, comedy networks, illustrator portfolios, hot-sauce brands, indie game studios. Things with **character**. Things that print posters as a side hustle. Things that sound loud out loud.
|
||||
|
||||
**Patron-saint reference (internal):** *Dropout TV homepage* + *Stones Throw artist pages*. When in doubt about decorative density, ask "would Dropout or Stones Throw run this much density?" If less, add ornaments. If more, you've gone too far.
|
||||
|
||||
## Signature moves
|
||||
|
||||
The theme's seven tics. A Carnival build should exhibit at least five of them.
|
||||
|
||||
1. **Duo-tone accent system.** Sections alternate which accent fills them. Section 1 fills with `--color-accent` (mustard); section 2 fills with `--color-accent-2` (oxblood); section 3 mustard again; etc. One section never shows both — they are *competing*, not blended.
|
||||
|
||||
```css
|
||||
.section:nth-of-type(odd) { --section-fill: var(--color-accent); }
|
||||
.section:nth-of-type(even) { --section-fill: var(--color-accent-2); }
|
||||
```
|
||||
|
||||
2. **Decorative ornaments.** Use `✱` (asterisk operator), `❋` (heavy six-petalled), `◆` (black diamond) as bullets, section dividers, and rhythmic spacers. Patterns:
|
||||
- Section dividers: `✱ ✱ ✱ ✱` (repeated 4×, centred)
|
||||
- List bullets: `❋` (replaces • / disc)
|
||||
- Section heading prefixes: `◆ Section Name` (left-aligned, ornament in accent colour)
|
||||
|
||||
3. **Layered colour blocks that bleed off the page edge.** Accent fills extend 24px past the page max-width on the left or right, so they read as **posters pinned to the wall**, not as buttons.
|
||||
|
||||
```css
|
||||
.colour-block { margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); }
|
||||
```
|
||||
|
||||
4. **Hard-offset drop shadow.** Every card, CTA, and image gets `box-shadow: 4px 4px 0 var(--color-ink)`. No soft shadows ever. The shadow is **flat ink, offset**. This is the single most-recognisable Carnival move.
|
||||
|
||||
5. **All-caps headlines with Big Shoulders variable-width, tightly tracked.** `font-variation-settings: "wdth" 110, "wght" 800;`. Track them **tight**, not loose: `letter-spacing: -0.005em` on the hero word, `0.02em` on section heads. The loose `0.04em` look reads as AI-spread and is reserved **only** for the marquee banner (where horizontal spread is the point). Keep line-height tight too: `0.82` for single hero words, `0.92` for multi-line heads. The effect is a marquee poster set by a typographer, not a stretched default.
|
||||
|
||||
6. **Halftone pattern fills** in placeholder image regions. Pure CSS, no images:
|
||||
|
||||
```css
|
||||
.halftone {
|
||||
background-image: radial-gradient(var(--color-ink) 1.5px, transparent 1.5px);
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
```
|
||||
|
||||
Used wherever the page would otherwise have a photo placeholder.
|
||||
|
||||
7. **Marquee scroll** on banner OR footer with decorative dot separators. *"NEW EP ◆ OUT NOW ◆ ON CASSETTE ◆ BLUE VINYL ◆ NEW EP ◆..."* — horizontal scroll, honours `prefers-reduced-motion: reduce` (freeze at static state).
|
||||
|
||||
## Layout pitfalls (must avoid)
|
||||
|
||||
Carnival's dense visual language has known traps. Read this list **before** writing a card layout — these are mistakes that have happened in earlier builds and shipped looking broken.
|
||||
|
||||
1. **Halftone portrait + side-by-side text in a narrow card → text gets covered.** When pairing a halftone "host portrait" / "artist portrait" with a show / artist name in the same card, **never use a 2-column grid where the content column can collapse below 200 px**. On a 3-up `repeat(3, 1fr)` desktop grid, the content column inside each card is ~150–180 px wide and a 5 rem portrait squeezes the title into overlap. The safe patterns:
|
||||
- **Vertical stack** (portrait on top, content below — the portrait sits naturally in the top-left of the card content area because of card padding). This is the default for portrait-paired cards.
|
||||
- **Side-by-side ONLY at 2-up or 1-up grids** where the content column has ≥ 250 px to breathe.
|
||||
- **Sticker corner** — portrait positioned `absolute; top: 0; right: 0` as a small badge, with text content flowing full-width below.
|
||||
|
||||
Concretely: if the card is in a `repeat(3, 1fr)` grid and includes a portrait + title pair, the card must use `display: flex; flex-direction: column;` with the portrait at a fixed `width: 4.5rem; height: 4.5rem;` (not `width: 100%`). Halftone squares **never** overlap typography.
|
||||
|
||||
2. **Hard-offset shadow on a card next to a viewport edge → shadow gets clipped.** When a card sits flush against the right edge of the page gutter, its `4px 4px 0` shadow extends past the page max-width. Add `padding-right: max(var(--page-gutter), 8px)` to grids that include shadowed cards near the edge, or set the shell to have ≥ 8 px right margin past the card grid.
|
||||
|
||||
3. **Duo-tone fill on a card whose content includes both accents → reads as "blended", not "competing".** A mustard tile must never contain an oxblood badge inside it. Pick one accent per tile. (Signature #1 explicitly says this — but it's worth restating here because it gets violated when adding a sticker or a "NEW" badge.)
|
||||
|
||||
4. **Marquee scroll that doesn't repeat its content → gap at end of loop.** The marquee must contain the same scrolling text repeated at least twice (or use `aria-hidden` siblings) so the scroll animation reads as continuous, not as a single string sliding off.
|
||||
|
||||
5. **Big Shoulders width axis used without `font-variation-settings` → no width variation.** Setting `font-stretch` on Google's Big Shoulders Display does not work — only `font-variation-settings: "wdth" 110` does. If you see a hero that's supposed to be width-110 but renders at width-100, this is the bug.
|
||||
|
||||
6. **Section head detached from, or mis-centred over, its body.** The section head (heading + any lede) sits **tight above** the content it names — about `1.25rem` (`--section-head-gap`) — and **shares that content's alignment**. Don't cap the head at a narrow `max-width` / `ch` and then `margin-inline: auto` it: that strands a centred head over a full-width, left-flush grid (the classic accidental mismatch). Left-flush grid → left-flush head. (See the alignment-coherence note in `layout-and-space.md`.)
|
||||
|
||||
7. **Newsletter / CTA button not aligned with the input beside it.** When a button sits next to a form input in one row, they must share the **same height, vertical padding, and border width**, and the row must use `align-items: center` — otherwise the button floats above the input's baseline. If a label is stacked above the input it makes that column taller; centre the row on the *control*, not the column (give the field `align-items: center` or pull the label out of the flex row).
|
||||
|
||||
## Macrostructure affinity
|
||||
|
||||
**Carnival loves these.**
|
||||
|
||||
- **Marquee Hero** — the canonical Carnival opening; large word, scrolling banner under
|
||||
- **Type Specimen** — the page IS the type; Big Shoulders Display 96 px+ as content
|
||||
- **Manifesto** — short loud declarative statements (works for Carnival's voice too, but louder palette)
|
||||
- **Stat-Led** — when the page leads with numbers, Carnival displays them big-and-mustard
|
||||
- **Photographic** — image-led with halftone treatments and ornament captions
|
||||
- **Bento Grid** (loud variant) — gridded blocks where each tile alternates accent colour
|
||||
|
||||
## Macrostructure rejection
|
||||
|
||||
**Carnival refuses these.**
|
||||
|
||||
- **Long Document** — too quiet; Carnival doesn't sustain over 1500 words
|
||||
- **Letter** — too intimate; Carnival never whispers
|
||||
- **Quote-Led** — too pensive
|
||||
- **Conversational FAQ** — too soft
|
||||
- **Workbench** — too technical; Carnival is poster art, not product spec
|
||||
|
||||
If the brief would otherwise land in one of these, redirect to Marquee Hero or Manifesto.
|
||||
|
||||
## Voice fixtures
|
||||
|
||||
Sample lines the Carnival voice should *read like*. Short. Loud. Declarative. Caps on the headlines, not on the body.
|
||||
|
||||
- *"FIVE NEW FLAVORS. ALL TOO HOT."*
|
||||
- *"WE PRESS RECORDS. THAT'S IT."*
|
||||
- *"NEW SEASON. NEW SHOWS. SAME CHAOS."*
|
||||
- *"ONE EP. THREE ARTISTS. NO REGRETS."*
|
||||
- *"THE GAME IS PIXEL ART. THE GAME IS HARD."*
|
||||
|
||||
Body copy is **shorter than other themes**. 1–2 short sentences per paragraph. Paragraphs separated by ornament dividers, not whitespace alone.
|
||||
|
||||
**Voice rules:**
|
||||
- Headlines: ALL CAPS, ≤ 6 words, period at end (not exclamation — the loudness is in the type, not the punctuation).
|
||||
- Body: sentence case, short, present-tense.
|
||||
- Numerals over words always (*5* not *five*).
|
||||
- Never any of: "experience", "journey", "elevate", "curate", "platform", "ecosystem", "transform". These are SaaS-default AI tells; Carnival is independent, not platformed.
|
||||
|
||||
## Anti-patterns (theme-specific)
|
||||
|
||||
- **Never soft shadows.** Carnival is hard-offset (`4px 4px 0`) or no shadow. If you find yourself reaching for `0 8px 24px`, redirect.
|
||||
- **Never both accents in one block.** Mustard *or* oxblood per section, never blended.
|
||||
- **Never sentence-case headlines.** Headlines are ALL CAPS or `font-variant: all-petite-caps`.
|
||||
- **Never light-grey text.** Body text is full-ink. Carnival doesn't do "subtle".
|
||||
- **Never long paragraphs.** If a paragraph exceeds 3 sentences, break it with an ornament divider or split into two blocks.
|
||||
- **Never neutral CTAs.** Every CTA fills with one of the two accent colours.
|
||||
- **Never thin rules.** Rules are 2 px solid in oxblood. Hairlines belong to Boutique / Specimen.
|
||||
- **Emoji as decoration is allowed when typographic** (✱ ❋ ◆ are typographic ornaments, not emoji). Smiley-face / heart emoji are still banned per universal anti-patterns.
|
||||
|
||||
## How Carnival differs from neighbouring themes
|
||||
|
||||
| vs | difference |
|
||||
|---|---|
|
||||
| **Riso** | Riso is risograph print-craft (peach paper, CMYK misregistration on display, cyan + yellow). Carnival is *editorial maximalism* — duo-tone, oxblood-on-pink, decorative ornaments, variable-width type. Different parent tradition. |
|
||||
| **Manifesto** | Manifesto is BLACK paper + ALL CAPS red Anton. Carnival is *tinted warm paper* + duo accents + ornaments. Inverted polarity — Manifesto is dark, Carnival is light. |
|
||||
| **Brutal** | Brutal is raw graphic-design brutalism (heavy borders, slab type, no ornaments). Carnival is **decorative** — ornaments, layered blocks, variable type, character. |
|
||||
| **Sport** | Sport is athletic italic uppercase (Inter Tight italic 700). Carnival is poster-art expressive (Big Shoulders 800 with width axis). Sport feels Nike; Carnival feels Drag City. |
|
||||
|
||||
## Test brief expectations
|
||||
|
||||
Carnival should be a candidate when the brief mentions:
|
||||
|
||||
- *record label · podcast · comedy · indie · zine · poster · illustrator · games · hot sauce · merch · streetwear · cassette · vinyl · cassettes · live show · zine · brand of one*
|
||||
- product categories: music · comedy · games · illustration · hot sauce · merch · skateboards · gig posters
|
||||
- emotional tone: *loud, fun, scrappy, chaotic, layered, character-led, decorative*
|
||||
|
||||
Briefs that say *enterprise / scale / API / B2B / dashboard* never route to Carnival.
|
||||
|
||||
## Build hint
|
||||
|
||||
When emitting a Carnival page, the first 12 lines of CSS should establish the four most important tells:
|
||||
|
||||
```css
|
||||
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
|
||||
h1, h2 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110; letter-spacing: 0.02em; line-height: 0.92; text-transform: uppercase; } /* hero word goes tighter: letter-spacing: -0.005em; line-height: 0.82 */
|
||||
.card, .cta { box-shadow: 4px 4px 0 var(--color-ink); border: 2px solid var(--color-ink); }
|
||||
.section:nth-of-type(odd) { background: var(--color-accent); color: var(--color-accent-ink); }
|
||||
.section:nth-of-type(even) { background: var(--color-accent-2); color: var(--color-paper); }
|
||||
.ornament { color: var(--color-accent); }
|
||||
.halftone { background-image: radial-gradient(var(--color-ink) 1.5px, transparent 1.5px); background-size: 12px 12px; }
|
||||
```
|
||||
|
||||
Those rules carry 70 % of the theme's identity. The rest is content fit.
|
||||
146
.codex/skills/hallmark/references/themes/cobalt.md
Normal file
146
.codex/skills/hallmark/references/themes/cobalt.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# Theme — Cobalt
|
||||
|
||||
Modern-minimal, dev-tool register. The page for an **API, an SDK, a CLI, a docs home, a developer platform** — the GitBook / Firecrawl / Vercel school, executed in **cool cobalt-on-light, not orange**. A calm cool-white ground, ruler-drawn hairlines, exactly ONE electric cobalt signal accent, and **code as the hero**. It reads like good infrastructure: calm, precise, fast.
|
||||
|
||||
Loaded eagerly by SKILL.md Step 3 whenever the catalog pick is `cobalt`. The OKLCH palette + font stack live in [`site/css/tokens.css`](../../../../site/css/tokens.css) under `[data-theme="cobalt"]`. Canonical build: [`site/examples/cobalt-01/`](../../../../site/examples/cobalt-01/) (an API product landing with a request/response hero).
|
||||
|
||||
> **Why not orange.** GitBook and Firecrawl both converged on orange-as-signal — but that lane is now crowded, and Hallmark's warm slots are already taken (Lumen brass, Bloom terracotta, Coral coral). Cobalt keeps their *discipline* (cool ground + one signal + code-as-hero + hairlines) and aims the signal at the open electric-blue lane instead. The blue is the differentiator, not a copy.
|
||||
|
||||
## Axes (diversification)
|
||||
|
||||
- **Paper band** — cool light (`L 98.5%`, hue ~250, very low chroma). An engineered near-white — distinct from Coral's warm grey and from the genre's dark grounds.
|
||||
- **Display style** — **grotesk-sans** (Space Grotesk 500/600 — slightly mechanical, tight tracking). Distinct from Geist (Coral) and from every serif/rounded option.
|
||||
- **Accent hue** — **electric cobalt** (`oklch(58% 0.20 256)`). High-chroma true blue — reads "API-live," sits clear of Midnight/Lumen's dusky indigos (~250/268). Used as a *signal*, never a flood.
|
||||
|
||||
## Reference register
|
||||
|
||||
GitBook · Firecrawl · Vercel / Geist · Linear · Mintlify · Stripe docs · Resend · Clerk · Railway · Supabase.
|
||||
|
||||
The aesthetic: the developer-product landing and docs home — a cool engineered canvas, one signal accent, **code/terminal/API as the focal element**, hairline structure, a ⌘K-flavoured nav. Never name any of these in the output.
|
||||
|
||||
**Patron-saint reference (internal):** *Vercel's blueprint-and-mono restraint* + *Firecrawl's live request-result credibility move*, recoloured cobalt. When in doubt, ask "does this read like an instrument panel, or like a marketing template?" Keep the former.
|
||||
|
||||
## Required dependencies
|
||||
|
||||
1. **Fonts** — **Space Grotesk** (display, 500/600), **Inter** (body, 400/500), **JetBrains Mono** (code + small UPPERCASE labels). All-sans; no serif anywhere. Google Fonts:
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
```
|
||||
2. **A small reveal script** — one `IntersectionObserver` adding `.is-in` (fade + ~10px rise, ease-out ~600ms). Plus a one-shot "type-in" of a single line in the hero code demo, then static.
|
||||
3. **A working ⌘K command palette** — a small JS overlay that opens on click **and** ⌘K / Ctrl+K (Esc or backdrop closes; Arrow↑/↓ select; type-to-filter), `role="dialog"` / `aria-modal`, focus-managed, reduced-motion safe. The ⌘K in the nav actually works — Cobalt's signature interactive move.
|
||||
|
||||
## The signature moves
|
||||
|
||||
1. **Cool engineered paper, never `#fff`** — `oklch(98.5% 0.004 250)`. Ink is cool charcoal `oklch(24% 0.02 258)`, never `#000`. Body text sits a notch lighter (`oklch(34% 0.018 257)`).
|
||||
|
||||
2. **Hairlines do the work** — 1px `--color-rule` borders define every surface. **No boxed cards, no drop-shadows** beyond a single barely-there `0 1px 2px` lift on the code card. Depth comes from borders, not blur.
|
||||
|
||||
3. **One cobalt signal, used sparingly** (< 5% of any viewport) — the eyebrow tick, a link's hover underline, the one primary button, focus rings, the `200 OK` chip, the active nav item. Everything else is ink-on-cool-white.
|
||||
|
||||
4. **Code is the hero** — a dark **graphite** card (`oklch(22% 0.016 260)`) with a window bar (3 dots + a filename), syntax tokens (cobalt for methods/keys, light for strings, muted for punctuation), and a status chip. One line types in once, then static. Either a **live API request/response** (POST + JSON `200 OK`) or a **terminal** (install + a clean `PASS` run). Title + lede sit LEFT; the demo sits RIGHT — asymmetric, never centred.
|
||||
|
||||
5. **Bordered nav + a working ⌘K palette** — a flush full-width bar, single hairline bottom border, light blur on scroll. Wordmark + 2–3 text links left; a bordered **⌘K** affordance + one solid cobalt button right. The ⌘K **opens a real command palette** (mono search + command rows; click or ⌘K/Ctrl+K; Esc to close) — the page *behaves* like a dev tool, not just looks like one. **Not a floating pill** (softer, and Coral's vocabulary).
|
||||
|
||||
6. **Tight technical radii** — 6px on buttons/inputs, 10px on code cards. Not Coral's soft pills, not 0px brutalism — "drawn with a ruler."
|
||||
|
||||
7. **Mono labels** — eyebrows, meta, status, kbd hints in JetBrains Mono, UPPERCASE, `0.06em` tracking. The machine-readout voice against the Space Grotesk display.
|
||||
|
||||
8. **One dark graphite band per page** — a single full-bleed dark section (a quickstart, a how-it-works, a watch-mode demo) on `oklch(~20% 0.016 260)` with light cool text and the cobalt accent popping. It gives the page a **light → dark → light** rhythm and a showcase moment. The page's *one* dark beat — Cobalt is a light theme *with* a dark band, never a dark theme.
|
||||
|
||||
## Motion
|
||||
|
||||
Composed and sparse. The one hero type-in (plays once). Section reveals fade + rise. Hover: cobalt underline-grow on nav/links; a 1px border-colour shift to cobalt on the code card / focusable surfaces. **No bounce, no parallax, no autoplay.** Everything gates behind `prefers-reduced-motion: no-preference`; reduced-motion ships static + fully visible.
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
- **No orange accent** — the crowded GitBook/Firecrawl lane and a collision with Lumen/Bloom/Coral. Cobalt is blue.
|
||||
- **No warm paper** — warm grey is Coral's. Cobalt is cool (hue ~250–258).
|
||||
- **No pure `#fff` / `#000`.** Cool near-white paper, cool charcoal ink.
|
||||
- **No pill / gradient CTAs.** One solid cobalt button at 6px radius + understated typographic links. Name the destination.
|
||||
- **No centred-everything hero** (gate 6) — left-biased, title-left / demo-right.
|
||||
- **No three-equal-icon-tile feature grid** (gate 3) — vary it (one wide code example + narrower points; asymmetric benchmark figures).
|
||||
- **No glassmorphism, no gradient text** (gates), **no aurora/mesh blob, and no background texture/pattern at all** — cool paper + hairlines carry the page; its one dark beat is the graphite band (signature 8), not a background.
|
||||
|
||||
## Macrostructure affinity
|
||||
|
||||
**Cobalt loves these.**
|
||||
|
||||
- **SaaS / API Product** — hero + quick-start code + feature rows + pricing/CTA *(canonical — cobalt-01)*
|
||||
- **Dev-tool / CLI** — terminal hero + install + benchmark figures + docs CTA
|
||||
- **Docs home** — a calm index with a search-first nav
|
||||
- **Workbench** — the technical, tool-first shape
|
||||
- **Marquee** — when the hero is one confident code demo
|
||||
|
||||
## Macrostructure rejection
|
||||
|
||||
**Cobalt refuses these.**
|
||||
|
||||
- **Letter** — too intimate; Cobalt is a product, not a note
|
||||
- **Manifesto** — too loud; Cobalt is calm infrastructure
|
||||
- **Photographic / image-led** — Cobalt leads with code, not imagery
|
||||
- **Long Document** — prose-led; route warm-editorial instead
|
||||
|
||||
## Voice fixtures
|
||||
|
||||
Declarative, technical, specific. Name the X concretely. No hype adjectives.
|
||||
|
||||
- *"Turn any website into clean Markdown for LLMs."*
|
||||
- *"One API. Every page."*
|
||||
- *"From idea to production in an afternoon."*
|
||||
- *"Type-safe by default. Fast by design."*
|
||||
- *"Built to ship — `200 OK` in under 200 ms."*
|
||||
|
||||
Never any of: *seamless, robust, cutting-edge, leverage, synergy, revolutionary, unlock, supercharge*. Never "click here." Name the endpoint, the command, the number.
|
||||
|
||||
## How Cobalt differs from neighbouring themes
|
||||
|
||||
| vs | difference |
|
||||
|---|---|
|
||||
| **Coral** (modern-minimal sibling) | Coral is warm-grey paper + warm coral accent + Geist + soft pills + a quiet title/lede hero. Cobalt is cool-white + electric blue + Space Grotesk/JetBrains Mono + tight bordered controls + a live code hero. Same genre, opposite temperature — the rotation walks between them. |
|
||||
| **Midnight** (atmospheric) | Both live near hue 250–258, but Midnight is a **dark** canvas (atmospheric, numbered display, typewriter reveals). Cobalt is a **light** engineered canvas (modern-minimal, code hero). Light vs dark settles it instantly. |
|
||||
| **Lumen** (atmospheric) | Lumen is a dark (or cool-bone) *apparatus* page with Instrument Serif + an emit/refract focal artefact. Cobalt is light, all-sans, and its focal element is a literal code/API card, not a built light-instrument. |
|
||||
| **Aurora** (atmospheric) | Aurora is dark cyan blooms + Sentient serif body. Cobalt is light, hairline-structured, cobalt-on-white — no blooms, no serif. |
|
||||
|
||||
## Test brief expectations
|
||||
|
||||
Cobalt should be a candidate when the brief mentions:
|
||||
|
||||
- *API · SDK · CLI · dev tool · developer platform · docs · documentation · infrastructure · backend · database · observability · webhooks · type-safe · open-source tool · ship · deploy · developer experience · B2B developer*
|
||||
- Product categories: *API · developer tool · dev platform · docs site · infra · SaaS-for-engineers*
|
||||
- Emotional tone: *precise · engineered · fast · technical · instrument-panel · calm-confident · cool*
|
||||
|
||||
Briefs that are warm / consumer / editorial / image-led route elsewhere (Coral for warm SaaS, the editorial themes for content). When the brief is for developers and wants to *show the code*, it's Cobalt.
|
||||
|
||||
## Build hint
|
||||
|
||||
The first lines of CSS establish Cobalt's anchor moves:
|
||||
|
||||
```css
|
||||
html, body { overflow-x: clip; }
|
||||
body { background: var(--color-paper); color: var(--color-ink-2);
|
||||
font-family: var(--font-body); font-weight: 400; }
|
||||
|
||||
/* Reveal — the whole motion engine */
|
||||
.reveal { opacity: 0; transform: translateY(10px);
|
||||
transition: opacity .6s cubic-bezier(0.16,1,0.3,1),
|
||||
transform .6s cubic-bezier(0.16,1,0.3,1); }
|
||||
.reveal.is-in { opacity: 1; transform: none; }
|
||||
|
||||
/* The code hero — dark graphite card, hairline-framed */
|
||||
.code-card { background: var(--color-graphite); border: 1px solid var(--color-rule-2);
|
||||
border-radius: 10px; box-shadow: 0 1px 2px oklch(24% 0.02 258 / 0.05);
|
||||
font-family: var(--font-mono); }
|
||||
.code-card .tok-key, .status--ok { color: var(--color-accent); } /* the one signal */
|
||||
.status--ok { font: 500 0.75rem/1 var(--font-mono); letter-spacing: .06em; }
|
||||
|
||||
/* Bordered nav + the one cobalt button (6px, never a pill) */
|
||||
.nav { border-bottom: 1px solid var(--color-rule); backdrop-filter: blur(8px); }
|
||||
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink);
|
||||
border-radius: 6px; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
}
|
||||
```
|
||||
|
||||
Plus the Space Grotesk + Inter + JetBrains Mono link and the small reveal/type-in script. The canonical build to mirror is [`site/examples/cobalt-01/`](../../../../site/examples/cobalt-01/).
|
||||
403
.codex/skills/hallmark/references/themes/hum.md
Normal file
403
.codex/skills/hallmark/references/themes/hum.md
Normal file
@@ -0,0 +1,403 @@
|
||||
# Theme — Hum
|
||||
|
||||
The playful, vibrant, **alive** register. Cream paper, multi-accent palette (pear-yellow primary, sky-cyan secondary, coral-red pop), rounded sans typography, generous radii, soft lifting shadows, mandatory hover-and-on-paint motion. Hum is the catalog theme for products that don't take themselves too seriously — daily-curiosity apps, learning platforms, habit trackers, friendship apps, kids' tools, indie creative software. Sites that should feel like the room is warm and someone smart is smiling.
|
||||
|
||||
Loaded eagerly by SKILL.md Step 3 whenever the catalog pick is `hum`. The palette + font stack live in [`site/css/tokens.css`](../../../../site/css/tokens.css) under `[data-theme="hum"]`. This file carries signature moves, motion direction, voice fixtures, anti-patterns, and how Hum holds its identity against neighbouring themes. Hum is the catalog's only playful theme — its closest siblings are Coral (single-accent restraint, modern-minimal) and Bloom (warm-light atmospheric), not another playful register.
|
||||
|
||||
## Axes (diversification)
|
||||
|
||||
- **Paper band** — light (`L 97%`), warm cream tinted toward pear-yellow hue (~95°). Yellower and brighter than any other warm-paper theme in the catalog — never the rose-warm or oat-warm cream of the editorial themes.
|
||||
- **Display style** — **rounded-sans** (new axis value, Plus Jakarta Sans / Open Runde register — rounded humanist letterforms with closed apertures). Distinct from geometric-sans (Manifesto), italic-serif, classical-serif (Lumen), and other catalog options.
|
||||
- **Accent hue** — **multi** (new axis value — three accents on stage simultaneously: pear-yellow `H 95`, sky-cyan `H 235`, coral-red `H 18`). Distinct from every single-accent or duo-tone theme in the catalog.
|
||||
|
||||
## Reference register
|
||||
|
||||
Brilliant.org (post-2024 brand refresh — Koto's pear-yellow + cream + custom CoFo Sans) · Duolingo (the named-color system: Feather Green, Macaw, Cardinal, Bee, Fox, Beetle, Humpback) · PostHog (Max the hedgehog, cream + red + blue, Open Runde + Squeak + Loud Noises) · tldraw (Shantell Sans with `Bounce` axis) · Cosmos (color-shift-on-hover) · Cluely (Mac OS chrome as set dressing) · Liveblocks (cursor-presence done right) · Hover.dev (the working dictionary of spring-physics interactions) · Each.place, Tella (vibrant gradient surfaces).
|
||||
|
||||
The aesthetic to match: cream paper (never pure white), a single character or mark that *reacts* to user actions, generous rounded surfaces, big confident counters in rounded display, soft drop shadows that lift on hover, multi-accent sections that don't fight (because each accent has its own surface). Pear-yellow + cream is the **calibration** combination — anything that reads further saturated than that has gone too vibrant; anything that reads more muted has lost the playfulness.
|
||||
|
||||
**Patron-saint reference (internal):** *Brilliant.org's Koji moment* + *PostHog's "if it could belong to any SaaS, it isn't PostHog enough" rule*. When in doubt about restraint, ask the inverse: *"is there a single moment on this page that would not exist if we weren't trying to feel alive?"* If no, the page is too quiet for Hum.
|
||||
|
||||
## Palette
|
||||
|
||||
Multi-accent. No single accent dominates — different surfaces use different accents, and the contrast between sections is part of the typographic rhythm.
|
||||
|
||||
- `--color-paper: oklch(97% 0.012 95)` — cream, slight pear-yellow pull (Brilliant's calibration)
|
||||
- `--color-paper-2: oklch(94% 0.016 95)` — tinted band (yellower)
|
||||
- `--color-paper-3: oklch(91% 0.020 95)` — deeper hover
|
||||
- `--color-ink: oklch(20% 0.012 250)` — near-black with cool tilt (PostHog's `#151515` discipline — never pure black)
|
||||
- `--color-accent: oklch(86% 0.18 95)` — pear-yellow (primary; CTA, streaks, primary character mark)
|
||||
- `--color-accent-2: oklch(66% 0.18 235)` — sky-cyan (secondary; links, hover tints, illustrations)
|
||||
- `--color-accent-3: oklch(68% 0.24 18)` — coral-red (pop; only used at high-energy single moments — streak completion, badge, the one big number)
|
||||
- `--color-mint: oklch(80% 0.16 150)` — soft green (used sparingly — success states, secondary tags)
|
||||
- `--color-lavender: oklch(74% 0.16 305)` — used sparingly (tag chips, decorative)
|
||||
|
||||
**Three-rule for accents:**
|
||||
1. Each accent owns its own type of surface. Pear = primary action. Cyan = link / hover-tint. Coral = single high-energy moment per page.
|
||||
2. Accents never blend in gradients (no pear-to-cyan gradient anywhere).
|
||||
3. Mint and lavender are *occasional* — never more than one of each per page.
|
||||
|
||||
## Typography
|
||||
|
||||
Three font families. Rounded sans throughout — Hum has no serif anywhere.
|
||||
|
||||
- **Display / body:** Plus Jakarta Sans (Google Fonts, weights 400/500/600/700) — rounded humanist sans with closed apertures and friendly terminals. The Brilliant / PostHog / Open Runde register. Falls back to Geist, then system rounded.
|
||||
- **Mono:** JetBrains Mono (uppercase labels, tabular numerals, streak counters).
|
||||
- **No serif anywhere.** No `Instrument Serif`, no `Playfair`, no `Newsreader`. If a serif sneaks in, the theme is misapplied.
|
||||
|
||||
**Type discipline:**
|
||||
- Display weight: **600** (heavier than Lumen's 400 — Hum's display is confident, not delicate).
|
||||
- Tracking on display: `-0.025em` (tight, not over-tight).
|
||||
- Body weight: 400 with 500 for inline emphasis.
|
||||
- All-caps reserved for mono labels.
|
||||
- **Big counters:** stat numerals at clamp(3rem, 5vw + 1rem, 5rem), rounded display, tabular-nums. Streaks, completion counts, deep-dive counts.
|
||||
|
||||
## The seven signature moves
|
||||
|
||||
A Hum build must exhibit **at least six of these seven**. Skipping the character moment (#5) is the only acceptable omission — for product-led pages without space for ornament.
|
||||
|
||||
These are the theme's *vocabulary*, not a layout: which moves appear is shared, but **how they're composed must differ every build** (see *Not-AI discipline* below). In particular, #3 is the colour-shift *technique* (accent tint deepens on hover) applied to whatever tile or row shape the build chooses — it is never a licence for the banned 3-equal-cards row.
|
||||
|
||||
### 1. The button system — three variations, the press is the feedback
|
||||
|
||||
Hum ships **one button system, three style variations**, structured as `.btn` (base = *push*) + a style modifier (`.btn--soft` | `.btn--outline`) + a colour modifier (`.btn--pear` | `--coral` | `--cyan` | `--lav` | `--mint` | `--ink`) + size (`.btn--sm` | `.btn--lg`). The canonical, reviewed implementation is the `.btn` CSS block inlined below — **copy that `.btn` system verbatim into every Hum build.** Do not re-improvise button CSS per build (that is how the broken version proliferated).
|
||||
|
||||
**The anatomy that matters (the two bugs this fixes):**
|
||||
|
||||
1. **Shadow = a full-width solid colour edge + a separate soft ground shadow.** `box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast)`. **Never a negative spread** (`0 8px 0 -4px` makes the edge narrower than the button — the old bug). The first shadow is the button's *thickness*, flush to its width; the second is the cast shadow on the ground.
|
||||
2. **The press is the feedback.** Lift on hover (`translateY(-2px)`, edge grows to `6px`), **press DOWN on `:active`** (`translateY(+3px)`, edge shrinks to `1px`) so it physically depresses. Easing is snappy — `cubic-bezier(0.2, 0.7, 0.3, 1)`, 140 ms hover / 70 ms active. **No `scale()`, no spring overshoot** (the old `scale(1.04)` + `cubic-bezier(…1.56…)` read floaty).
|
||||
|
||||
```css
|
||||
.btn {
|
||||
--btn-face: var(--color-accent); --btn-ink: var(--color-ink);
|
||||
--btn-edge: var(--color-accent-deep); --btn-cast: oklch(76% 0.20 95 / 0.45);
|
||||
--btn-line: var(--color-accent-deep);
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
|
||||
padding: 0.8rem 1.4rem; font-weight: 600; border: 0; border-radius: var(--radius-pill);
|
||||
color: var(--btn-ink); background: var(--btn-face); cursor: pointer; position: relative; isolation: isolate;
|
||||
box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
|
||||
transform: translateY(0);
|
||||
transition: transform 140ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 140ms cubic-bezier(0.2,0.7,0.3,1), background-color 160ms;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
|
||||
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
|
||||
.btn:focus-visible { outline: 3px solid color-mix(in oklch, var(--btn-edge) 70%, var(--color-focus)); outline-offset: 3px; }
|
||||
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: 0 4px 0 0 var(--btn-edge); }
|
||||
/* .btn--soft = flat-lift (soft shadow, no colour edge); .btn--outline = hairline + accent fill sweeps up on hover.
|
||||
.btn__arrow slides 3px right on hover. .is-loading shows a spinner. Build these modifiers on top of the .btn base above. */
|
||||
```
|
||||
|
||||
**Rules:** primary action = push (the chunky one). Secondary = soft. Tertiary = outline. One push button per primary moment; don't stack three push buttons in a row. The first-paint wobble is **retired** — it fought the press metaphor.
|
||||
|
||||
### 2. Multi-accent section bands
|
||||
|
||||
Sections alternate background between cream paper, pear-tint, cyan-tint, and coral-tint. Each accent owns sections matching its meaning: pear = primary product surfaces, cyan = community / "what people say," coral = the single emphatic moment (streak day, headline number). Bands transition with simple `background-color` changes — no gradients between them.
|
||||
|
||||
### 3. Color-shift card grid
|
||||
|
||||
Card grid where each card has a different accent tint at rest (very low opacity, ~6% of its accent). On hover: the card's tint deepens to ~12%, and the card lifts 4px with a softened shadow. The accents don't compete because each card holds its accent for its own surface.
|
||||
|
||||
### 4. Streak / counter tick-up
|
||||
|
||||
Big rounded numerals that count up from 0 to their target value on view-enter, over 1200ms with `cubic-bezier(0.22, 1, 0.36, 1)` easing (snappy arrival). The container scales 1 → 1.06 → 1 once on completion (the "yes!" moment). Implemented with `@property --num` for CSS-only tick-up, or a small JS loop with `requestAnimationFrame`.
|
||||
|
||||
### 5. Character moment — one small reacting mark
|
||||
|
||||
Every Hum page has ONE small character / mark that reacts to user interaction. Constructed entirely in CSS (no `<img>`, no Lottie). Examples:
|
||||
- A small filled circle that pulses gently at rest and bursts a 4-point star when its CTA is clicked.
|
||||
- A wordmark where one letter is the character — pulses, blinks, or wobbles on hover.
|
||||
- A floating shape next to the hero that drifts in a slow circle and grows when hovered.
|
||||
|
||||
The character lives in **pear-yellow** by default — that's its colour. Other accents can carry it but pear is canonical.
|
||||
|
||||
### 6. Big rounded everything
|
||||
|
||||
`--radius-card: 20px`, `--radius-pill: 999px`, `--radius-input: 12px`. Soft drop shadows on cards (`0 12px 32px -16px ink/15%`) that brighten on hover. The *amount* of round (and the shadow philosophy) is a per-build lever — a kids' build can go chunky at 28px with a hard button-style edge, a quiet one tighter at 14px with a single soft layer (see the card-physics lever under *Not-AI discipline*). What never changes: **no square corners anywhere** — this is the rounded theme.
|
||||
|
||||
### 7. Star-burst micro-celebration on success
|
||||
|
||||
When a primary action completes (CTA click, form submit, streak hit), a 4-point star bursts from the click point and fades out over 420ms. Star is in coral-red (the pop accent), 24px tall at full size. Single firing per action; never auto-loops.
|
||||
|
||||
```css
|
||||
.star-burst {
|
||||
position: absolute;
|
||||
width: 24px; height: 24px;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%),
|
||||
linear-gradient(0deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%);
|
||||
animation: star-burst 420ms ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes star-burst {
|
||||
0% { transform: scale(0) rotate(0deg); opacity: 1; }
|
||||
60% { transform: scale(1.2) rotate(35deg); opacity: 0.9; }
|
||||
100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
|
||||
}
|
||||
```
|
||||
|
||||
## Motion direction
|
||||
|
||||
Hum's motion stack is **the loudest in the catalog**. Almost every interactive element does something on hover or first-paint.
|
||||
|
||||
| Element | Motion |
|
||||
|---|---|
|
||||
| Primary CTA (push) | lift 2px on hover (the colour edge grows), press DOWN 3px on `:active` (edge shrinks to 1px); snappy `cubic-bezier(0.2,0.7,0.3,1)`. No scale, no wobble — the press is the feedback |
|
||||
| Cards | lift 4px + shadow brighten + accent tint deepen on hover (220ms `--ease-spring`) |
|
||||
| Counters | tick-up on view-enter (1200ms, snappy ease-out) + scale pulse on completion |
|
||||
| Character mark | pulse at rest (4s gentle scale 1 → 1.04 → 1); star-burst on relevant CTA click |
|
||||
| Section headings | translateY(12px → 0) + opacity 0 → 1 on view-enter, 600ms, 80ms stagger |
|
||||
| Star-burst | 420ms, fires once on primary action complete |
|
||||
| Scroll | Lenis (`duration: 0.8, lerp: 0.10` — a soft, slightly elastic glide for the playful feel) |
|
||||
|
||||
Available easings:
|
||||
- `--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)` (bouncy overshoot — the canonical Hum easing)
|
||||
- `--ease-snap: cubic-bezier(0.22, 1, 0.36, 1)` (easeOutExpo — for tick-ups and reveals)
|
||||
- `--ease-out`, `--ease-in-out` (standard fallbacks)
|
||||
|
||||
`prefers-reduced-motion: reduce`:
|
||||
- Spring hovers collapse to opacity/colour transitions only (no scale, no rotate, no wobble).
|
||||
- Counters render at final value instantly.
|
||||
- Character mark stops pulsing (stays at final state).
|
||||
- Star-burst disabled entirely.
|
||||
|
||||
The page must remain delightful with reduced motion — restraint, not breakage.
|
||||
|
||||
## Required dependencies
|
||||
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
```
|
||||
|
||||
Two families. No third. No serif anywhere.
|
||||
|
||||
**Optional:** Lenis 1.3.23 for smooth scroll — recommended but not mandatory. Hum reads correctly without it; add when the brief calls for premium polish.
|
||||
|
||||
## Macrostructure affinity
|
||||
|
||||
**Hum loves these.**
|
||||
|
||||
- **Marquee Hero** — canonical: big "today's thing" card centred, big CTA below, character mark anchored to one side
|
||||
- **Bento Grid** — multi-accent tiles, one accent per tile; the bento is Hum's natural shape
|
||||
- **Workbench** — when the page has a live demo (small product preview surrounded by playful chrome)
|
||||
- **Stat-Led** — big rounded counters carry the story
|
||||
- **Catalogue** — a grid of items where each tile uses a different accent (color-shift gallery)
|
||||
- **Narrative Workflow** — a numbered process-timeline spine (`1.0 → 2.0 → 3.0 → 4.0`): each stage owns its own accent band, the big rounded stage numerals ride the counter signature, and a connecting rail makes the sequence the page's structure. Works well for a guided-sourdough-style build. Reach for it when the product is *genuinely sequential* — recipes, learn-a-skill, onboarding, multi-week programs, anything that happens in ordered steps over time. Don't force it on one-moment tools (those want Marquee or Stat-Led).
|
||||
|
||||
## Macrostructure rejection
|
||||
|
||||
**Hum refuses these.**
|
||||
|
||||
- **Long Document** — Hum is not a 2,000-word essay theme
|
||||
- **Manifesto** — too serious; Coral or Atelier handle subdued
|
||||
- **Quote-Led** — too literary
|
||||
- **Type Specimen** — typography is rounded sans only; specimens want range
|
||||
- **Photographic** — Hum is pure shape + colour; photography can appear in a tile but never as a section's spine
|
||||
|
||||
## Layout & emphasis discipline (non-negotiable)
|
||||
|
||||
Two bugs appeared in early Hum builds and must never ship again.
|
||||
|
||||
### Section alignment — one content shell, identical edges
|
||||
|
||||
Every section's content must align to the **exact same left and right edges**, whether or not the section sits on a tinted band. The early bug: banded sections (`.section--band`) put their gutter padding on the band while plain sections put `max-width + padding` on themselves, so band content was ~one-gutter wider than plain content and the edges didn't line up.
|
||||
|
||||
**The rule:** one shell width model everywhere. The band provides *only* the background + block padding; the inner content carries the gutter.
|
||||
|
||||
```css
|
||||
:root { --shell: var(--page-max); } /* one number, every section obeys it */
|
||||
|
||||
/* plain section: capped box, gutter inside (border-box) */
|
||||
.section { max-width: var(--shell); margin-inline: auto; padding: var(--section-gap) var(--page-gutter); }
|
||||
|
||||
/* banded section: full-bleed background, NO inline padding on the band itself */
|
||||
.section--band { max-width: none; padding-inline: 0; }
|
||||
.section--band > * { max-width: var(--shell); margin-inline: auto; padding-inline: var(--page-gutter); }
|
||||
```
|
||||
|
||||
With global `box-sizing: border-box`, plain-section content and band content are now both `--shell` minus two gutters, both centred — edges match to the pixel. **Verify it:** the hero headline's left edge, a plain section's heading, and a banded section's heading must all sit on the same vertical line. If they don't, this rule was broken.
|
||||
|
||||
### Emphasis highlight — must follow the text, never a floating bar
|
||||
|
||||
The highlighter behind an emphasised word (`<em>` / `.hl`) and behind big display numbers must be painted as a **clipped background gradient on the text itself**, not an absolutely-positioned `::after` bar. The early bug: the `::after` bar only underlined the last line when the phrase wrapped, and drifted out of place at some sizes.
|
||||
|
||||
**The rule:** use a `background-image` highlighter with `box-decoration-break: clone` so it tracks the text across line breaks and scales with font-size automatically.
|
||||
|
||||
```css
|
||||
em, .hl {
|
||||
color: inherit;
|
||||
background-image: linear-gradient(var(--hl, oklch(86% 0.18 95 / 0.55)) 0 0);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0.32em; /* band thickness, em-relative → scales with type */
|
||||
background-position: 0 82%; /* sits just under the baseline */
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone; /* underline every wrapped line, not just the last */
|
||||
padding-bottom: 0.02em;
|
||||
}
|
||||
/* per-accent: set --hl on the element (pear default; coral/cyan/lav/mint as needed). */
|
||||
```
|
||||
|
||||
This never breaks on wrap, never needs `white-space: nowrap`, and the band always sits correctly under the word. For a giant single-token display number (e.g. a Stat-Led hero count) the same technique applies — `background-size: 100% 0.14em; background-position: 0 88%` reads as a thick underline beneath the figure.
|
||||
|
||||
## Not-AI discipline — make every build read as a different studio (non-negotiable)
|
||||
|
||||
The fastest way Hum slides into AI-slop is **sameness**: many products sharing one skeleton below the hero. The *component* system (buttons, the highlight, tokens, the press metaphor) **should** be shared — that is a design system, and it's the right kind of consistency. The *page architecture* must **not** be shared. Two Hum builds have to read as two different studios' work, not two colour-swaps of one template.
|
||||
|
||||
**Study these real sites for how the register stays hand-made** (each cited for one specific move):
|
||||
- **PostHog** — the closest production analog to Hum: cream `#EEEFE9`, ink applied *at opacity* (90% body / 95% link / 100% hover) not as new hexes, **dashed-rule** section dividers, a mascot with a strict model sheet, and a self-aware "shameless plug" section. Steal the discipline wholesale.
|
||||
- **Brilliant** (Koto 2024) — shape-DNA shared between the wordmark and the spot illustrations. **Duolingo** — every character built from three primitives (rounded rect, circle, rounded triangle). **Family** — one springy, *scrubbable* number that's a toy. **Cosmos** — layered, captioned image *clusters*, never a tidy grid. **Daylight** — a warm palette deployed as a *system*, not a vibe. **Multiverse** — a split-screen hero instead of the centred stack. **Stripe** — restraint as craft (one gradient, narrow columns, layered soft shadows). **Linear** — hierarchy by scale-jump; the feature demonstrates itself.
|
||||
|
||||
### The deadliest tells — forbidden by default
|
||||
- **The centred hero stack** (eyebrow/badge → centred H1 → two-line subhead → filled + ghost CTA, dead-centre). The single biggest tell. Default to an *off-centre* hero; only centre when one element deliberately breaks the grid.
|
||||
- **A badge-pill directly above the H1** ("✨ now with…"). Never.
|
||||
- **The 3-identical-accent-cards row** (icon-tile on top → title → two grey lines, ×3, equal gap). Already banned in Anti-patterns — but it's the reflex unit, so it keeps reappearing. If you have three things to say, say them in a *different shape*: zig-zag text/art rows, one big + two small, a numbered list, a horizontal scroll-rail, a comparison table.
|
||||
- **Uniform radius + one shadow on everything.** Give each build its own card *physics* (see levers).
|
||||
- **An accent stripe on a card's top/left edge** — reads as AI almost as reliably as em-dashes.
|
||||
- **Emoji standing in for icons.** Hum draws its marks in CSS/SVG; an emoji in a chip or nav is a tell.
|
||||
- **An all-caps grey eyebrow over *every* section** — use it sparingly, not as wallpaper.
|
||||
- **A decorative gradient on the background AND the headline AND the button** (Hum bans accent-to-accent gradients anyway; never stack one three ways).
|
||||
|
||||
### Kill the shared tail (the highest-leverage rule)
|
||||
No two Hum builds may share the same **back half**. The failure mode is a bespoke hero bolted onto an identical *features → 3-up testimonials → 3-tier-pricing → statement-footer* run. Vary, per build:
|
||||
- **Pricing** — three tiers is *one* option. Also: a single honest price line; a free-vs-paid inline toggle; price folded into the product/catalogue surface; or no pricing at all (a "start" strip instead).
|
||||
- **Social proof** — quote-cards-×3 is *one* option. Also: a single big pull-quote; a marquee of names; an inline stat+quote; a screenshot of real usage. The byline grammar "Name · metric" on every card is itself a tell — vary it.
|
||||
- **Footer** — rotate the footer archetype. Don't ship the same giant-statement + `auto 1fr 1fr 1fr` meta grid every time. A compact single row, a marquee, or a footer that reuses the build's own artefact are all fair.
|
||||
|
||||
### Variety levers — pick a *different* combination each build (independent of palette)
|
||||
1. **Hero archetype** — rotate: off-centre artefact-bleed · split-screen (value centre, art flanks) · text-left/art-right · art-LEFT/text-right · full-bleed colour-block with an overlapping product card · art-above-headline. Never default to centred-stack.
|
||||
2. **The "one highlighted word in the headline"** is now in *every* existing build — it has become a tell. Use it in some; in others carry emphasis by scale, a drawn underline, or colour-blocking the whole line.
|
||||
3. **Feature-block format** — commit to ONE non-default shape per build (zig-zag · big+small · dense linked index · table · numbered narrative).
|
||||
4. **Density rhythm** — alternate airy sections with one deliberately dense "everything" section; don't hold `--section-gap` constant top-to-bottom.
|
||||
5. **Card physics** — choose a personality per build: hairline-flat no-shadow (quiet/editorial) · chunky 28px + the button's hard edge-shadow (kids/toy) · borderless tinted blocks · Stripe-soft single layer · layered contact+ambient. Not `20px + 1.5px rule + --shadow-card` every time.
|
||||
6. **Divider / seam** — dashed rules · full-bleed colour-block edges · whitespace only · a thin top accent rule. One language per build.
|
||||
7. **Colour deployment** — same palette, different distribution: cream-dominant with tiny accent *punctuation* (PostHog) · bold full-section colour-blocking (one accent owns a whole section) · one accent gradient used exactly once. Distribution changes the feel more than the hues.
|
||||
8. **Mascot dose & placement** — one character moment, but rotate where: hero-bleed · peeking from a card corner · an empty-state · the footer · a scroll-triggered cameo.
|
||||
9. **Motion register** — spring-bouncy overshoot · calm-eased · one signature scrubbable/draggable toy (Family). Pick one; don't fade-in everything.
|
||||
|
||||
### Two requirements every build must meet
|
||||
- **One off-grid / asymmetric moment** — a card that breaks the gutter, an oversized numeral bleeding off-edge, a 2/3–1/3 split, a tilted element. The page must not be one centred column of equal blocks. (Bubble's numbered rail is the current best example.)
|
||||
- **One "designed exception"** — a single deliberate rule-break that says a human made this: a self-aware copy aside (PostHog's deadpan), an interactive toy (Family's scrub), a hand-drawn annotation over a clean shot, one tilted off-grid card, a full-bleed photo/colour break. Rotate which kind across builds.
|
||||
|
||||
### Micro-craft that reads hand-made
|
||||
- **Modify ink with opacity, not new hexes** — body ~88–90% of `--color-ink`, links 95%, hover 100%. Fewer literal colours, used consistently.
|
||||
- **Layer shadows** (a tight contact shadow + a soft ambient one), varied by elevation — never one `--shadow-card` on everything.
|
||||
- **Tight tracking on display, sentence case, ≤3 type levels.** Big heads get negative letter-spacing; body stays neutral.
|
||||
- **Voice:** max one em-dash per paragraph (the em-dash pile-up is the clearest "AI wrote this" tic — prefer periods). Honest metrics only; never decorative big-number theatre.
|
||||
|
||||
## Voice fixtures
|
||||
|
||||
Hum voice is **warm, smart, casual, direct**. Sentence case is allowed (unlike Lumen's full lowercase). Verbs over nouns. Confident but not knowing. Never condescending.
|
||||
|
||||
Headlines:
|
||||
|
||||
- "Your daily 30-second curio."
|
||||
- "Get really good at one thing this quarter."
|
||||
- "Notice yourself, in 30 seconds."
|
||||
- "Learn something genuinely new today."
|
||||
- "A small daily thing, kept for a long time."
|
||||
|
||||
Body patterns:
|
||||
|
||||
- "One small interesting thing, every morning at 8 a.m."
|
||||
- "Free for the first seven days. $5 a month after that, or $45 a year."
|
||||
- "Made by three people in Lisbon and Amsterdam. We're answering email."
|
||||
|
||||
Mono labels — UPPERCASE, used for ordinals, stats, and tags:
|
||||
|
||||
- `01 · TODAY`
|
||||
- `02 · YOUR STREAK`
|
||||
- `STREAK · 47 DAYS`
|
||||
- `LEARNED · 312 THINGS`
|
||||
|
||||
**Never any of:** revolutionize, supercharge, unlock, leverage, unleash, transform, journey, holistic, mindful, ecosystem, platform, AI-powered, intelligent. The "feels alive" must come from *motion and colour*, not from breathless copy.
|
||||
|
||||
## Anti-patterns (theme-specific)
|
||||
|
||||
- **NEVER serif anywhere.** Display, body, captions — all rounded sans. If a serif is needed, the brief belongs in Lumen or one of the editorial themes.
|
||||
- **NEVER pure white paper.** Cream `oklch(97% 0.012 95)` is the only acceptable ground. Pure white drains all the warmth out of the theme.
|
||||
- **NEVER pure black ink.** `oklch(20% 0.012 250)` minimum lightness. Pure black on cream is harsh and breaks the warmth.
|
||||
- **NEVER square corners on cards / pills / buttons.** Hum is the rounded theme. Cards = 20px, pills = 999px, inputs = 12px.
|
||||
- **NEVER single-accent palette.** Hum is multi-accent. If a build wants one restrained accent only, it should route to Coral (single-accent modern-minimal) instead.
|
||||
- **NEVER gradients between accents.** Pear-to-cyan or cyan-to-coral gradients are banned. Each accent owns its own surface.
|
||||
- **NEVER over-rotate animations.** One signature character pulse + one CTA wobble per page. Bouncy easings on everything is exhausting; reserve spring for primary actions.
|
||||
- **NEVER `font-style: italic` for the verb landmark.** Hum is not Lumen — verbs aren't italicised here. Emphasis comes from weight (500) or accent color, not italics.
|
||||
- **NEVER invented metrics.** Streak counts must be honest (the user's actual data). Marketing stats must be real.
|
||||
- **NEVER pure-rainbow gradient backgrounds.** Multi-accent ≠ Y2K rainbow. Each accent has its own surface; they sit next to each other in defined regions.
|
||||
- **NEVER three-feature-card row with stock-icon tops.** Use abstract shape characters per card, not generic Lucide icons.
|
||||
- **NEVER bento with > 8 tiles.** Hum's bento is small and warm, not maximalist.
|
||||
|
||||
## How Hum differs from neighbouring themes
|
||||
|
||||
| vs | difference |
|
||||
|---|---|
|
||||
| **Coral** (modern-minimal, the closest sibling) | Coral is warm-grey paper with a single restrained coral accent — Stripe-not-Linear register, motion optional. Hum uses coral only as its pop accent, on yellower cream with two other accents and mandatory motion. Coral is the friendly-but-quiet register (a quiet bakery card); Hum is exuberant and alive (a brilliant.org-style learning app). When a brief wants one restrained accent, route to Coral; when it wants multi-accent and a character moment, route to Hum. |
|
||||
| **Bloom** (atmospheric) | Bloom is dark/cream with warm radial blooms behind the content (Suno register). Hum is fully light, no blooms, mandatory hover-and-paint motion. Different genres entirely. |
|
||||
| **Specimen** (editorial) | Specimen is italic-serif on warm oat with classical typography. Hum is rounded sans on cream with vibrant character. Opposite registers. |
|
||||
|
||||
## Test brief expectations
|
||||
|
||||
Hum should be a candidate when the brief mentions:
|
||||
|
||||
- *daily, habit, streak, practice, learning, curiosity, mood, energy, friendship, community, kids, family, game, puzzle, creative, indie tool, character, mascot, fun, playful, alive*
|
||||
- product categories: *learning platforms, habit trackers, daily-thing apps, friendship apps, creative tools (with character), kids' / family software, mood / energy / wellness apps, indie creative SaaS*
|
||||
- emotional tone: *warm, alive, smart-but-warm, energetic, considered but joyful, post-Brilliant*
|
||||
|
||||
Briefs that say *enterprise, infrastructure, B2B, API, inference, agent, dashboard, manifesto, gallery, monograph* never route to Hum.
|
||||
|
||||
## Build hint
|
||||
|
||||
The first 24 lines of CSS should establish Hum's anchor moves:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: var(--color-paper); color: var(--color-ink);
|
||||
font-family: var(--font-body);
|
||||
font-feature-settings: "ss01" on, "cv11" on;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.eyebrow, .mono-label {
|
||||
font-family: var(--font-label); font-size: 11px; letter-spacing: 0.10em;
|
||||
text-transform: uppercase; color: var(--color-ink-2); opacity: 0.75;
|
||||
}
|
||||
|
||||
.btn { /* push — a solid colour EDGE + a soft ground shadow. Never a negative spread, never scale(). */
|
||||
background: var(--color-accent); color: var(--color-ink); font-weight: 600;
|
||||
padding: 0.8rem 1.4rem; border: 0; border-radius: var(--radius-pill); cursor: pointer;
|
||||
box-shadow: 0 4px 0 0 var(--color-accent-deep), 0 6px 12px -3px oklch(76% 0.20 95 / 0.45);
|
||||
transition: transform 140ms cubic-bezier(0.2,0.7,0.3,1), box-shadow 140ms cubic-bezier(0.2,0.7,0.3,1);
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--color-accent-deep), 0 12px 22px -4px oklch(76% 0.20 95 / 0.45); }
|
||||
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--color-accent-deep); } /* the press is the feedback */
|
||||
|
||||
/* cards MAY keep the spring lift (the retirement was buttons only); vary the physics per build */
|
||||
.card {
|
||||
background: var(--color-paper); border-radius: var(--radius-card);
|
||||
box-shadow: 0 12px 32px -16px oklch(20% 0.012 250 / 0.12);
|
||||
transition: transform 220ms var(--ease-spring), box-shadow 220ms;
|
||||
}
|
||||
.card:hover { transform: translateY(-4px); }
|
||||
```
|
||||
|
||||
Those lines carry 50% of the theme. The rest is the character moment + the multi-accent section bands + the motion stack.
|
||||
|
||||
## What Hum refuses (restated)
|
||||
|
||||
Disqualifiers — if any appears in a Hum build, it is not Hum:
|
||||
|
||||
- No serif anywhere.
|
||||
- No pure white paper.
|
||||
- No pure black ink.
|
||||
- No square corners.
|
||||
- No single-accent palette.
|
||||
- No gradients between accents.
|
||||
- No more than one CTA wobble per page.
|
||||
- No more than one character moment per page.
|
||||
- No `font-style: italic` for emphasis.
|
||||
- No invented metrics.
|
||||
- No rainbow gradient backgrounds.
|
||||
- No generic stock-icon feature rows.
|
||||
- No bento with > 8 tiles.
|
||||
- No system-font fallback for the display.
|
||||
- No motion-less interactive elements (every interactive element has SOME state response).
|
||||
478
.codex/skills/hallmark/references/themes/lumen.md
Normal file
478
.codex/skills/hallmark/references/themes/lumen.md
Normal file
@@ -0,0 +1,478 @@
|
||||
# Theme — Lumen
|
||||
|
||||
Premium AI-tool register, built around a **hand-engineered apparatus** rather than a glowing orb. One precision SVG/CSS object per page, with leader-line callouts in mono micro-type, set against dead space alongside a **lowercase classical-serif headline** and a technical mono eyebrow. Three font families. Two palette drops (Night Foundry / Day Foundry) with different physics — Night emits, Day refracts — and entirely different visual languages, not the same shape in two colours.
|
||||
|
||||
Lumen runs a strict **two-register typography system**: all prose is **lowercase** (hero titles, section titles, lede, body, buttons, nav, brand, footer copy — even acronyms when they appear in body text); all mono labels are **UPPERCASE** (eyebrows, callouts, meter labels, stat labels). The contrast between quiet lowercase prose and loud UPPERCASE machine-readout is the typographic signature.
|
||||
|
||||
Loaded eagerly by SKILL.md Step 3 whenever the catalog pick is `lumen`. Palettes + font stack live in [`site/css/tokens.css`](../../../../site/css/tokens.css) under `[data-theme="lumen"]` (Night, default) and `[data-theme="lumen"][data-drop="day"]` (Day). This file carries the drops + apparatus family + signature moves + motion + anti-patterns.
|
||||
|
||||
## Axes (diversification)
|
||||
|
||||
- **Paper band** — Night: dark cool-violet (`L 13%, H 265`). Day: light cool bone with violet pull (`L 97%, H 265`). The 265° hue is deliberate — sits 25° from Midnight's 250 and 65° from Aurora's 200, so a Lumen page is not confusable with either neighbour at a glance.
|
||||
- **Display style** — **classical-serif-lowercase** (Instrument Serif 400, upright, **all-lowercase**, with verb landmark via accent colour + draw-in underline). No italic anywhere. Distinct from italic-serif (Specimen/Studio/Atelier ship italic as default) and from roman-serif (Newsprint uses sentence case). Lumen is the catalog's only lowercase-headline theme.
|
||||
- **Accent hue** — Night: **molten brass** (`H 50`, not amber). Day: **deep indigo with violet tilt** (`H 268`). Coral chord (`H 18`) sits behind both as the secondary chromatic.
|
||||
|
||||
## Reference register
|
||||
|
||||
Modal · Anthropic (Claude product surfaces) · Together AI · ElevenLabs · Cluely · Adept · Granola · Cohere · Inflection · Linear (premium pricing pages) · Vercel (design guidelines, frontier-AI sections) · Cursor (high-fidelity product mockup heroes).
|
||||
|
||||
The aesthetic to match: a single hand-engineered artefact in dead space; a lowercase classical-serif headline with one accent-coloured verb; mono UPPERCASE technical labels that read as if pulled from an internal docs site; tabular numerals everywhere a number appears. The combination is what AI-tool defaults do not ship — and exactly the combination that breaks every default the model was trained on.
|
||||
|
||||
**Patron-saint reference (internal):** *Modal homepage rate sheet* (the receipt is the artwork) + *Together AI hero diagram* (annotated apparatus + leader lines + labelled callouts) + *Anthropic Claude landing typography* (transitional serif + humanist sans). When in doubt about restraint, ask "would Modal ship this much chrome?" If yes, you've gone too far.
|
||||
|
||||
## Palette drops
|
||||
|
||||
A Lumen drop is a named palette + apparatus-physics pair. The structural signature (italic-pivot headline + mono eyebrow + apparatus + leader callouts + meter strip + blueprint grid + hairline cards + three-stat row) is constant; the drop rotates the canvas, the accent, and what the apparatus *does*.
|
||||
|
||||
### Drop 01 · Night Foundry *(default · canonical)*
|
||||
|
||||
Cool-violet near-black canvas. Molten-brass accent that *emits*. The apparatus is an instrument — a filament-in-chamber, a circuit topology, a precision indicator — and it generates the light. Halos and inner-emit washes use `--color-glow` at 42% opacity.
|
||||
|
||||
- `--color-paper: oklch(13% 0.014 265)` — late-night studio, violet tilt
|
||||
- `--color-ink: oklch(96% 0.006 262)` — near-white headlines
|
||||
- `--color-accent: oklch(76% 0.17 50)` — molten brass
|
||||
- `--color-accent-2: oklch(68% 0.16 18)` — coral chord
|
||||
- `--color-glow: oklch(80% 0.16 50 / 0.42)` — dense halo
|
||||
- `--color-paper-emit: oklch(76% 0.17 50 / 0.04)` — inner-emit canvas wash
|
||||
- `--rule-blueprint: oklch(96% 0.006 262 / 0.04)` — grid hairline
|
||||
|
||||
**Apparatus physics — emission.** The focal element is a built object (filament, circuit, indicator dial, layered lens stack) that *contains* the light source. Subtle pulse animation (`--dur-pulse: 4s`) suggests the instrument is *running*. Card shadows are soft depth (`0 24px 60px -28px oklch(0% 0 0 / 0.55)`), not glows — the apparatus is the only thing that emits.
|
||||
|
||||
**When to pick:** inference platforms · serverless GPU · model APIs · AI coding agents · voice synthesis · agentic tools · developer infra · anything that wants to feel "after hours" and "instrument-grade." Default.
|
||||
|
||||
### Drop 02 · Day Foundry
|
||||
|
||||
Cool-bone canvas with a violet pull. Deep indigo accent that *refracts*. The apparatus is a transparent prism / lens stack / chromatic dispersion element — light passes through and is *separated*, not generated. Spectrum exit-fan + measurement annotations + scale bar give it the feel of a calibrated optical instrument, not a vibey gradient.
|
||||
|
||||
- `--color-paper: oklch(97% 0.008 265)` — cool bone, violet pull
|
||||
- `--color-ink: oklch(18% 0.014 265)` — near-black, cool
|
||||
- `--color-accent: oklch(46% 0.24 268)` — deep violet-indigo
|
||||
- `--color-accent-2: oklch(68% 0.16 18)` — coral chord (red end of spectrum)
|
||||
- `--color-glow: oklch(58% 0.22 268 / 0.28)` — indigo halo through prism
|
||||
- `--color-paper-emit: oklch(46% 0.24 268 / 0.03)` — canvas wash, faint
|
||||
|
||||
**Apparatus physics — refraction.** The focal element is *static at rest* with a 320ms reveal on first paint (the prism appears, the spectrum fans, both settle). No perpetual motion. The light is captured, not generated. Annotations carry mono micro-labels: `λ = 612 nm`, `θ_out = 38°`, etc. — the prism reads as a *measurement instrument*, not decoration.
|
||||
|
||||
**When to pick:** AI for science · climate / research labs · document AI · typography / design tools · daytime productivity · briefs that want "considered" and "clear" rather than "after-dark and intense."
|
||||
|
||||
### Drop rotation rule
|
||||
|
||||
The diversification log records `"theme": "lumen", "drop": "night"` (or `"day"`). Two consecutive Lumen builds must use different drops unless the brief contains a strong drop signal.
|
||||
|
||||
### Why two drops, not five
|
||||
|
||||
Lumen's identity is the apparatus, not the palette. Adding more drops would dilute what makes the theme legible. Two drops with *different physics* (emission vs refraction) carry more variety than five drops with the same artefact in different colours.
|
||||
|
||||
## The apparatus family
|
||||
|
||||
Lumen's central commitment: **never a generic glowing orb**. The orb is the most overworked AI-tool tell of 2024–2025; every inference platform ships one. Lumen builds a *specific* hand-engineered object per page, chosen to reflect what the product *does*.
|
||||
|
||||
The canonical family (pick one per build, in the order of preference for the brief):
|
||||
|
||||
### Apparatus type · Filament chamber *(Night Foundry, instrument-grade)*
|
||||
|
||||
A vertical glowing rod inside a rounded-rect cylindrical chamber, crossed by 3–4 horizontal hairline "electrodes." Subtle pulse on the filament (3% intensity oscillation, 4s period). References vacuum tubes, Tesla coils, fusion experiments, mass spectrometers. Reads as a *machine*.
|
||||
|
||||
**When to pick:** inference, runtime, model serving, anything that *produces* output. Brand verbs: think, run, generate, infer, render, execute.
|
||||
|
||||
**SVG/CSS skeleton:**
|
||||
|
||||
```html
|
||||
<figure class="apparatus apparatus--filament" aria-hidden="true">
|
||||
<div class="chamber">
|
||||
<span class="chamber__wall"></span>
|
||||
<span class="chamber__electrode" style="--y: 22%"></span>
|
||||
<span class="chamber__electrode" style="--y: 42%"></span>
|
||||
<span class="chamber__electrode" style="--y: 62%"></span>
|
||||
<span class="chamber__electrode" style="--y: 82%"></span>
|
||||
<span class="chamber__filament"></span>
|
||||
<span class="chamber__glow"></span>
|
||||
<span class="chamber__stencil">RX-04</span>
|
||||
</div>
|
||||
<ul class="callouts">
|
||||
<li class="callout" style="--side: left; --y: 18%"><span>P50 · 28 ms</span></li>
|
||||
<li class="callout" style="--side: right; --y: 36%"><span>cold-start · 0.4 s</span></li>
|
||||
<li class="callout" style="--side: left; --y: 62%"><span>rps · 12 k</span></li>
|
||||
<li class="callout" style="--side: right; --y: 80%"><span>RX-04 · h100 80gb</span></li>
|
||||
</ul>
|
||||
</figure>
|
||||
```
|
||||
|
||||
```css
|
||||
.chamber {
|
||||
position: relative; width: clamp(180px, 22vw, 280px); aspect-ratio: 0.55;
|
||||
border: 1px solid var(--color-rule-2);
|
||||
border-radius: 999px;
|
||||
background: oklch(17% 0.016 265 / 0.8);
|
||||
overflow: hidden;
|
||||
}
|
||||
.chamber__filament {
|
||||
position: absolute; top: 8%; bottom: 8%; left: 50%;
|
||||
width: 2px; margin-left: -1px;
|
||||
background: linear-gradient(to bottom,
|
||||
oklch(96% 0.05 50) 0%,
|
||||
oklch(80% 0.17 50) 50%,
|
||||
oklch(96% 0.05 50) 100%);
|
||||
box-shadow:
|
||||
0 0 16px 4px var(--color-glow),
|
||||
0 0 48px 12px oklch(80% 0.16 50 / 0.22);
|
||||
animation: filament-pulse var(--dur-pulse) ease-in-out infinite;
|
||||
}
|
||||
.chamber__electrode {
|
||||
position: absolute; left: 0; right: 0; top: var(--y);
|
||||
height: 1px; background: var(--color-rule-2);
|
||||
}
|
||||
.chamber__glow {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--color-glow-2) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes filament-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.86; }
|
||||
}
|
||||
.callout {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: var(--tracking-micro);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-muted);
|
||||
position: absolute;
|
||||
/* leader-line drawn as ::before pseudo */
|
||||
}
|
||||
.callout::before {
|
||||
content: ""; position: absolute;
|
||||
top: 50%; height: 1px;
|
||||
background: var(--color-rule-2);
|
||||
}
|
||||
```
|
||||
|
||||
### Apparatus type · Codebase graph / topology *(Night Foundry)*
|
||||
|
||||
An annotated SVG graph: one central node + 5–7 satellite nodes connected by hairlines, each satellite labelled with a mono filename or symbol. Light "flows" along the connecting lines at a slow walk (subtle gradient dot moving along each path). References CAD schematics, dependency graphs, electrical circuits, knowledge graphs.
|
||||
|
||||
**When to pick:** AI coding agents, knowledge tools, anything that *traverses* a structured space. Brand verbs: read, trace, explore, connect.
|
||||
|
||||
### Apparatus type · Indicator dial / spectrum *(either drop)*
|
||||
|
||||
A circular dial (Night) or a horizontal spectrum bar with annotated wavelength labels (Day). Includes scale ticks at known increments, a moving needle or active band, and mono callouts at boundaries. References analogue gauges, oscilloscopes, audio meters.
|
||||
|
||||
**When to pick:** voice synthesis, audio AI, anything measuring a continuous quantity. Brand verbs: tune, measure, listen.
|
||||
|
||||
### Apparatus type · Prism + measurement *(Day Foundry canonical)*
|
||||
|
||||
A clip-path triangle (the prism) + an incoming beam from the left + a chromatic spectrum fan emerging from the right edge + leader-line annotations with wavelength labels and exit-angle measurements. References optical-bench experiments, atmospheric refraction diagrams, the cover of Pink Floyd's *Dark Side of the Moon* re-read as a calibrated instrument.
|
||||
|
||||
**When to pick:** Day Foundry default. AI for science, climate, research, document AI.
|
||||
|
||||
### Building rules across the family
|
||||
|
||||
- **Pure CSS + SVG.** Never `<img>`, never icon fonts, never SVG paths copied from Figma. The apparatus is *constructed*, not *placed*.
|
||||
- **One per page.** Never two apparatus objects on a single Lumen build.
|
||||
- **Leader-line callouts.** Every apparatus carries 3–5 mono micro-type annotations (`P50 · 28 ms`, `λ = 612 nm`, `→ refunds.ts`) on horizontal leader lines. The callouts MUST contain real values from the brief — never `LOREM · 000`.
|
||||
- **Size.** 240–480 px max dimension on desktop. Scales down to ~180 px on mobile but never disappears.
|
||||
- **Pulse, not rotation.** Night apparatus *pulses* (3% intensity oscillation, 4s period). It does *not* rotate. Rotation was the orb's signature; the apparatus's signature is that it's clearly machined.
|
||||
- **Day Foundry: no perpetual motion.** Day apparatus reveals once on first paint (320ms) and stays static. The light is captured.
|
||||
- **`prefers-reduced-motion: reduce`:** all pulses freeze at maximum intensity, all reveals collapse to final state.
|
||||
|
||||
## The seven signature moves
|
||||
|
||||
A Lumen build must exhibit **all seven**. Skipping any single one is what makes the page slip back into generic-dark-AI territory.
|
||||
|
||||
### 1. Hand-built apparatus (no orb)
|
||||
|
||||
See § The apparatus family above. The single most important move.
|
||||
|
||||
### 2. Lowercase headline with verb-landmark (no italics)
|
||||
|
||||
Classical Instrument Serif at `--text-display`, **all-lowercase, upright**, with **exactly one word** rendered in `--color-accent-2` (coral chord) — and that word is the verb. A 1px underline in the same accent draws in over 320ms on first paint and stays. **No `font-style: italic` is used anywhere** in Lumen — the verb landmark is built from colour + line, not from a glyph variation.
|
||||
|
||||
```html
|
||||
<h1 class="hero__title">built to <em>think</em> in real time.</h1>
|
||||
```
|
||||
|
||||
```css
|
||||
.hero__title {
|
||||
text-transform: lowercase; /* defensive — also applied at the prose level */
|
||||
}
|
||||
.hero__title em {
|
||||
font-style: normal; /* explicit — em is repurposed as the verb landmark */
|
||||
color: var(--color-accent-2);
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hero__title em::after {
|
||||
content: ""; position: absolute;
|
||||
left: 0.05em; right: 0.05em; bottom: 0.04em;
|
||||
height: 1px;
|
||||
background: var(--color-accent-2);
|
||||
transform-origin: left;
|
||||
animation: pivot-underline 320ms var(--ease-soft) 900ms backwards;
|
||||
}
|
||||
@keyframes pivot-underline {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero__title em::after { animation: none; }
|
||||
}
|
||||
```
|
||||
|
||||
**Rules:** the coloured word is the verb, never a noun. One word per headline, never two. The underline is the persistent landmark — once drawn, never animates again. `<em>` is repurposed semantically (still emphasis), but renders without italic.
|
||||
|
||||
### 3. Mono eyebrow above every section
|
||||
|
||||
`01 · INFERENCE` style — JetBrains Mono, uppercase, 11px, tracking `0.10em`, half-opacity. Numbered roman ordinal (01, 02, 03), middle-dot separator, then the section role. Sits directly above the heading on its own line. Cap at 6 per page.
|
||||
|
||||
### 4. Blueprint grid background (4% opacity)
|
||||
|
||||
The hero `<section>` and the meter strip both carry a **ruled grid background** at 4% opacity — 32px or 48px square cells, single hairline in `--rule-blueprint`. This is the "engineered, not vibed" signal. Aurora has blooms; Lumen has the grid. The grid sits beneath `--color-paper-emit` so the canvas appears to emit *through* the grid lines.
|
||||
|
||||
```css
|
||||
.hero {
|
||||
background:
|
||||
linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
radial-gradient(60% 50% at 78% 30%, var(--color-paper-emit) 0%, transparent 65%),
|
||||
var(--color-paper);
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Meter strip (below the hero)
|
||||
|
||||
A full-bleed 32–48px band beneath the hero showing 60–80 thin vertical ticks (1px wide, varying height/opacity). Mono labels at each end name the readout (`SIGNAL · 12.4 KHZ` left, `DRIFT · 0.04 σ` right). Reads as spectrum analyser / oscilloscope output. The values match the brief — never invented.
|
||||
|
||||
```html
|
||||
<aside class="meter" aria-label="Signal readout">
|
||||
<p class="meter__label meter__label--left">SIGNAL · 12.4 KHZ</p>
|
||||
<div class="meter__bars">
|
||||
<!-- 64 spans, height + opacity per index -->
|
||||
</div>
|
||||
<p class="meter__label meter__label--right">DRIFT · 0.04 σ</p>
|
||||
</aside>
|
||||
```
|
||||
|
||||
```css
|
||||
.meter {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
padding: 0.75rem var(--page-gutter);
|
||||
border-block: 1px solid var(--color-rule);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.meter__bars { display: flex; gap: 2px; align-items: end; height: 28px; }
|
||||
.meter__bars > span {
|
||||
flex: 1; min-width: 1px;
|
||||
background: var(--color-accent);
|
||||
border-radius: 0.5px;
|
||||
}
|
||||
```
|
||||
|
||||
The meter MUST be procedurally varied — never a flat row of equal ticks. Heights drawn from a clean envelope (sine, gaussian, log) so the strip reads as a *measurement*, not a decorative pattern.
|
||||
|
||||
### 6. Hairline cards with inner emission
|
||||
|
||||
Cards carry a 1px hairline border in `--color-rule` and an inner radial gradient at 4–6% accent opacity — they feel **lit from within**, not dropped. On hover, inner glow brightens to 10–12% and the card lifts 4px. Never drop-shadow cards (the shadow Lumen uses is for elevated chrome only).
|
||||
|
||||
### 7. Three-stat row with Instrument Serif numerals + tabular-nums
|
||||
|
||||
Stats display in Instrument Serif at large size (`clamp(2.5rem, 4vw + 1rem, 4.5rem)`), `font-variant-numeric: tabular-nums`, label in mono uppercase 11px. Hairline vertical dividers. **Always three cells** — never two (reads as comparison), never four (reads as bento). If the brief has fewer than three honest numbers, skip the row entirely.
|
||||
|
||||
## Motion direction
|
||||
|
||||
Lumen's motion stack is **lighter than Hum, heavier than Coral**.
|
||||
|
||||
| Element | Motion |
|
||||
|---|---|
|
||||
| Apparatus (Night) | Pulse: 3% intensity oscillation, 4s period. **Never rotates.** |
|
||||
| Apparatus (Day) | 320ms reveal on first paint, static thereafter. |
|
||||
| Verb landmark | Color set permanently to accent-2; 1px underline draws in 320ms `delay: 900ms`. No font-style change. |
|
||||
| Cards | `translateY(-4px)` + inner-glow brighten on hover, 220ms `--ease-soft`. |
|
||||
| Section heads | Opacity 0→1 + translateY 12px→0 on view enter, 600ms, 60ms stagger. |
|
||||
| Meter strip | Static. No "live" animation — the strip is a printed readout, not a streaming feed. |
|
||||
| Scroll | Lenis optional (`duration: 0.7, lerp: 0.08`). |
|
||||
|
||||
**No magnetic cursors. No bento tile flips. No flashy parallax. No particle systems. No rotating orbs.** If you reach for any of these, you've drifted out of Lumen.
|
||||
|
||||
`prefers-reduced-motion: reduce` collapses all animations to instant final state.
|
||||
|
||||
## Required dependencies
|
||||
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
```
|
||||
|
||||
Three families, three weights each at most. No fourth family.
|
||||
|
||||
## Macrostructure affinity
|
||||
|
||||
**Lumen loves these.**
|
||||
|
||||
- **Marquee Hero** — canonical: apparatus at hero-right, italic-pivot headline at hero-left, meter strip below
|
||||
- **Workbench** — when the page has live product UI to show (used with annotated codebase graph)
|
||||
- **Stat-Led** — numbers carry the story (latency, throughput)
|
||||
- **Long Document** — technical narrative with the apparatus at hero (Day Foundry canonical)
|
||||
- **Specimen** — only when typography is the subject
|
||||
|
||||
## Macrostructure rejection
|
||||
|
||||
**Lumen refuses these.**
|
||||
|
||||
- **Bento Grid** — too playful; Lumen is one apparatus, not a tile collage
|
||||
- **Quote-Led** — too literary
|
||||
- **Conversational FAQ** — too soft
|
||||
- **Photographic** — Lumen is pure-code; no photographic anchor
|
||||
- **Catalogue** — one apparatus, not a grid of products
|
||||
|
||||
## Voice fixtures
|
||||
|
||||
Lumen voice is **direct, technical, slightly aphoristic**. Verbs over nouns. Mono labels read as if from internal docs. No marketing-ese.
|
||||
|
||||
Headlines — **all lowercase**, with one verb in accent-2 colour (underlined):
|
||||
|
||||
- "built to **think** in real time."
|
||||
- "inference, **rendered**."
|
||||
- "a new way to **ship** models."
|
||||
- "built for the people who **read** the docs."
|
||||
- "models for a **moving** atmosphere."
|
||||
- "code that **knows** the codebase."
|
||||
|
||||
Body patterns — also lowercase, including acronyms:
|
||||
|
||||
- "p50 latency at 28 ms. p99 at 84. the numbers hold under load."
|
||||
- "one primitive. scales down to zero. scales up to a thousand replicas."
|
||||
- "three engineers built this in fourteen weeks."
|
||||
|
||||
Mono eyebrows — UPPERCASE (these are tags, not language):
|
||||
|
||||
- `00 · INFERENCE`
|
||||
- `01 · RUNTIME`
|
||||
- `02 · PRICING`
|
||||
- `03 · CHANGELOG`
|
||||
|
||||
Leader-line callouts (real values only) — UPPERCASE:
|
||||
|
||||
- `P50 · 28 MS`
|
||||
- `Λ = 612 NM`
|
||||
- `θ_OUT = 38°`
|
||||
- `RX-04 · H100 80GB`
|
||||
- `INDEXED · 412 FILES`
|
||||
|
||||
Brand wordmarks — lowercase: `cinder`, `wright`, `stratum`. Legal entity names and person names in fine print also lowercase (`cinder labs, inc.`, `maya okonkwo`). The lowercase commitment is total — only mono labels break it.
|
||||
|
||||
**Never any of:** experience, journey, elevate, curate, transform, holistic, mindful, ecosystem, platform, leverage, unlock, supercharge, revolutionize, ai-powered, intelligent.
|
||||
|
||||
## Anti-patterns (theme-specific)
|
||||
|
||||
- **NEVER a glowing CSS orb / sphere / ring.** The single most reliable AI-tool tell of 2024–2025. Lumen explicitly refuses it. Pick from the apparatus family or build a new precision object — never a generic ball of light.
|
||||
- **NEVER `<img>` for the apparatus.** Pure CSS + SVG. Figma-exported SVG paths fail this — the apparatus is constructed in code.
|
||||
- **NEVER sentence-case or title-case prose.** All headlines, lede, body, buttons, nav, captions, brand wordmarks, footer copy, person names, place names, and legal-entity names are lowercase. Mono labels are the ONLY uppercase surface (eyebrows, callouts, meter labels, stat labels). This two-register split is non-negotiable.
|
||||
- **NEVER `font-style: italic` anywhere.** The previous italic-pivot signature is retired. The verb landmark is built from colour + a 1px underline, not from a glyph variation. Italic body emphasis, italic founder signatures, italic captions — all banned. `<em>` is repurposed as the verb landmark and renders upright.
|
||||
- **Never colour-emphasise a noun.** The verb landmark is the verb. Always.
|
||||
- **Never more than one accent-coloured word per headline.** Two is a marketing landing page; one is a design move.
|
||||
- **Never invent stats.** If the brief has no real numbers, skip the three-stat row entirely.
|
||||
- **Never re-draw browser chrome.** Real screenshots only (slop-test gate 47).
|
||||
- **Never two apparatus objects on one page.** One per build.
|
||||
- **Never a system font for the display.** Instrument Serif or the documented fallback chain (`"Tiempos Headline", ui-serif, Georgia, serif`).
|
||||
- **Never rotate the apparatus.** Night apparatus pulses; Day apparatus is static.
|
||||
- **Never accent on display text outside the verb landmark.** Headlines are ink colour with one accent-coloured verb.
|
||||
- **Never emoji icons in eyebrows.** The mono ordinal + middle-dot + role label IS the eyebrow.
|
||||
- **Never two-cell stat rows.** Three only.
|
||||
- **Never atmospheric blooms larger than the apparatus.** The grid is the background discipline.
|
||||
- **Never blank leader-callouts.** Every annotation carries a real value from the brief.
|
||||
|
||||
## Macrostructure pitfalls
|
||||
|
||||
1. **Apparatus + embedded chrome on the same side → both fight for the focal point.** Pick one per side. Default: apparatus at hero-right, chrome (if any) in a later section.
|
||||
2. **Italic-pivot word at a line break → the verb hangs alone.** Force ` ` before and after so it stays mid-line.
|
||||
3. **Stats with two cells → reads as comparison.** Three only.
|
||||
4. **Apparatus glow bleeds into next section → page background looks washed.** Wrap in `overflow: clip` so the halo stays inside the hero.
|
||||
5. **Meter strip with uniform ticks → reads as decorative pattern.** Drive heights from a real envelope (sine, gaussian, log) so the strip looks measured.
|
||||
6. **Card inner-radial > 8% accent opacity → cards read as accent-tinted, not lit.** Cap at 6% rest / 12% hover.
|
||||
|
||||
## How Lumen differs from neighbouring themes
|
||||
|
||||
| vs | difference |
|
||||
|---|---|
|
||||
| **Midnight** (atmospheric, closest) | Midnight is geometric Geist on cool dark (`H 250`), no apparatus, no italic pivot, no grid. Lumen sits 25° hue away (`H 265`) with classical Instrument Serif, hand-built apparatus + leader callouts, blueprint grid, meter strip. The differentiation is large at every signature axis. |
|
||||
| **Aurora** (atmospheric) | Aurora is cool cyan blooms on dark, Sentient serif body. Lumen is brass-on-violet apparatus + Instrument Serif headline. Different temperature, different focal-element philosophy (Aurora: ambient blooms; Lumen: built apparatus). |
|
||||
| **Bloom** (atmospheric) | Bloom is warm cream paper, expressive content (Suno/Runway). Lumen is dark or cool-bone, technical content (Modal/Anthropic). Different register entirely. |
|
||||
| **Atelier** (editorial) | Atelier is Playfair Display Didone on warm cream — luxury fashion. Lumen's Instrument Serif is a 1960s technical-journal serif. Atelier sells perfume; Lumen sells inference. |
|
||||
|
||||
## Test brief expectations
|
||||
|
||||
Lumen should be a candidate when the brief mentions:
|
||||
|
||||
- *inference · model · LLM · AI tool · agent · coding agent · voice · synthesis · API · platform · GPU · serverless · runtime · developer experience · DX · the docs · the console · pricing · research lab · atmospheric model · weather · climate*
|
||||
- product categories: *AI infrastructure · ML platform · model API · AI dev tool · voice / audio AI · research AI · climate / science AI · agentic coding*
|
||||
- emotional tone: *engineered · premium · technical · instrument · after-hours · considered · post-Modal*
|
||||
|
||||
Briefs that say *bakery / café / atelier / fashion / podcast / record label / hot sauce / agency portfolio* never route to Lumen.
|
||||
|
||||
## Build hint
|
||||
|
||||
The first 22 lines of CSS should establish Lumen's anchor moves:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: var(--color-paper); color: var(--color-ink-2);
|
||||
font-family: var(--font-body);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-transform: lowercase; /* prose default — the two-register foundation */
|
||||
}
|
||||
|
||||
.eyebrow, .callout, .meter__label, .stat__label, .card__eyebrow {
|
||||
font-family: var(--font-label); font-size: 11px; letter-spacing: 0.10em;
|
||||
text-transform: uppercase; /* mono labels are the only uppercase surface */
|
||||
color: var(--color-ink); opacity: 0.55;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-family: var(--font-display); font-weight: 400;
|
||||
font-size: var(--text-display); line-height: 1.02;
|
||||
letter-spacing: -0.032em; max-width: 16ch;
|
||||
}
|
||||
.hero__title em {
|
||||
font-style: normal; /* italic is RETIRED in Lumen */
|
||||
color: var(--color-accent-2);
|
||||
position: relative; white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background:
|
||||
linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
radial-gradient(60% 50% at 78% 30%, var(--color-paper-emit) 0%, transparent 65%),
|
||||
var(--color-paper);
|
||||
}
|
||||
```
|
||||
|
||||
The `text-transform: lowercase` on `<body>` + selective `text-transform: uppercase` on label classes is the typographic foundation. Write your HTML in normal case for accessibility (screen readers); let CSS render the lowercase. Mono labels override back to UPPERCASE.
|
||||
|
||||
## What Lumen refuses (restated)
|
||||
|
||||
Disqualifiers — if any appears in a Lumen build, the build is not Lumen:
|
||||
|
||||
- No glowing orb / sphere / ring of any kind.
|
||||
- No `font-style: italic` anywhere on the page.
|
||||
- No sentence-case or title-case prose — headlines, lede, body, buttons, nav, brand are all lowercase.
|
||||
- No lowercase mono labels — eyebrows, callouts, meter labels are all UPPERCASE.
|
||||
- No bento grids.
|
||||
- No glassmorphism / `backdrop-filter` blur.
|
||||
- No "trusted by" logo cloud as a full-width band.
|
||||
- No three-feature-card row with icon tops.
|
||||
- No emoji icons in eyebrows.
|
||||
- No invented metrics.
|
||||
- No re-drawn browser chrome.
|
||||
- No more than one apparatus per page.
|
||||
- No more than one accent-coloured word per headline.
|
||||
- No system-font fallback for the display.
|
||||
- No rotating apparatus (pulse only on Night; static on Day).
|
||||
- No accent-coloured display text outside the verb landmark.
|
||||
- No two-cell stat rows.
|
||||
- No atmospheric blooms larger than the apparatus.
|
||||
- No blank leader-line callouts.
|
||||
Reference in New Issue
Block a user