npm - get-shit-pretty - Versions diffs - 0.2.0 → 0.4.0 - Mend

get-shit-pretty 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/LICENSE +21 -0
package/README.md +15 -9
package/agents/{gsp-accessibility-auditor.md → gsp-auditor.md} +17 -14
package/agents/gsp-brand-auditor.md +97 -0
package/agents/gsp-brand-strategist.md +64 -27
package/agents/{gsp-design-engineer.md → gsp-builder.md} +12 -9
package/agents/gsp-campaign-director.md +50 -11
package/agents/gsp-codebase-scanner.md +171 -0
package/agents/gsp-critic.md +18 -13
package/agents/gsp-designer.md +126 -0
package/agents/gsp-identity-designer.md +90 -0
package/agents/gsp-project-researcher.md +102 -0
package/agents/gsp-researcher.md +54 -18
package/agents/gsp-reviewer.md +66 -0
package/agents/gsp-scoper.md +103 -0
package/agents/gsp-system-architect.md +91 -26
package/agents/gsp-verbal-strategist.md +84 -0
package/bin/install.js +161 -5
package/commands/gsp/brand-audit.md +116 -0
package/commands/gsp/brand-discover.md +17 -0
package/commands/gsp/brand-identity.md +200 -0
package/commands/gsp/brand-patterns.md +223 -0
package/commands/gsp/brand-research.md +99 -0
package/commands/gsp/brand-strategy.md +140 -0
package/commands/gsp/brand-system.md +17 -0
package/commands/gsp/brand-verbal.md +94 -0
package/commands/gsp/brand.md +9 -83
package/commands/gsp/brief.md +142 -0
package/commands/gsp/build.md +49 -41
package/commands/gsp/critique.md +140 -0
package/commands/gsp/design.md +65 -50
package/commands/gsp/discover.md +17 -0
package/commands/gsp/doctor.md +319 -0
package/commands/gsp/help.md +85 -38
package/commands/gsp/identity.md +18 -0
package/commands/gsp/launch.md +55 -35
package/commands/gsp/new-project.md +5 -86
package/commands/gsp/new.md +237 -0
package/commands/gsp/plan.md +18 -0
package/commands/gsp/progress.md +58 -26
package/commands/gsp/research.md +91 -34
package/commands/gsp/review.md +115 -59
package/commands/gsp/strategy.md +18 -0
package/commands/gsp/system.md +8 -65
package/commands/gsp/update.md +102 -0
package/commands/gsp/verbal.md +18 -0
package/package.json +2 -2
package/prompts/01-design-system-architect.md +35 -3
package/prompts/03-ui-ux-pattern-master.md +11 -1
package/prompts/09-design-to-code-translator.md +9 -0
package/prompts/10-project-scoper.md +51 -0
package/prompts/11-deliverable-reviewer.md +58 -0
package/prompts/12-project-researcher.md +57 -0
package/references/brand-archetypes.md +151 -0
package/references/brand-prism.md +138 -0
package/references/chunk-format.md +48 -0
package/references/design-trends.md +47 -0
package/references/positioning-frameworks.md +197 -0
package/references/questioning.md +1 -1
package/references/trends/aurora-gradients.md +245 -0
package/references/trends/bento-grid.md +473 -0
package/references/trends/claymorphism.md +232 -0
package/references/trends/dark-mode-oled.md +282 -0
package/references/trends/glassmorphism.md +455 -0
package/references/trends/kinetic-typography.md +277 -0
package/references/trends/liquid-glass.md +236 -0
package/references/trends/micro-interactions.md +307 -0
package/references/trends/neubrutalism.md +276 -0
package/references/voice-tone.md +193 -0
package/scripts/gsp-statusline.js +1 -1
package/templates/branding/brief.md +74 -0
package/templates/branding/config.json +26 -0
package/templates/branding/roadmap.md +43 -0
package/templates/branding/state.md +29 -0
package/templates/changelog.md +4 -0
package/templates/codebase-inventory.md +71 -0
package/templates/exports-index.md +93 -0
package/templates/manifest.md +19 -0
package/templates/phases/brief.md +53 -0
package/templates/phases/build.md +24 -48
package/templates/phases/critique.md +68 -0
package/templates/phases/design.md +54 -32
package/templates/phases/discover.md +60 -0
package/templates/phases/identity.md +78 -0
package/templates/phases/launch.md +48 -55
package/templates/phases/research.md +75 -47
package/templates/phases/review.md +27 -75
package/templates/phases/strategy.md +67 -0
package/templates/phases/system.md +84 -78
package/templates/phases/verbal.md +63 -0
package/templates/{project.md → projects/brief.md} +13 -17
package/templates/projects/config.json +32 -0
package/templates/projects/roadmap.md +59 -0
package/templates/{state.md → projects/state.md} +19 -9
package/agents/gsp-spec-engineer.md +0 -121
package/agents/gsp-ui-designer.md +0 -59
package/commands/gsp/spec.md +0 -88
package/templates/config.json +0 -26
package/templates/phases/brand.md +0 -60
package/templates/phases/spec.md +0 -46
package/templates/roadmap.md +0 -62

package/references/trends/kinetic-typography.md ADDED Viewed

@@ -0,0 +1,277 @@
+# Kinetic Typography
+> Text that moves — scroll-triggered animations, character-level effects, and responsive text transforms that make typography the hero element.
+Last verified: 2026-03-04
+---
+## Visual Characteristics
+- Text as the primary visual element, not decoration
+- Scroll-triggered reveals and staggered animations
+- Character and word-level motion with precise timing
+- Marquee/horizontal scroll text for atmosphere
+- Scale and emphasis transitions for key messages
+- Requires JavaScript for character splitting and scroll detection
+---
+## CSS Implementation
+### Scroll-Reveal (Word by Word)
+```css
+.kinetic-word {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+.kinetic-word.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+/* Stagger: 60ms per word */
+.kinetic-word:nth-child(1) { transition-delay: 0ms; }
+.kinetic-word:nth-child(2) { transition-delay: 60ms; }
+.kinetic-word:nth-child(3) { transition-delay: 120ms; }
+```
+### Character Split + Stagger
+```css
+.kinetic-char {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(100%);
+  animation: char-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@keyframes char-reveal {
+  to { opacity: 1; transform: translateY(0); }
+}
+.kinetic-char { animation-delay: calc(var(--char-index) * 30ms); }
+```
+### Horizontal Scroll Text (Marquee)
+```css
+.kinetic-marquee {
+  display: flex;
+  white-space: nowrap;
+  animation: scroll-x 20s linear infinite;
+}
+@keyframes scroll-x {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+```
+### Animation Timing Reference
+| Effect | Duration | Easing | Stagger |
+|--------|----------|--------|---------|
+| Word reveal | 400ms | `ease-out` | 60ms/word |
+| Char reveal | 500ms | `cubic-bezier(0.16, 1, 0.3, 1)` | 30ms/char |
+| Line slide-up | 600ms | `cubic-bezier(0.16, 1, 0.3, 1)` | 100ms/line |
+| Marquee | 15-25s | `linear` | N/A |
+| Scale emphasis | 300ms | `cubic-bezier(0.34, 1.56, 0.64, 1)` | N/A |
+---
+## Implementation Guide
+### Step-by-step
+1. Choose your effect type: word reveal, character split, line slide, or marquee
+2. For word/character effects: split text into `<span>` elements using JavaScript
+3. Set `--char-index` or `--word-index` CSS custom property on each span for stagger timing
+4. Use `IntersectionObserver` to trigger animations when elements enter the viewport
+5. Apply animation class (`.visible`) when the element intersects
+6. For marquee: duplicate the text content to create a seamless loop
+7. Set `aria-hidden="true"` on duplicate marquee content
+### Progressive Enhancement
+```css
+/* Baseline: all text visible immediately */
+.kinetic-word,
+.kinetic-char {
+  opacity: 1;
+  transform: none;
+}
+/* Enhanced: only animate when JS is available */
+.js-loaded .kinetic-word,
+.js-loaded .kinetic-char {
+  opacity: 0;
+  transform: translateY(20px);
+}
+```
+Add `js-loaded` class to `<html>` via JavaScript on load to enable animations only when JS is available.
+### Framework Notes
+#### React + Framer Motion
+```tsx
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+export function KineticHeading({ text }: { text: string }) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const words = text.split(' ');
+  return (
+    <h2 ref={ref} className="text-5xl font-bold">
+      {words.map((word, i) => (
+        <motion.span
+          key={i}
+          className="inline-block mr-3"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ delay: i * 0.06, duration: 0.4, ease: 'easeOut' }}
+        >
+          {word}
+        </motion.span>
+      ))}
+    </h2>
+  );
+}
+```
+#### GSAP ScrollTrigger
+```js
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+gsap.registerPlugin(ScrollTrigger);
+// Word-by-word reveal on scroll
+gsap.from('.kinetic-word', {
+  y: 20,
+  opacity: 0,
+  stagger: 0.06,
+  duration: 0.4,
+  ease: 'power2.out',
+  scrollTrigger: {
+    trigger: '.kinetic-container',
+    start: 'top 80%',
+    toggleActions: 'play none none none',
+  }
+});
+```
+#### CSS Scroll-Driven Animations (New Spec)
+```css
+/* Native CSS scroll-linked animation — Chrome 115+ */
+.kinetic-word {
+  animation: reveal linear both;
+  animation-timeline: view();
+  animation-range: entry 0% entry 50%;
+}
+@keyframes reveal {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+```
+#### React Native
+Kinetic typography is achievable with `react-native-reanimated` for scroll-linked animations. Character splitting requires manual `<Text>` wrapping. No CSS `animation-timeline` equivalent exists — use `useAnimatedScrollHandler` from Reanimated.
+### Common Pitfalls
+1. **Text inaccessible without JS**: always ensure text is visible by default. Apply animation styles only after JS loads. Never set `opacity: 0` in base CSS for content text.
+2. **Excessive DOM nodes**: character-level splitting creates one `<span>` per character. A 500-character paragraph becomes 500+ DOM nodes. Limit character splitting to headings and short phrases.
+3. **Replay fatigue**: scroll-triggered animations that replay every time the user scrolls past create annoyance. Use `{ once: true }` with IntersectionObserver.
+4. **Marquee without duplication**: a single-copy marquee shows a gap. Duplicate the content and use `translateX(-50%)` for seamless looping.
+5. **Missing reduced-motion support**: kinetic typography is the most motion-heavy trend — always provide a complete `prefers-reduced-motion` fallback.
+---
+## Examples Gallery
+| Site | What They Do Well | Screenshot Description |
+|------|-------------------|----------------------|
+| Apple (product pages) | Word-by-word scroll reveal with scale emphasis on key specs ("A17 Pro") | iPhone page with staggered text revealing performance numbers |
+| Locomotive | Scroll-driven character reveal with split animations and parallax text layers | Agency homepage with large kinetic headings |
+| Awwwards — Aristide Benoist | Award-winning character-by-character reveal with custom easing per letter | Portfolio with immersive typographic scroll experience |
+| Stripe | Subtle word-level fade-in on scroll with precise stagger timing | Features page with clean staggered text reveals |
+| Awwwards — Rejouice | Full-page kinetic typography as the primary navigation and storytelling device | Single-page experience driven entirely by animated text |
+---
+## Accessibility
+- **Content visibility**: text must be readable without JavaScript. Never hide content behind `opacity: 0` in base CSS.
+- **Reduced motion**: replace all animation with instant visibility for `prefers-reduced-motion: reduce`
+  - Stop marquee animations
+  - Remove character-level stagger — show full text immediately
+  - Replace slide/scale with simple opacity fade (200ms max)
+- **Screen readers**: ensure `aria-hidden="true"` on duplicate marquee text. Use `aria-label` on animated containers if text is fragmented across many spans.
+- **Focus order**: character-split text should not create individual tab stops. Use `tabindex="-1"` on internal spans.
+---
+## Performance
+- **DOM cost**: character splitting creates N DOM nodes per character. Keep to headings and short phrases — never split body paragraphs
+- **GSAP vs CSS**: GSAP ScrollTrigger adds ~25KB (minified). CSS scroll-driven animations are zero-JS but limited to Chrome 115+
+- **Animate only `transform` and `opacity`**: these are GPU-composited. Avoid animating `font-size`, `letter-spacing`, or `width`
+- **IntersectionObserver**: more performant than scroll event listeners for triggering reveals
+- **Marquee**: uses `transform: translateX()` — GPU-composited, low cost even on mobile
+---
+## When to Use / When to Avoid
+### Use When
+- Hero sections, section intros with key messages
+- Single impactful phrases or headlines
+- Scroll-driven storytelling and narrative pages
+- Marketing/landing pages where typography is the hero
+### Avoid When
+- Body text, paragraphs, or long-form content
+- Navigation elements, form labels
+- Frequently revisited pages where animation becomes annoying
+- Content that needs to be immediately readable (alerts, errors, CTAs)
+---
+## Design Tokens
+```json
+{
+  "kinetic": {
+    "word-reveal-duration": "400ms",
+    "word-reveal-stagger": "60ms",
+    "word-reveal-easing": "ease-out",
+    "char-reveal-duration": "500ms",
+    "char-reveal-stagger": "30ms",
+    "char-reveal-easing": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "line-slide-duration": "600ms",
+    "line-slide-stagger": "100ms",
+    "marquee-duration": "20s",
+    "scale-emphasis-duration": "300ms",
+    "scale-emphasis-easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "reduced-motion-duration": "200ms"
+  }
+}
+```
+---
+## Related
+- [Neubrutalism](./neubrutalism.md) — great pairing for bold, expressive text effects
+- [Micro-Interactions](./micro-interactions.md) — complementary animation system for non-text elements

package/references/trends/liquid-glass.md ADDED Viewed

@@ -0,0 +1,236 @@
+# Liquid Glass
+> Apple's 2025 design language featuring semi-transparent surfaces with light refraction, dynamic blur, and fluid morphing — the first major Apple UI overhaul in 10 years.
+Last verified: 2026-03-04
+---
+## Visual Characteristics
+- Semi-transparent surfaces that refract and bend background content
+- Dynamic light response — surfaces react to scroll, tilt, and ambient light
+- Fluid shape transitions — UI elements morph between states like water
+- Layered depth with specular highlights simulating real glass curvature
+- Soft, organic edges — no hard borders
+- Deployed across iOS 26, macOS Tahoe, iPadOS, visionOS from WWDC 2025
+---
+## CSS Implementation
+### Core Surface
+Apple's native implementation uses system-level compositing unavailable to web. This CSS approximation achieves ~80% of the visual effect:
+```css
+.liquid-glass {
+  position: relative;
+  backdrop-filter: blur(2px) saturate(180%);
+  -webkit-backdrop-filter: blur(2px) saturate(180%);
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 2rem;
+  box-shadow:
+    0 8px 32px rgba(31, 38, 135, 0.2),
+    inset 0 4px 20px rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+}
+/* Inner light reflection layer */
+.liquid-glass::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(1px);
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2rem;
+  opacity: 0.6;
+  box-shadow:
+    inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
+    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
+  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
+  pointer-events: none;
+}
+```
+### SVG Distortion Filter (Refraction Effect)
+True liquid glass distortion requires SVG filters — CSS alone cannot achieve light bending:
+```html
+<svg style="position: absolute; width: 0; height: 0;">
+  <filter id="liquid-distortion">
+    <feTurbulence type="fractalNoise" baseFrequency="0.008 0.008"
+      numOctaves="3" seed="1" result="noise" />
+    <feGaussianBlur in="noise" stdDeviation="2" result="blurred-noise" />
+    <feDisplacementMap in="SourceGraphic" in2="blurred-noise"
+      scale="70" xChannelSelector="R" yChannelSelector="G" />
+    <feSpecularLighting in="blurred-noise" surfaceScale="3"
+      specularConstant="0.75" specularExponent="20" result="specular">
+      <fePointLight x="-50" y="-100" z="200" />
+    </feSpecularLighting>
+    <feComposite in="specular" in2="SourceGraphic" operator="in" />
+  </filter>
+</svg>
+```
+Apply: `filter: url(#liquid-distortion);`
+### Animation Values
+- Transition timing: `cubic-bezier(0.175, 0.885, 0.32, 2.2)` (springy/elastic)
+- Morph duration: 300-500ms
+- Blur transition: 200ms ease-out
+---
+## Implementation Guide
+### Step-by-step
+1. Add a visually rich background layer (gradient, image, or aurora) — liquid glass needs content to refract
+2. Create the glass container with `position: relative` and `overflow: hidden`
+3. Apply `backdrop-filter: blur(2px) saturate(180%)` with `-webkit-` prefix
+4. Set translucent fill: `rgba(255,255,255, 0.15)` for light, `rgba(0,0,0, 0.2)` for dark
+5. Add the `::after` pseudo-element for the inner light reflection
+6. For refraction: include the SVG filter inline and apply via `filter: url(#liquid-distortion)`
+7. Add spring-based transition for morph states
+### Progressive Enhancement
+```css
+/* Baseline: solid frosted card */
+.liquid-glass {
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+/* Layer 1: backdrop blur when supported */
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .liquid-glass {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(2px) saturate(180%);
+    -webkit-backdrop-filter: blur(2px) saturate(180%);
+  }
+}
+/* Reduced transparency preference */
+@media (prefers-reduced-transparency: reduce) {
+  .liquid-glass {
+    background: rgba(255, 255, 255, 0.90);
+    backdrop-filter: none;
+  }
+}
+```
+### Framework Notes
+#### React + Tailwind CSS
+```tsx
+export function LiquidGlass({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative overflow-hidden rounded-[2rem] bg-white/15 backdrop-blur-sm backdrop-saturate-[180%] border border-white/80 shadow-[0_8px_32px_rgba(31,38,135,0.2),inset_0_4px_20px_rgba(255,255,255,0.3)]">
+      {/* Inner reflection via absolute overlay */}
+      <div className="absolute inset-0 rounded-[2rem] bg-white/10 opacity-60 blur-[1px] pointer-events-none" />
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}
+```
+#### React Native
+Liquid glass is not directly achievable in React Native. Use `@react-native-community/blur` for a simplified frosted glass approximation. The SVG distortion filter has no React Native equivalent.
+#### Vanilla CSS
+Use the CSS + SVG filter approach from the implementation section. Define glass properties as custom properties for theme switching.
+### Common Pitfalls
+1. **Nested backdrop-filters**: stacking multiple `backdrop-filter` elements causes compounding blur and severe GPU cost. Limit to one glass layer per viewport section.
+2. **Missing `-webkit-` prefix**: Safari requires `-webkit-backdrop-filter`. Without it, the surface appears opaque on all Apple devices.
+3. **SVG filter on mobile Safari**: `feDisplacementMap` renders inconsistently on iOS Safari (WebKit bug). Disable the SVG distortion filter on mobile and rely on backdrop-filter only.
+4. **No background content**: liquid glass over a flat solid color is invisible. Always ensure a rich visual layer behind the glass.
+5. **Animating blur values**: transitioning `backdrop-filter` blur triggers compositing on every frame. Animate `opacity` or `transform` instead.
+---
+## Examples Gallery
+| Site | What They Do Well | Screenshot Description |
+|------|-------------------|----------------------|
+| Apple iOS 26 / macOS Tahoe | The canonical reference — system-wide liquid glass with real-time refraction and adaptive tint | Control Center, notifications, and app chrome all use dynamic glass |
+| Apple Vision Pro UI | Liquid glass in spatial computing — panels float in 3D space with real depth-of-field blur | Floating app windows with environment showing through |
+| The General Intelligence Company | High-blur glass navigation over pixel-art backdrop — demonstrates glass over illustration | Nav bar with vivid background visible through |
+| Raycast (macOS app) | Launcher panels use frosted glass with subtle light reflection matching system appearance | Command palette floating over desktop content |
+| Amie Calendar | Meeting cards and sidebar use liquid-glass-inspired translucency with light edge highlights | Calendar grid with frosted event cards |
+---
+## Accessibility
+- **Contrast**: text on glass surfaces must meet WCAG 4.5:1 minimum. Increase fill opacity or add `text-shadow: 0 1px 3px rgba(0,0,0,0.3)` when contrast is insufficient
+- **Reduced transparency**: respect `prefers-reduced-transparency: reduce` — replace glass with solid, opaque backgrounds
+- **Reduced motion**: disable morph animations and SVG distortion for `prefers-reduced-motion: reduce`
+- **Focus indicators**: glass surfaces swallow default focus rings — use `outline: 3px solid rgba(255,255,255,0.9)` with `outline-offset: 3px`
+---
+## Performance
+- **Backdrop-filter cost**: ~15-25% more GPU than opaque surfaces. Scales with element area.
+- **SVG filter cost**: `feDisplacementMap` + `feSpecularLighting` is expensive. Limit to 1-2 elements per page.
+- **Avoid**: blur > 20px, nested backdrop-filters, animating blur values
+- **Optimize**: use `transform: translateZ(0)` for GPU compositing, `isolation: isolate` to contain stacking context
+- **Mobile**: reduce or remove SVG distortion filter entirely on mobile devices
+---
+## When to Use / When to Avoid
+### Use When
+- Navigation bars, toolbars, floating panels
+- Modal overlays, action sheets
+- Cards layered over rich visual backgrounds (photography, gradients, aurora)
+- Apple ecosystem-aligned products seeking visual consistency
+### Avoid When
+- Text-heavy content areas — transparency reduces sustained reading comfort
+- Data tables, forms — functionality over aesthetics
+- Performance-critical mobile experiences on mid-range devices
+- Flat-color backgrounds where the glass effect is invisible
+---
+## Design Tokens
+```json
+{
+  "liquid-glass": {
+    "fill-light": "rgba(255, 255, 255, 0.15)",
+    "fill-dark": "rgba(0, 0, 0, 0.20)",
+    "blur": "2px",
+    "saturate": "180%",
+    "border-light": "rgba(255, 255, 255, 0.8)",
+    "border-dark": "rgba(255, 255, 255, 0.15)",
+    "radius": "2rem",
+    "shadow": "0 8px 32px rgba(31, 38, 135, 0.2)",
+    "shadow-inset": "inset 0 4px 20px rgba(255, 255, 255, 0.3)",
+    "reflection-opacity": "0.6",
+    "transition-timing": "cubic-bezier(0.175, 0.885, 0.32, 2.2)",
+    "morph-duration": "400ms",
+    "blur-transition": "200ms"
+  }
+}
+```
+---
+## Related
+- [Glassmorphism](./glassmorphism.md) — predecessor with simpler frosted glass, no refraction
+- [Aurora Gradients](./aurora-gradients.md) — ideal background layer under liquid glass
+- [Dark Mode OLED](./dark-mode-oled.md) — surface token adaptation needed for dark variant