mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Reskin GregKilmer.com in the Patiun brand
- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold; violet/indigo only as nebula light. Starlight content sections, night-sky nav and heroes (.on-sky scope re-points accent/gold to on-dark values). - Type: Cinzel for headings, names and card titles; Montserrat for body, UI and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks. - Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development · a Patiun LLC company"; glyph also marks the footer and store nav. - Teal filled buttons with Midnight text; gold eyebrows; small links use a darker teal so they pass WCAG AA on Starlight. - Favicons, app icons and web manifest from the GregKilmer.com brand package. - docs/THEMING.md updated for the new palette and fonts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
+23
-10
@@ -6,16 +6,27 @@ How color, light/dark mode, section tone, and animation work on this site.
|
||||
|
||||
## Palette
|
||||
|
||||
From the spec, exposed as CSS variables in `src/styles/themes.css` and mapped to
|
||||
Tailwind utilities in `src/styles/global.css`:
|
||||
The site uses the Patiun LLC brand palette (shared by Patiun and Greg Kilmer),
|
||||
exposed as CSS variables in `src/styles/global.css` under `@theme`:
|
||||
|
||||
| Token | Value | Meaning |
|
||||
|---|---|---|
|
||||
| `--color-slate` | `#1E293B` | Professional confidence (primary) |
|
||||
| `--color-amber` | `#F59E0B` | Warm accent (the making/creative side) |
|
||||
| `--color-teal` | `#699a94` | Soft teal (secondary, favorite) |
|
||||
| `--color-ink` | `#0F172A` | Near-black text on light |
|
||||
| `--color-cream` | `#FFFBEB` | Cream-white text on dark |
|
||||
| `--color-teal` | `#14A39A` | Patiun Teal, primary: buttons, fills, the glyph |
|
||||
| `--color-teal-bright` | `#2BC2B7` | Teal text and links on dark grounds |
|
||||
| `--color-teal-deep` | `#0F8C84` | Teal marks on light grounds |
|
||||
| `--color-slate-teal` | `#2D4A58` | Dark end of the Tide gradient |
|
||||
| `--color-gold` | `#C9A24A` | Alchemist Gold: stars, rules, seal lines (never a large fill) |
|
||||
| `--color-gold-bright` | `#D8B35A` | Gold text on dark grounds |
|
||||
| `--color-gold-deep` | `#8A6516` | Gold text under 24px on Starlight |
|
||||
| `--color-violet` / `--color-indigo` | `#6A2FE0` / `#3B1F8F` | Nebula light only, never text |
|
||||
| `--color-midnight` | `#131C2B` | Panels, tiles, browser theme color |
|
||||
| `--color-sky` | `#0E1522` | Night-sky ground |
|
||||
| `--color-starlight` | `#F4F2ED` | Text on dark; paper ground |
|
||||
|
||||
The semantic Tailwind tokens (`--color-accent`, `--color-surface`, ...) resolve
|
||||
at `:root`, so content sections render with the Starlight values in
|
||||
`themes.css`. Night-sky bands (the nav and page heroes) carry the `.on-sky`
|
||||
class, which re-points accent and gold to their on-dark values.
|
||||
|
||||
Brand colors are fixed. **Semantic** tokens (`--surface`, `--text`, `--accent`,
|
||||
`--secondary`, `--border`, ...) resolve differently per theme + section, and are
|
||||
@@ -118,9 +129,11 @@ reduce)')` before drawing, so even JS-driven motion is skipped.
|
||||
|
||||
Self-hosted variable fonts via Fontsource (woff2, no external requests):
|
||||
|
||||
- **Headings / UI:** Plus Jakarta Sans Variable (geometric sans)
|
||||
- **Body:** Inter Variable
|
||||
- **Mono / kickers / quotes:** JetBrains Mono Variable
|
||||
- **Headings, names, card titles:** Cinzel Variable (`font-display`, used by
|
||||
`h1`-`h4` automatically). Open tracking, never for paragraphs.
|
||||
- **Body and UI:** Montserrat Variable (`font-sans`, `font-body`).
|
||||
- **Eyebrows / kickers:** Montserrat uppercase with wide tracking (`font-eyebrow`).
|
||||
- **Code-like blocks only:** JetBrains Mono Variable (`font-mono`).
|
||||
|
||||
Font sizes use `clamp()` for fluid scaling (see the `h1`-`h4` rules in
|
||||
`global.css`).
|
||||
|
||||
Reference in New Issue
Block a user