glyph-ai 0.1.0

package/bundled/server/data/design-systems/raycast-design-system.md

@@ -0,0 +1,709 @@
+# Raycast.com Design System & Section Boilerplate
+
+## Design System
+
+### Colors
+
+| Role | Value | CSS Variable |
+|------|-------|-------------|
+| **Primary** | `#FF6363` (Red/Coral) | `--color-red: hsl(0,100%,69%)` |
+| **Secondary** | `#56C2FF` (Blue) | `--color-blue: hsl(202,100%,67%)` |
+| **Tertiary** | `hsl(43,100%,60%)` (Yellow/Gold) | `--color-yellow` |
+| **Accent Green** | `hsl(151,59%,59%)` | `--color-green` |
+| **Background** | `#07080A` | `--grey-900` / `--background` |
+| **Surface 100** | `rgb(16,17,17)` | `--color-bg-100` |
+| **Surface 200** | `rgb(24,25,26)` | `--color-bg-200` |
+| **Surface 300** | `rgb(49,49,51)` | `--color-bg-300` |
+| **Surface 400** | `rgb(73,75,77)` | `--color-bg-400` |
+| **Foreground** | `hsl(240,11%,96%)` (~white) | `--color-fg` |
+| **Foreground Muted** | `rgb(194,199,202)` | `--color-fg-200` |
+| **Foreground Subtle** | `#78787C` | `--color-fg-300` |
+| **Foreground Dimmed** | `rgb(94,99,102)` | `--color-fg-400` |
+| **Border** | `hsl(195,5%,15%)` | `--color-border` |
+| **Border Subtle** | `rgba(255,255,255,0.06)` | Used on cards/nav |
+| **Button BG** | `hsla(0,0%,100%,0.815)` | `--color-button-bg` |
+| **Button BG Hover** | `hsl(0,0%,100%)` | `--color-button-bg-hover` |
+| **Button FG** | `rgb(24,25,26)` | `--color-button-fg` |
+
+#### Grey Scale
+
+| Token | Value |
+|-------|-------|
+| `--grey-50` | `#E6E6E6` |
+| `--grey-100` | `#CDCECE` |
+| `--grey-200` | `#9C9C9D` |
+| `--grey-300` | `#6A6B6C` |
+| `--grey-400` | `#434345` |
+| `--grey-500` | `#2F3031` |
+| `--grey-600` | `#1B1C1E` |
+| `--grey-700` | `#111214` |
+| `--grey-800` | `#0C0D0F` |
+| `--grey-900` | `#07080A` |
+
+### Typography
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Color |
+|------|------|------|--------|-------------|----------------|-------|
+| **H1 (Hero)** | Inter | 64px | 600 (SemiBold) | 1.1 (70.4px) | normal | `#FFFFFF` |
+| **H2 (Section Title)** | Inter | 20px | 500 (Medium) | normal | 0.2px | `#FFFFFF` |
+| **H3 (Large Display)** | Inter | 56px | 400 (Regular) | normal | 0.2px | `#FFFFFF` |
+| **H4 (Card Title)** | Inter | 24px | 500 (Medium) | normal | 0.2px | `#FFFFFF` |
+| **Body** | Inter | 18px | 400 (Regular) | normal | normal | `#FFFFFF` |
+| **Body Small** | Inter | 14px | 500 (Medium) | normal | normal | `#9C9C9D` |
+| **Subtitle** | Inter | 20px | 500 (Medium) | normal | normal | `#6A6B6C` |
+| **Label/Nav** | Inter | 14px | 500 (Medium) | normal | normal | `#9C9C9D` |
+| **Monospace** | GeistMono / JetBrains Mono | 12px | 400 | normal | normal | `#9C9C9D` |
+| **Font Stack** | `Inter, "Inter Fallback", sans-serif` | | | | | |
+| **Mono Stack** | `GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, Courier, monospace` | | | | | |
+
+### Buttons
+
+#### Primary Button (Download/CTA)
+```
+background: rgb(230, 230, 230)  /* ~#E6E6E6, near-white */
+color: rgb(47, 48, 49)          /* dark grey text */
+border-radius: 8px
+padding: 8px 12px
+font-size: 14px
+font-weight: 500
+border: none
+icon: platform icon (Apple/Windows) left-aligned
+hover: background transitions to pure white
+```
+
+#### Ghost/Nav Link
+```
+background: transparent
+color: rgb(156, 156, 157)       /* #9C9C9D */
+border-radius: 6px
+padding: 12px 8px
+font-size: 14px
+font-weight: 500
+border: none
+hover: color transitions to white
+```
+
+#### Pill Button (Announcement Banner)
+```
+background: rgb(19, 13, 14)     /* very dark, near-black */
+color: #FFFFFF
+border-radius: 1000px           /* full pill */
+padding: 4px 12px
+font-size: 14px
+font-weight: 500
+border: subtle gradient or border
+```
+
+#### Subscribe Button
+```
+background: rgb(230, 230, 230)
+color: rgb(47, 48, 49)
+border-radius: 8px
+padding: 8px 12px
+font-size: 14px
+font-weight: 500
+```
+
+### Input Fields
+
+#### Email Input (Newsletter)
+```
+background: rgba(255, 255, 255, 0.05)
+color: #FFFFFF
+border: 1px solid rgba(255, 255, 255, 0.05)
+border-radius: 8px
+padding: 8px 12px
+font-size: 14px
+height: 42px
+placeholder-color: muted grey
+```
+
+### Spacing Scale
+
+| Token | Value |
+|-------|-------|
+| `--spacing-0-5` | 4px |
+| `--spacing-1` | 8px |
+| `--spacing-1-5` | 12px |
+| `--spacing-2` | 16px |
+| `--spacing-2-5` | 20px |
+| `--spacing-3` | 24px |
+| `--spacing-4` | 32px |
+| `--spacing-5` | 40px |
+| `--spacing-6` | 48px |
+| `--spacing-7` | 56px |
+| `--spacing-8` | 64px |
+| `--spacing-9` | 80px |
+| `--spacing-10` | 96px |
+| `--spacing-11` | 112px |
+| `--spacing-12` | 168px |
+| `--spacing-13` | 224px |
+
+### Border Radius Scale
+
+| Token | Value |
+|-------|-------|
+| `--rounding-none` | 0px |
+| `--rounding-xs` | 4px |
+| `--rounding-sm` | 6px |
+| `--rounding-normal` | 8px |
+| `--rounding-md` | 12px |
+| `--rounding-lg` | 16px |
+| `--rounding-xl` | 20px |
+| `--rounding-xxl` | 24px |
+| `--rounding-full` | 100% |
+
+### Layout
+
+| Property | Value |
+|----------|-------|
+| Container XS | 746px |
+| Container SM | 1064px |
+| Container (default) | 1204px |
+| Container LG | 1280px |
+| Grid Gap | 32px |
+| Navbar Width | 1204px (same as container) |
+| Navbar Height | 58px (inner), 76px (with padding) |
+
+### Animation
+
+- Custom spring easing: `--spring-1` (a complex linear() easing function with ~100 keyframes creating a spring/bounce effect)
+- Used for scroll-triggered reveals and interactive elements
+
+---
+
+## Section Boilerplate
+
+### Navigation
+
+**Structure:**
+```
+Fixed position, full-width outer wrapper
+  padding: 16px 16px 0
+  └── Inner container (floating bar)
+        max-width: 1204px
+        height: 76px (58px inner + padding)
+        padding: 16px 32px
+        border-radius: 16px
+        border: 1px solid rgba(255,255,255,0.06)
+        backdrop-filter: blur(5px)
+        background: transparent (with blur)
+        display: flex
+        align-items: center
+        ├── Logo (left) — Raycast icon + wordmark
+        ├── Nav Links (center) — horizontal row
+        │     Links: Store, Pro, AI, iOS, Windows, Teams, Developers, Blog, Pricing
+        │     style: 14px, 500 weight, #9C9C9D, padding 12px 8px, radius 6px
+        │     hover: text color transitions to white
+        └── Right section
+              ├── "Log in" link (same ghost style as nav links)
+              └── "Download" button (primary style, Apple icon + text)
+```
+
+**Interactions:**
+- Nav is `position: fixed`, stays at top on scroll
+- Background uses `backdrop-filter: blur(5px)` for frosted glass effect
+- Links change color from `#9C9C9D` to white on hover
+- Download button has platform-specific icon (Apple on Mac)
+- Nav shrinks/collapses on scroll (inner bar stays pinned)
+
+---
+
+### Hero
+
+**Structure:**
+```
+Full viewport height section
+  background: #07080A with large red/coral abstract gradient art (diagonal streaks)
+  text-align: center
+  display: flex, flex-direction: column, align-items: center, justify-content: center
+  padding-top: ~navbar height
+
+  ├── H1 "Your shortcut to everything."
+  │     font-size: 64px, weight: 600, color: white
+  │     max-width: ~800px, centered
+  │
+  ├── Subtitle paragraph
+  │     font-size: 18px, weight: 400, color: white
+  │     "A collection of powerful productivity tools..."
+  │     margin-top: ~24px
+  │
+  ├── CTA Button Row (bottom area)
+  │     display: flex, gap: 12px, justify-content: center
+  │     ├── "Download for Mac" — primary button with Apple icon
+  │     └── "Download for Windows (beta)" — primary button with Windows icon
+  │
+  └── Version info (monospace)
+        "v1.104.10 | macOS 13+ | Install via homebrew"
+        font-size: 12px, color: #9C9C9D, font-family: monospace
+```
+
+**Key details:**
+- Background uses a large abstract red/coral gradient artwork with diagonal streaks
+- Full viewport height, content vertically centered
+- CTA buttons sit near the bottom of the viewport
+- Version info below CTAs in monospace font
+
+---
+
+### Features (Product Showcase)
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px (top/bottom), max-width: 1204px, centered
+
+  ├── Section Title (centered)
+  │     ├── H2 "Take shortcuts, not detours."
+  │     │     font-size: 20px, weight: 500, color: white
+  │     └── P "One interface, everything you need."
+  │           font-size: 20px, weight: 500, color: #6A6B6C
+  │     margin-bottom: 64px
+  │
+  └── Interactive Product Demo
+        Full-width macOS-style window mockup
+        Shows Raycast app interface with search bar, file results, action menus
+        Embedded screenshots/animations of the actual product
+        Surrounded by macOS menu bar mockup (Finder, File, Edit, etc.)
+```
+
+**Pattern:** Section title (white heading + grey subtitle) followed by full-width interactive demo/screenshot. Very generous vertical padding (224px).
+
+---
+
+### Showcase (Value Props / "It's not about saving time")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+  display: grid or flex, split layout
+
+  ├── Left column (text)
+  │     ├── H2 "It's not about saving time."
+  │     │     font-size: 20px, weight: 500, color: white
+  │     ├── P subtitle in grey (#6A6B6C)
+  │     └── Download button (primary)
+  │
+  └── Right column (visual)
+        Grid of value prop cards over keyboard visual
+        Cards:
+          border: 1px solid rgba(255,255,255,0.06)
+          border-radius: 12px
+          padding: ~24px
+          Each card:
+            ├── Icon (small, top-left)
+            ├── Bold label "Fast." / "Ergonomic." / "Native." / "Reliable."
+            │     color: white, weight: 500
+            └── Description text in grey
+                  "Think in milliseconds." / "Keyboard First."
+        3 columns top row, 2 columns bottom row
+        Background: subtle keyboard key visualization
+```
+
+---
+
+### Store / Extensions ("There's an extension for that")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  ├── Section Title
+  │     ├── H2 "There's an extension for that."
+  │     └── P "Use your favorite tools without even opening them."
+  │
+  ├── Category Tabs
+  │     Horizontal row: Productivity | Engineering | Communication | ...
+  │     Active tab: white text
+  │     Inactive tab: #6A6B6C text
+  │     font-size: 14px, weight: 500
+  │
+  ├── Extension Cards (horizontal scroll carousel)
+  │     3 cards visible at a time
+  │     Each card:
+  │       border-radius: 20px
+  │       border: 1px solid rgba(255,255,255,0.06)
+  │       background: gradient (unique per card — dark blue, dark teal, dark green, etc.)
+  │       ├── Top section
+  │       │     App icon + Extension name + category badge
+  │       │     Description text (14px, white)
+  │       └── Bottom section
+  │             Interactive visual/demo of the extension
+  │
+  ├── "Browse thousands more →" link
+  │     font-size: 14px, color: grey, with arrow
+  │
+  └── Carousel arrows (right side)
+        Two circular buttons: ← →
+        border: 1px solid rgba(255,255,255,0.06)
+        border-radius: 50%
+        ~40px diameter
+```
+
+---
+
+### Features (AI Section / "Your Mac just got smarter")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  ├── Divider with label
+  │     Horizontal line with "AI" text centered
+  │     Line: thin, subtle grey
+  │     Label: colored text (red/brand)
+  │
+  ├── Section Title (centered)
+  │     ├── H2 "Your Mac just got smarter."
+  │     └── P "AI where it's most useful - on your OS."
+  │
+  └── AI Demo Card
+        Full-width card
+        border-radius: 12px
+        border: 1px solid rgba(255,255,255,0.06)
+        Shows a macOS window with:
+          - Browser-style window chrome (red/yellow/green dots)
+          - Split view: text editor (left) + image (right)
+          - Content demonstrates AI writing capability
+        Link: "Learn more about Raycast AI"
+```
+
+---
+
+### Social Proof / Testimonials ("Built for professionals like you")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  ├── Section Title (centered)
+  │     ├── H2 "Built for professionals like you."
+  │     └── P "Used by seriously productive people."
+  │
+  ├── Testimonial Avatars Row
+  │     Horizontal row of 3 profiles (centered)
+  │     Each:
+  │       ├── Avatar image (circular, ~48px)
+  │       ├── Name (white, 14px, weight 500)
+  │       ├── Handle (@username, grey)
+  │       └── Title/Company (grey)
+  │     Active testimonial highlighted with subtle card/border
+  │     Clickable to switch testimonial
+  │
+  └── Testimonial Quote
+        Below a thin horizontal divider
+        Large quotation marks (decorative, grey)
+        Quote text:
+          font-size: ~20px
+          "My favorite productivity app on the Mac" — bold/white
+          rest in grey/muted
+        Centered layout
+```
+
+---
+
+### How It Works / Automation ("Don't repeat yourself")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  ├── Section Title (centered)
+  │     ├── H2 "Don't repeat yourself."
+  │     └── P "Automate the things you do all the time."
+  │
+  ├── Feature Card: Snippets (full-width)
+  │     border-radius: 12px
+  │     border: 1px solid rgba(255,255,255,0.06)
+  │     display: grid, 2 columns
+  │     ├── Left: text content
+  │     │     ├── Icon + "Snippets" title (24px, 500)
+  │     │     └── Description paragraph (grey)
+  │     └── Right: visual demo
+  │           Shows snippet expansion in a messaging interface
+  │           Blue/teal gradient background
+  │
+  └── Two cards side by side (50/50 grid, gap: 24px)
+        Each card:
+          border-radius: 12px
+          border: 1px solid rgba(255,255,255,0.06)
+          ├── Visual demo area (top)
+          │     Screenshots of Quicklinks search / keyboard shortcuts
+          ├── Icon + Title (24px, 500, white)
+          └── Description (14px, grey)
+        Card 1: "Quicklinks" — search bar demo
+        Card 2: "Hotkeys and Aliases" — keyboard key visualization
+```
+
+---
+
+### Showcase (Built-in Features / Emoji & Notes)
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  Rotating text showcase:
+    Left column: animated/cycling text describing capabilities
+      "It can take notes. Track your windows. Plan your day.
+       Remind you of stuff. Translate into any language.
+       Block distractions. Find text in screenshots.
+       Insert Emojis. And much, much more."
+      Key phrases highlighted in white, rest in grey
+      Text cycles/animates through features
+
+    Right column: matching visual demo
+      Shows the relevant UI for the current highlighted feature
+      (e.g., Emoji picker grid when "Insert Emojis" is highlighted)
+
+    Below: feature label card
+      Icon + "Search Emojis and Symbols" title
+      Description text
+```
+
+---
+
+### Social Proof (Community / "Stay in the loop")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+  background: subtle radial gradient overlay
+
+  ├── Section Title (centered)
+  │     ├── H2 "Stay in the loop."
+  │     └── P "Join the community and learn how other people
+  │            get the most out of Raycast."
+  │
+  ├── Social Cards Row (2 columns)
+  │     Card 1: Slack
+  │       ├── Slack logo icon
+  │       ├── "Slack" label
+  │       └── "32k members" (monospace, right-aligned)
+  │     Card 2: X/Twitter
+  │       ├── X logo icon
+  │       ├── "X/Twitter" label
+  │       └── "80k followers" (monospace, right-aligned)
+  │     Card styling: dark bg, subtle border
+  │
+  └── YouTube section
+        Horizontal ticker/carousel of YouTube video thumbnails
+        Auto-scrolling marquee effect
+        Below: "Check out our YouTube channel..." text + YouTube logo
+```
+
+---
+
+### Features (Developer Section / "Build the perfect tools")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+
+  ├── 3D Isometric Illustration
+  │     Blueprint-style illustration of the Raycast window anatomy
+  │     Labels: "SEARCH BAR", "ACTION BAR", "SELECTED ITEM", "LIST CONTENT"
+  │     Blue/brand colored highlights on dark wireframe
+  │     "FIG_01" label top-left (technical drawing style)
+  │
+  ├── Title + Description (2-column grid)
+  │     ├── Left: H3 "Build the perfect tools."
+  │     │     font-size: 56px, weight: 400 (thin/light)
+  │     └── Right:
+  │           Monospace description text
+  │           "Our extension API is designed to allow anyone with web
+  │            development skills to unleash the power of Raycast."
+  │           + "Read the docs ↗" link
+  │
+  └── Feature Grid (2x2)
+        Each cell:
+          border: 1px solid rgba(255,255,255,0.06)
+          padding: ~32px
+          ├── H4 title (24px, 500, white)
+          ├── Description (14px, grey, monospace)
+          └── Link "Learn more ↗"
+        Cells:
+          1. "React to macOS" — React/TypeScript API
+          2. "Built-in UI" — pre-built components
+          3. "Batteries included" — utilities & APIs
+          4. "Publish to the Store" — distribution
+```
+
+---
+
+### CTA ("Take the short way")
+
+**Structure:**
+```
+Section container
+  padding: 224px 24px
+  text-align: center
+  background: keyboard visualization (large, faded keys background)
+
+  ├── H2/H3 "Take the short way."
+  │     font-size: large (display), centered
+  │
+  ├── CTA Button Row
+  │     Same as hero: two download buttons side by side
+  │     "Download for Mac" + "Download for Windows (beta)"
+  │     Primary button style
+  │
+  ├── Version info (monospace)
+  │     "v1.104.10 | macOS 13+ | Install via homebrew"
+  │
+  └── Abstract gradient art (red/coral diagonal streaks)
+        Same visual language as hero, creating bookend effect
+```
+
+---
+
+### Footer
+
+**Structure:**
+```
+Footer wrapper
+  background: same as body (#07080A), no distinct bg
+  padding-top: 200px (with gradient art transition from CTA)
+  border-top: 1px solid rgba(255,255,255,0.06) (above link grid)
+
+  ├── Link Grid
+  │     display: grid
+  │     grid-template-columns: repeat(6, 1fr)
+  │     gap: 32px
+  │     padding: 96px 0 0 24px
+  │     max-width: 1204px, centered
+  │
+  │     Column 1: "Product"
+  │       Store, Pro, Teams, Pricing, Changelog, Browser Extension,
+  │       Developers, iOS, Windows, API Docs↗, Manual↗,
+  │       Troubleshooting↗, Raycast vs Alfred, FAQ
+  │
+  │     Column 2: "Core Features"
+  │       Raycast AI, Raycast Notes, Raycast Focus,
+  │       Clipboard History, Window Management, Snippets,
+  │       File Search, Quicklinks, Calculator, Calendar,
+  │       System, Emoji Picker
+  │
+  │     Column 3: "Top Extensions"
+  │       Design Tools, Developer Tools, Pomodoro Timer,
+  │       Productivity, Time Management, Project Management,
+  │       Transcript, Translation, Work From Home, AI
+  │
+  │     Column 4: "Company"
+  │       Manifesto, Customers, Careers, Terms of Service,
+  │       Privacy Policy, Acceptable Use Policy, DPA,
+  │       Trust Center↗, Press Kit↗, Contact
+  │
+  │     Column 5: "Community"
+  │       Community Stories, Ambassadors, Slack, X/Twitter↗,
+  │       GitHub↗, Dribbble↗
+  │
+  │     Column 6: "By Raycast"
+  │       Try Raycast AI↗, Explore Snippets↗,
+  │       Explore Quicklinks↗, Prompts↗, Chat Presets↗,
+  │       ray.so↗, Icon Maker↗, Merch↗, Wallpapers
+  │
+  │     Column headers:
+  │       font-size: 14px, weight: 500, color: white
+  │     Links:
+  │       font-size: 14px, weight: 500, color: #9C9C9D
+  │       External links have ↗ icon
+  │       hover: color transitions to white
+  │
+  └── Newsletter Section
+        margin-top: ~80px
+        border-top: 1px solid rgba(255,255,255,0.06)
+        padding: ~48px 0
+        display: flex, justify-content: space-between
+
+        ├── Left: text
+        │     H5 "Subscribe to our newsletter." (white, 14px, 500)
+        │     P "Get product updates and news in your inbox. No spam." (grey)
+        │
+        └── Right: form
+              display: flex, gap: 8px
+              ├── Email input
+              │     placeholder: "bjarne@cplusplus.com"
+              │     bg: rgba(255,255,255,0.05)
+              │     border: 1px solid rgba(255,255,255,0.05)
+              │     border-radius: 8px
+              │     padding: 8px 12px
+              │     height: 42px
+              │     font-size: 14px
+              └── "Subscribe" button (primary style)
+
+              Disclaimer text below (14px, rgba(255,255,255,0.4))
+              "By submitting your email address, you agree to receive..."
+```
+
+---
+
+### Newsletter (embedded in Footer — see Footer section above)
+
+The newsletter is part of the footer. See the Footer section for full structure.
+
+---
+
+## Sections NOT present on homepage
+
+The following requested sections were **not found** on the Raycast homepage. They may exist on other pages:
+
+| Section | Notes |
+|---------|-------|
+| **About** | No dedicated about section on homepage; see `/manifesto` |
+| **Blog** | Link in nav goes to `/blog`; no blog preview on homepage |
+| **Comparison** | No comparison table on homepage; see `/raycast-vs-alfred` |
+| **Contact** | Footer link to `/contact` |
+| **Downloads** | Download CTAs embedded in Hero and CTA sections |
+| **FAQ** | Footer link to `/faq`; no FAQ section on homepage |
+| **Pricing** | Nav link to `/pricing`; no pricing section on homepage |
+| **Stats** | No dedicated stats section |
+
+---
+
+## Global Patterns
+
+### Section Title Pattern (reusable)
+Every major section follows this title pattern:
+```
+Container: text-align center (or left for split layouts)
+├── H2: bold statement/hook
+│     font-size: 20px, weight: 500, color: white
+└── P: supporting description
+      font-size: 20px, weight: 500, color: #6A6B6C
+margin-bottom: 64px
+```
+
+### Card Pattern (reusable)
+```
+background: transparent or very subtle dark fill
+border: 1px solid rgba(255,255,255,0.06)
+border-radius: 12px (content cards) or 20px (extension cards)
+padding: 0 (content bleeds to edges) or 24-32px (text cards)
+overflow: hidden
+```
+
+### Section Spacing Pattern
+```
+Each major section:
+  padding: 224px 24px (top and bottom)
+  max-width: 1204px (via container)
+  margin: 0 auto (centered)
+```
+
+### Dark Theme Approach
+- Near-black background (`#07080A`) — not pure black
+- White text for primary content
+- Grey (`#6A6B6C` / `#9C9C9D`) for secondary text
+- Ultra-subtle borders: `rgba(255,255,255,0.06)`
+- Blur effects on overlays: `backdrop-filter: blur(5px)`
+- No visible card backgrounds — borders define boundaries
+- Red/coral brand color used sparingly in hero art and accent elements