Chapter 7
Colour and shape
The site's colours are always one of four seasonal presets, applied through a data-season attribute on <html>. A season also changes the shape of the UI. The swatches below come from shared/seasons.ts, which a test keeps in step with the CSS in app/assets/css/tailwind.css.
How the tokens work
Tokens are defined directly in the CSS; app.config.ts is intentionally empty and there is no @nuxt/ui. A Tailwind v4 @theme block maps --color-primary-*, secondary, success, warning, error and neutral onto CSS variables defined under :root (light) and .dark.
- The base palette is also spring (
sakura): deep rose primary and sage secondary in light, teal and orchid in dark.sakurahas no palette block under[data-season];autumnoverrides all five colour families, andsummerandwinteronly primary and secondary. - Dark mode is a
.darkclass on<html>, toggled byUColorModeButton(persisted ascolor-theme) and applied before hydration by an inline script. - Text on colour. A solid
*-500fill usestext-on-primaryand its kin (the--on-*tokens, chosen per season and mode against that scope's real*-500), never a hard-codedtext-white. There is no--on-warning: warning only ever backs text as a translucent tint.
Seasonal palettes
🌸 Spring (sakura) sakura · Mar–May
- primary
- Deep Rose#D2385A
- secondary
- Sage Leaf#7E957A
- success
- Herbal Green#559E4E
- warning
- Sunset Gold#D88B27
- error
- Vermilion#E03E3E
- primary
- Luminous Teal#16B385
- secondary
- Evening Orchid#A957A9
- success
- Emerald#10B981
- warning
- Yellow#EAB308
- error
- Rose#F43F5E
🎐 Summer (natsu) summer · Jun–Aug
- primary
- Asagi Sea-Teal#1A7F95
- secondary
- Asagao Violet#7A5CC0
- success
- Herbal Green#559E4E
- warning
- Sunset Gold#D88B27
- error
- Vermilion#E03E3E
- primary
- Lagoon Aqua#1FA9BF
- secondary
- Twilight Asagao#9A7EE0
- success
- Emerald#10B981
- warning
- Yellow#EAB308
- error
- Rose#F43F5E
🍁 Autumn (koyo) autumn · Sep–Nov
- primary
- Momiji#D26B38
- secondary
- Icho Gold#D1911F
- success
- Matcha#6DA446
- warning
- Kabocha#CC751E
- error
- Kurenai#D02539
- primary
- Ember#B35516
- secondary
- Burnished Ginkgo#A8781F
- success
- Forest Moss#48A630
- warning
- Ember Amber#E89417
- error
- Garnet#C62F48
❄️ Winter (fuyu) winter · Dec–Feb
- primary
- Ai Indigo#34568F
- secondary
- Fuji-nezumi#938FBA
- success
- Herbal Green#559E4E
- warning
- Sunset Gold#D88B27
- error
- Vermilion#E03E3E
- primary
- Moonlit Ice#5B8FD6
- secondary
- Silver Wisteria#A39FC9
- success
- Emerald#10B981
- warning
- Yellow#EAB308
- error
- Rose#F43F5E
Shared canvas
neutral (with stone and gray aliased to it) is the one family that is the same in every season: page backgrounds, body text, gridlines and borders.
Shape language
A season also changes the silhouette of the UI. Cards, panels, buttons and badges take their outline from --shape-* and --corner-* tokens (CSS corner-shape), and the card motif, divider, bullet and page backdrop come from --motif-* tokens.
- Spring: petal cards with one scooped corner, pill buttons.
- Summer: squircle pebble panels, droplet buttons.
- Autumn: bevel-cut leaf cards, pointed tags.
- Winter: frosted octagons, hexagonal buttons and badges.
Browsers without corner-shape fall back to rounded corners. Plain boxes opt in with .season-box and .season-chip, and SeasonalEffects.vue adds the ambient layer: petals, bubbles by day and fireflies by night, leaves, or snow. This book's pages keep that shape language for their notes, tables of swatches and code, and add the paper, running head and folio on top.
The kana chart adds education charms: 学業守 omamori (OmamoriCharm.vue) and ema plaques (EmaPlaque.vue), coloured through --charm-* and --ema-*, with motion off under prefers-reduced-motion. How a season is chosen is in Seasons.