docs(web): sync social preview design tokens

Author: code-yeongyu

packages/web/DESIGN.md

@@ -1,21 +1,25 @@
 # LazyCodex Design System
 
 ## 1. Core Philosophy
-- **Codex-tone Luminous Backdrop**: The page uses a dark navy canvas (`#14154d`) with a centered, glowing card.
-- **Card-in-Canvas Architecture**: The main content lives inside a 1200x630px card with a complex radial gradient, mimicking the OpenGraph image.
+- **Codex-tone Luminous Backdrop**: The page uses a near-black canvas (`#0a0a0a`) with a centered, glowing teal card.
+- **Card-in-Canvas Architecture**: The main content lives inside a 1200x630px card with a complex radial gradient, and the OpenGraph image mirrors that HTML card instead of using a separate visual language.
 - **Typography**: Clean, geometric sans-serif (Geist Sans) for the wordmark and tagline, with monospace (Geist Mono) for eyebrows and footers.
 
 ## 2. Color Palette
-- `--surface-base`: `#14154d` (Dark navy canvas)
-- `--card-base`: `#2a2dbf` (Card base color)
-- `--brand-core`: `#5a5fef` (Gradient core)
-- `--brand-mid`: `#3236c4` (Gradient mid)
-- `--brand-outer`: `#232897` (Gradient outer)
+- `--surface-base`: `#0a0a0a` (Near-black canvas)
+- `--card-base`: `#0E1115` (Panel and hero card base)
+- `--brand-core`: `#008385` (Teal gradient core)
+- `--brand-mid`: `#006668` (Gradient mid)
+- `--brand-outer`: `#004d4e` (Gradient outer)
 - `--text-primary`: `#ffffff` (White)
-- `--text-secondary`: `#dcdcf8` (Light lavender)
-- `--text-tertiary`: `#b9bce6` (Muted lavender)
+- `--text-secondary`: `#99A1AF` (Muted gray)
+- `--text-tertiary`: `#8A93A2` (Soft gray)
 - `--text-muted`: `rgba(255, 255, 255, 0.72)` (Translucent white)
-- `--text-soft`: `#e8e8ff` (Soft white)
+- `--text-soft`: `#E4FFFF` (Soft cyan-white)
+- `--accent-cyan`: `#87F0F2` (Primary accent)
+- `--accent-teal`: `#008385` (Secondary accent)
+- `--accent-mint`: `#B3FEFF` (Highlight accent)
+- `--accent-glow`: `#ABF5F7` (Glow accent)
 
 ## 3. Typography Scale
 - **Wordmark**: `clamp(64px, 12vw, 168px)`, medium weight, tight tracking (`-0.03em`).
@@ -29,15 +33,15 @@
 - **Outer Elements**: The canvas may carry small co-brand labels outside the card when needed, but the current public landing page leads with installable Codex setup instead of launch timing.
 
 ## 5. Gradients & Effects
-- **Base Gradient**: Radial gradient from `#5a5fef` to `#232897`.
+- **Base Gradient**: Radial gradient from `#008385` through `#006668` and `#004d4e` into `#0a0a0a`.
 - **Beam**: Screen blend mode, soft white light pouring from top-left.
 - **Sheen**: Screen blend mode, diagonal linear gradients with blur.
-- **Pools**: Screen blend mode, subtle violet pools at bottom-left and top-right.
+- **Pools**: Screen blend mode, subtle teal/cyan pools at bottom-left and top-right.
 - **Grain**: Overlay blend mode, SVG fractal noise.
 
 ## 6. Co-brand layer (Sisyphus Labs)
 
-Sisyphus Labs colors are used as accents across the landing page while the navy Codex card stays the hero centerpiece.
+Sisyphus Labs colors are used as accents across the landing page while the black/teal Codex card stays the hero centerpiece.
 
 - **Cyan**: `#87F0F2`
 - **Teal**: `#008385`
@@ -63,8 +67,8 @@ The landing page is a single scrollable document with the following sections, to
    - "Docs" link
    - "by Sisyphus Labs" co-brand
 
-2. **Hero navy card**
-   - Eyebrow: "LAZYCODEX AI"
+2. **Hero luminous card**
+   - Eyebrow: "CODEX FOR NO-BRAINERS"
    - H1 wordmark
    - Tagline: "You don't need to ultrathink. / Just prompt {your prompt} ultrawork."
    - The `{your prompt}` placeholder uses Geist Mono and pulses subtly
@@ -112,7 +116,8 @@ The landing page is a single scrollable document with the following sections, to
 
 ## 9. Image pipeline
 
-- **Boulder art**: Generated via `imagegen` on a chroma background, keyed to alpha so it composites cleanly on the navy canvas without a visible bounding box
+- **OpenGraph / Twitter card**: `app/opengraph-image.tsx` and `app/twitter-image.tsx` use `next/og` and inline the same black/teal tokens, gradient layers, wordmark, tagline, `{your prompt}` pill, URL, and install command seen in the HTML hero.
+- **Boulder art**: Generated via `imagegen` on a chroma background, keyed to alpha so it composites cleanly on the dark canvas without a visible bounding box
 - **Delivery format**: Served as AVIF / WebP / PNG via a `<picture>` element using the `BrandImage` component
 - **Dimensions**: Explicit `width` and `height` attributes on every image to prevent CLS
 - **Favicon / app-icon**: The simplified boulder mark from the sticky header is the canonical site icon so browser chrome, pinned tabs, and the in-page wordmark read as one identity: