--- version: 1 name: Twilight Lavender Mobile colors: primary: "#B794F4" on-primary: "#1A1A2E" accent: "#FFCB6B" surface: "#1A1A2E" surface-alt: "#25253A" surface-muted: "#2D2D44" on-surface: "#E2E2E8" on-surface-variant: "#9E9EB3" border: "#2D2D44" border-hairline: "rgba(255,255,255,0.05)" border-hairline-strong: "rgba(255,255,255,0.10)" chart-1: "#F6AD55" chart-2: "#B794F4" chart-3: "#63B3ED" chart-4: "#F687B3" chart-5: "#68D391" destructive: "#7F1D1D" illus-lavender: "#B794F4" illus-butter: "#FFCB6B" illus-coral: "#F687B3" illus-forest: "#68D391" illus-sky: "#63B3ED" illus-amber: "#F6AD55" typography: display-md: fontFamily: DM Sans fontSize: 30px fontWeight: 500 lineHeight: 36px letterSpacing: -0.02em headline-lg: fontFamily: DM Sans fontSize: 24px fontWeight: 500 lineHeight: 30px letterSpacing: -0.01em headline-md: fontFamily: DM Sans fontSize: 20px fontWeight: 500 lineHeight: 26px letterSpacing: -0.01em headline-sm: fontFamily: DM Sans fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: -0.005em body-md: fontFamily: Plus Jakarta Sans fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0em body-sm: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0em label-md: fontFamily: Plus Jakarta Sans fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0em label-sm: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: 0em label-uppercase: fontFamily: Plus Jakarta Sans fontSize: 10px fontWeight: 700 lineHeight: 14px letterSpacing: 0.18em caption: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0em rounded: sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 28px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px gutter: 24px card-padding: 16px card-padding-lg: 20px section-gap: 24px icons: set: solar default_variant: linear active_variant: bold stroke_weight: 1.5px default_size: 24px components: card: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.lg}" padding: "{spacing.card-padding}" boxShadow: none card-feature: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.3xl}" padding: 0 boxShadow: "0 1px 2px rgba(0,0,0,0.20)" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 20px paddingY: 8px border: none boxShadow: none button-secondary: backgroundColor: "rgba(59,59,88,0.5)" textColor: "{colors.on-surface}" typography: "{typography.label-md}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.full}" paddingX: 20px paddingY: 8px boxShadow: none button-text: backgroundColor: "transparent" textColor: "{colors.on-surface}" typography: "{typography.label-md}" border: none boxShadow: none paddingX: 0 paddingY: 0 button-icon-circle: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" size: 40px iconSize: 16px border: none boxShadow: "0 4px 12px rgba(183,148,244,0.20)" button-icon-circle-muted: backgroundColor: "rgba(59,59,88,0.5)" textColor: "{colors.on-surface-variant}" rounded: "{rounded.full}" size: 40px iconSize: 16px border: none boxShadow: none input-text: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.xl}" paddingX: 16px paddingY: 16px focusRingColor: "rgba(183,148,244,0.20)" boxShadow: none chip: backgroundColor: "rgba(59,59,88,0.5)" textColor: "{colors.on-surface}" typography: "{typography.label-md}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.full}" paddingX: 20px paddingY: 8px boxShadow: none chip-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 20px paddingY: 8px border: none boxShadow: none badge-pill: backgroundColor: "rgba(59,59,88,0.30)" textColor: "{colors.chart-1}" typography: "{typography.label-sm}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.full}" paddingX: 12px paddingY: 6px boxShadow: none badge-glass: backgroundColor: "rgba(0,0,0,0.40)" textColor: "#FFFFFF" typography: "{typography.label-uppercase}" rounded: "{rounded.sm}" paddingX: 8px paddingY: 4px border: none boxShadow: none avatar: rounded: "{rounded.full}" borderColor: "{colors.border-hairline-strong}" borderWidth: 1px size: 48px boxShadow: none list-row: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.lg}" padding: 16px gap: 16px boxShadow: none progress-bar: backgroundColor: "{colors.surface-muted}" rounded: "{rounded.full}" height: 6px border: none boxShadow: none category-tile: backgroundColor: "rgba(59,59,88,0.30)" textColor: "{colors.on-surface}" borderColor: "{colors.border-hairline}" borderWidth: 1px rounded: "{rounded.xl}" padding: 16px boxShadow: none top-app-bar: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.headline-lg}" paddingX: 24px paddingY: 24px border: none boxShadow: none tab-bar-floating: backgroundColor: "rgba(37,37,58,0.80)" borderColor: "{colors.border-hairline-strong}" borderWidth: 1px rounded: "{rounded.full}" paddingX: 24px paddingY: 8px boxShadow: "0 25px 50px -12px rgba(0,0,0,0.40)" tab-item-active: textColor: "{colors.primary}" iconSize: 30px background: none tab-item-inactive: textColor: "{colors.on-surface-variant}" iconSize: 30px background: none --- # Twilight Lavender Mobile ## Overview **Calm, contemplative, low-light.** A deep midnight surface (`{colors.surface}` `#1A1A2E`) is the anchoring mood: the screen feels like a quiet room after dark, lit by a single lavender lamp. A saturated lavender (`{colors.primary}` `#B794F4`) and a warm butter-yellow (`{colors.accent}` `#FFCB6B`) carry every accent — the lavender for selection and primary action, the amber for streaks, energy, and warmth notes. The aesthetic is **composed and unhurried**: spacious vertical rhythm, hairline white borders at 5–10% alpha that whisper rather than divide, and a clear typographic two-track system — DM Sans (medium-weight, slightly tightened) for headlines, Plus Jakarta Sans for body and labels. Nothing shouts. Even the brightest accent (lavender on dark) reads as glowing rather than loud, because everything sits on a near-black canvas. The signature chrome move is a **floating pill nav** — a translucent capsule docked above the bottom edge with backdrop blur and a soft drop shadow, separate from the page surface. Cards are tonal lifts (slightly lighter than the background) rather than shadow-elevated. Imagery is a soft, painterly companion — moody mid-distance landscapes, abstract wave fields — never photographic-bright, never illustrative-cartoon. ## Colors The palette has three boundaries that must not blur: **Chrome layer** (`{colors.surface}`, `{colors.surface-alt}`, `{colors.surface-muted}`, `{colors.on-surface}`, `{colors.on-surface-variant}`): the page background is the deepest tone (`#1A1A2E`); cards lift one step (`#25253A`); the muted layer (`#2D2D44`) is reserved for inert tracks (progress backgrounds, divider rules) and input fills when needed. Foreground text is `#E2E2E8` for full-attention copy and `#9E9EB3` for metadata. **Brand & accent** (`{colors.primary}`, `{colors.accent}`): lavender is the single primary action color — active chip, primary CTA, active tab, focus ring at 20% alpha. Butter yellow (`#FFCB6B`) is reserved for warmth/highlight moments (streak indicators, secondary kicker labels on featured content). Never use both at full saturation in the same card; they are alternates, not partners. **Categorical chart palette** (`{colors.chart-1}` through `{colors.chart-5}`): orange `#F6AD55`, lavender `#B794F4`, sky `#63B3ED`, pink `#F687B3`, mint `#68D391`. Use ONLY for differentiating peer items — categorical icon tiles, parallel progress fills, taxonomy. They appear inside soft 20%-alpha backgrounds (e.g. `bg-chart-1/20 text-chart-1` on a small icon square). Never as page-level chrome. **Borders** are functionally invisible: a 1px `rgba(255,255,255,0.05)` hairline on cards and inputs (`{colors.border-hairline}`), upgraded to `rgba(255,255,255,0.10)` on the floating tab bar (`{colors.border-hairline-strong}`). They define the edge of a surface without contrasting with it. **Illustration palette** (`illus-*`): the painterly imagery uses muted, dusk-leaning tones — lavender, butter, coral, forest, sky, amber. These tokens are for the artwork inside image frames, not for UI fills. UI never borrows the soft pastel range; imagery never borrows the saturated lavender at full strength. ## Typography Two families, deliberate split: **DM Sans** (`{typography.display-*}`, `{typography.headline-*}`) — geometric sans, weight **500 medium** as the default heading weight. Headlines are slightly tightened (`-0.01em` to `-0.02em`) to feel poised rather than bold. We never use 700+ for headings; the dark surface already provides plenty of contrast and bold weights would feel aggressive against the calm mood. **Plus Jakarta Sans** (`{typography.body-*}`, `{typography.label-*}`, `{typography.caption}`) — humanist sans for everything below heading level. Body uses **500 medium** at 14px (notably heavier than typical body to hold up against the dark surface and small size); captions drop to 400 at 12px in `{colors.on-surface-variant}` for whispering metadata. **Role assignments:** - `{typography.display-md}` — primary screen title only when the screen needs a hero (e.g. greeting + name). - `{typography.headline-lg}` (24px) — top-of-screen page title in the app bar. - `{typography.headline-md}` (20px) — section anchors ("[Section name]" above scrollers and lists). - `{typography.headline-sm}` (18px) — featured card titles. - `{typography.body-md}` — paragraph and list-row primary lines. - `{typography.body-sm}` / `{typography.caption}` — metadata, "Session 3 of 8 · [Subtitle]", duration captions in `{colors.on-surface-variant}`. - `{typography.label-md}` — chip and button labels. - `{typography.label-uppercase}` — tracked-out tiny kickers ("[N] DAYS", "[CATEGORY]") in `{colors.primary}` or `{colors.accent}` over featured cards. The wide letter-spacing (0.18em) is load-bearing here. **Weight rule of thumb**: 500 is the workhorse for both heading and body. 700 only appears on micro-labels (`label-uppercase`, streak count). Never use 600 — it muddies the two-tier weight system. ## Spacing & Layout **Generous, breathing.** Screen gutter is `{spacing.gutter}` (24px) — a noticeable inset from the edge that lets the dark canvas frame content. Section-to-section vertical gap is `{spacing.section-gap}` (24px); within a section, the section title sits 16px (`{spacing.md}`) above its content. Cards have `{spacing.card-padding}` (16px) internal padding for compact list-row cards, and `{spacing.card-padding-lg}` (20px) for hero/feature cards with imagery. Horizontal scroll rails (chip rows, course carousels) use `gap-3` (12px) or `gap-4` (16px) depending on whether children are tags or imagery cards. The bottom of the page is reserved for the floating nav: pages need `pb-24` minimum so nothing scrolls under the docked pill. ## Elevation & Depth **Tonal, not shadowed.** The hierarchy is built by stacking translucent or slightly-lighter surfaces over the dark page: - Page surface: `#1A1A2E` - Card (resting): `#25253A` — one step lighter - Muted track / inert fill: `#2D2D44` - Translucent overlay (chip-secondary, badge-glass): `bg-secondary/30` or `bg-secondary/50` — surface-alt at 30–50% alpha Drop shadows appear in only **two** places: 1. The floating tab bar — a heavy soft shadow (`shadow-2xl shadow-black/40`) so it feels detached from the page. 2. The primary action button when icon-circle (small `shadow-primary/20`) — a faint lavender glow that hints at warmth. Cards do NOT carry shadows. They lift via tonal contrast and the 1px hairline border at 5% white alpha. ## Shapes A generous, rounded family — no square corners anywhere except brief glass badges: - `{rounded.sm}` (8px) — small inline glass badges over imagery (e.g. session-count chip overlaid on a thumbnail). - `{rounded.md}` (12px) — small thumbnail avatars inside list rows (the 64px image squares). - `{rounded.lg}` (16px) — default card radius, list-row cards, progress bars at full pill. - `{rounded.xl}` (20px) — text inputs, category tiles, image frames inside Programs scrollers. - `{rounded.2xl}` (24px) — large list-row cards on the music tracklist. - `{rounded.3xl}` (28px) — featured course cards (the most prominent imagery containers). - `{rounded.full}` — every chip, every button, every nav element, every avatar, every circular icon-button. Pills are the dominant shape. Rule of thumb: anything interactive is either fully pilled (`rounded-full`) or generously rounded (`rounded-2xl`+). Sharp corners feel out of place. ## Components ### card ```html

[Card title]

[Card metadata]

``` ### card-feature (with full-bleed image) ```html
[Kicker label]

[Feature title]

[Short description.]

``` The kicker color alternates between `text-primary` (lavender) and `text-accent` (butter) across a row of features to create rhythm. ### button-primary ```html ``` ### button-secondary ```html ``` ### button-icon-circle (primary play / forward) ```html ``` For inert / locked variants, swap to `bg-secondary/50 text-muted-foreground` and drop the shadow. ### input-text ```html
``` The leading icon switches from `muted-foreground` to `primary` on focus — small detail that makes inputs feel alive. ### chip / chip-active ```html ``` Chip rows scroll horizontally with `gap-3`, and the active chip is always the lavender pill. ### badge-pill (streak / status) ```html
[Status text]
``` ### badge-glass (overlay on imagery) ```html
[META LABEL]
``` ### avatar ```html ``` ### list-row (with thumbnail + progress) ```html

[Item title]

[Subtitle / progress note]

``` For locked/inactive rows, wrap in `opacity-80` and overlay the thumbnail with `bg-black/40` + a centered lock icon. ### progress-bar ```html
``` The fill color rotates through the chart palette to differentiate parallel items in a list. Use the same chart color consistently for a single item across screens. ### category-tile (in-scroller mini-card with icon + label) ```html
[Category]
``` The icon color cycles through `text-primary`, `text-chart-1`, `text-chart-3`, `text-chart-5` etc. across a row to give each category its own hue. ### top-app-bar ```html

[Page title]

``` When the bar carries an avatar + greeting, the layout is a flex row: avatar on the left, eyebrow `label-uppercase` ("GOOD EVENING" pattern) above name in `{typography.headline-lg}`, and a status badge on the right. ### tab-bar-floating ```html ``` This is the signature chrome move. The floating pill is detached from the page edges (24px inset on all sides), translucent (80% surface-alt), backdrop-blurred, hairline-bordered at 10% white, and shadowed. The active tab is the lavender bold-variant icon; inactive tabs use the linear variant in `{colors.on-surface-variant}`. ### tab-item-active / tab-item-inactive Active = `text-primary` + bold-variant icon. Inactive = `text-muted-foreground` + linear-variant icon. No pill backplate, no underline — the variant swap and color carry the entire active state. ### Tonal recipes (compositional, NOT new components) - **Locked / disabled list row**: wrap the standard `list-row` in `opacity-80`, overlay its thumbnail with `bg-black/40` + a centered `solar:lock-bold` icon, and swap the trailing button to the muted variant (`bg-secondary/50 text-muted-foreground`, no shadow). - **Categorical icon tile**: a 48px square in `bg-{chart-N}/20 text-{chart-N} rounded-xl` flex-centered around the icon. Used as the thumbnail for sound/category list rows. - **Promo card** (subtle CTA card embedded in a section): `bg-primary/10 border border-primary/20 rounded-3xl p-6` with a primary-colored heading and a primary-fill icon-circle button on the right. - **"View all" link**: a `{typography.label-md}` text link in `{colors.on-surface}` (or `{colors.primary}` when emphasized) — no underline, no chevron, no chrome. ### Composition recipe — section header A section opens with a flex row: section title in `{typography.headline-md}` on the left, optional "[View all]" `button-text` in `{typography.label-md}` on the right, with `{spacing.md}` vertical gap to the content below. Section-to-section spacing is `{spacing.section-gap}`. ## Iconography **Set: `solar`.** Solar's two variants — `linear` (1.5px stroke) and `bold` (filled) — drive the entire active/inactive convention. - **Default state**: `solar:[icon-name]-linear` in `{colors.on-surface-variant}` (or `on-surface` for higher-attention positions). - **Active state**: `solar:[icon-name]-bold` in `{colors.primary}` (or the relevant chart color for categorical icons). - **Featured / emphatic state**: `solar:[icon-name]-bold` in `{colors.accent}` or `{colors.chart-1}` (for warmth/streak/energy contexts). Default icon size is 24px (`size-6`), nav icons step up to 30–32px (`size-8`), trailing list-row action icons are 16px (`size-4`) inside a 40px circle. Icons are sized with Tailwind classes (`size-6`, `size-8`, `size-4`) — never with HTML `width`/`height` attributes — to stay consistent with the rest of the snippet system. ## Illustration & Imagery The aesthetic uses imagery as a soft, painterly companion to the dark UI — never bright, never photographic-realistic, never illustrative-cartoony. Two image archetypes appear: **moody mid-distance landscape paintings** (foggy forests, sunset silhouettes, dim windows lit from outside) and **abstract layered wave fields** (smooth pastel curves stacked horizontally, suggesting horizons or gentle motion). - **Style / Technique**: soft digital painting with airbrushed edges and atmospheric perspective for landscape imagery; flat layered vector with smooth gradient transitions between bands for abstract wave imagery. Both share a hand-painted-yet-digital feel — visible softness, no hard outlines, no harsh detail. - **Palette**: each illustration uses 2–4 colors max, drawn from `{colors.illus-lavender}`, `{colors.illus-butter}`, `{colors.illus-coral}`, `{colors.illus-forest}`, `{colors.illus-sky}`, `{colors.illus-amber}`. Within a single image, colors are dusk-saturation — desaturated enough to feel hushed but warm/cool enough to carry mood. Forest scenes lean monochromatic green-teal; sunset scenes lean coral + butter + lavender; abstract waves often pair lavender + butter or stack monochrome blue-teal. - **Edge treatment**: NO outlines anywhere. All shape boundaries are soft paint edges or smooth color-band transitions. - **Shading & light**: atmospheric, single ambient source (a glowing low sun, a hidden window light) — never directional cel-shading. Wave imagery is flat-tonal with no shading; landscape imagery has soft fog gradients. - **Composition & framing**: subject sits centered or distributed across the frame with significant breathing room; horizons and sun discs sit slightly above center. Abstract wave imagery fills the frame edge-to-edge. There is always negative space — never cluttered. - **Background within the illustration**: the painted scene IS the background (sky, fog, water) — no transparent cutouts. - **Container styling**: images sit inside `{rounded.2xl}` (course feature cards, 24px) or `{rounded.xl}` (program tiles, 20px) frames with `border border-white/5` (1px hairline at 5% white). Padding inside the container around the image is **0** — images bleed full-width to the card's rounded corners. Container background where image doesn't reach: `{colors.surface-alt}`. - **CSS treatment on ``**: always `object-cover`, full width, fixed aspect (h-40 for course cards, aspect-[4/5] for program tiles, size-16 for list-row thumbnails). No `mix-blend-mode`, no opacity reduction, no filter. The image renders at full intensity inside its frame. - **Box-shadow on the image or its frame**: none — image sits flat on the card surface. The card itself may carry the optional `shadow-sm` for featured variants, but the image inside has no separate shadow. - **Aspect ratio rule**: course feature cards are 280×160 (≈7:4 landscape); program tiles are 4:5 portrait; tracklist thumbnails are 1:1 square; greeting avatars are 1:1 circular. Crop to fit; preserve subject centering. - **Anti-references**: NOT photographic with bright daylight, NOT 3D rendered, NOT claymation, NOT line-art, NOT children's-book cartoon, NOT pixel art, NOT high-contrast or sharp-edged, NOT overly saturated. - **Style recipe prompt**: *A soft digital painting of [SUBJECT], rendered with airbrushed atmospheric edges and no outlines. Dusk-saturation palette of 2–4 muted colors drawn from lavender, butter yellow, coral, forest green, soft teal, and amber. Single ambient light source — a low glowing sun or diffuse fog light — with smooth gradient transitions between color bands. Hushed, contemplative, twilight mood. Composition centered with generous negative space. NOT photographic, NOT 3D, NOT cartoon, NOT high-contrast, NOT sharp-edged.* For abstract / non-figurative needs (e.g. category banners, mood backdrops), use the wave variant: *Smooth flat-vector layered wave bands stacked horizontally, in a 2-color dusk palette (e.g. lavender + butter, or stacked monochrome teal). No outlines, soft gradient between bands, gentle organic curves. Calm, meditative, abstract.* ## Hierarchy & Emphasis What gets weight, in order: 1. **Saturated lavender fill** (chip-active, button-primary, active tab icon) — reserved for the single most-important interactive element on screen. 2. **DM Sans 500 at 24–30px** — primary screen titles command top-of-screen attention. 3. **Imagery** — feature card images carry weight through scale and color, but always inside a contained frame. 4. **Tonal lift to `surface-alt`** — anything in a card stands out from the page just enough to read as "a unit". 5. **`{colors.on-surface-variant}` muted text** — metadata, captions, and inert subtitles always whisper. Active states win attention by **switching from line to bold icon variant + flipping color to lavender**, never by adding chrome (no underlines, no backplate pills behind tab icons). ## Distinctive Details 1. **The floating tab pill.** The single most recognizable chrome move: a translucent backdrop-blurred capsule docked 24px above the bottom edge with a heavy soft shadow. It feels like it's floating over the content rather than anchored to the screen frame. Active state is variant-switch only — bold icon + lavender — no pill behind the icon. 2. **Hairline white-alpha borders.** Every card, input, chip, and surface carries a 1px border at `rgba(255,255,255,0.05)`. Individually invisible; collectively they give every surface a crisp outer edge against the dark canvas without any visual weight. The floating nav steps up to 10% to feel slightly more architectural. 3. **Tracked-out micro-kickers in alternating accent colors.** Featured cards open with a tiny `label-uppercase` (10px, weight 700, 0.18em letter-spacing) — alternating between `text-primary` lavender and `text-accent` butter across a row to give the carousel rhythm. The wide tracking is load-bearing; without it the kicker collapses into ordinary metadata. ## Do's and Don'ts ### Do - Use lavender (`{colors.primary}`) as the single primary action color, sparingly. - Reach for `{colors.accent}` butter yellow for warmth/streak/highlight moments only. - Build hierarchy with tonal lifts (`surface` → `surface-alt` → translucent overlays), not shadows. - Use the chart palette ONLY for categorical differentiation (parallel progress bars, peer category icons). - Render active icons as the **bold** variant in lavender; inactive as **linear** in `on-surface-variant`. - Round generously: chips, buttons, nav, avatars are always `rounded-full`. - Frame imagery in `rounded-xl`+ with a 5%-white hairline and zero padding inside the frame. - Float the tab bar 24px above the bottom edge with backdrop blur, hairline, and `shadow-2xl shadow-black/40`. - Keep headings at DM Sans **500** medium — never bolder. ### Don't - Don't put shadows on cards. Tonal lift only. - Don't use lavender and butter at full saturation in the same component. - Don't bring chart colors into UI chrome (page surface, default text, button fills). - Don't use heading weights of 600 or 700 — it breaks the calm tone. - Don't outline illustrations or render them with hard cartoon edges. - Don't insert bright daylight photography. Imagery must read as dusk / fog / dim light. - Don't add pill backplates behind active tab icons — variant swap + color is the entire treatment. - Don't use `{rounded.sm}` (8px) or sharper anywhere except small inline glass badges over imagery. - Don't size icons with HTML `width`/`height` attributes — always Tailwind `size-*` classes. - Don't let cards sit flush to the screen edge — respect the 24px gutter. - Don't borrow saturated UI lavender into the illustration palette, or soft pastel illustration colors into UI fills.