DESIGN.md · diff
git:20261018.5dfc7cd to git:20261107.ef130b4
16 added, 19 removed. Audit A to A.
# Design
- Authoritative long-form system: `docs/design-system/ptah-content-brand.md` ("Egyptian Sacred Tech v2"). Live token source: `apps/ptah-landing-page/tailwind.config.js` (daisyUI `anubis` theme). This file is the quick reference.
+ Live token source for the marketing site: `apps/ptah-landing-page/tailwind.config.js` (daisyUI theme `operator`, set through `data-theme="operator"` in `apps/ptah-landing-page/src/index.html`). If this file and the config disagree, the config wins.
## Theme
- Dark, dramatic, premium. Obsidian page ground with a single gold accent family. Egyptian sacred-tech: hieroglyph-circuit patterns, scarab/ankh/Horus textures used as atmospheric depth layers, never as clipart foregrounds.
+ Dark, single amber accent. Near-black ink backgrounds, amber for the primary action and glow, emerald for secondary and success.
- ## Color Palette
+ ## Color
- - Backgrounds: Obsidian `#0a0a0a` (`base-100`, page), Charcoal `#1a1a1a` (`base-200`, cards), Smoke `#2a2a2a` (`base-300`, elevated), `slate-950` overlays for blue-black section warmth.
- - Text: Cream `#f5f5dc` primary, `#d1d5db` body, `#9ca3af` list/muted, White for high-emphasis headings.
- - Accent (only family): Gold `#d4af37` (`secondary`), Gold Light `#f4d47c` (`accent`), Gold Dark `#8a6d10`; glow alphas 0.2/0.35/0.5.
- - Semantic: Lapis `#1e3a8a` (`primary`), Scarab Teal `#2dd4bf` (Thoth accents), Emerald success, Firebrick error, Amber warning.
+ - Backgrounds: `base-100` `#08090c`, `base-200` `#0e1015`, `base-300` `#171a21`. The `ink` scale (`ink-950` to `ink-100`) is also available.
+ - Text: `base-content` `#e9ebef`. The muted tier is `base-content-muted` (measured at 5.46:1; checked by `apps/ptah-landing-page/src/app/base-content-muted.spec.ts`). Do not use `text-base-content/NN` for muted text: `no-alpha-base-content.spec.ts` guards it.
+ - Accent: `primary` `#f5a524` (amber; `amber-400/500/600` are `#ffbb4d`, `#f5a524`, `#c97e0e`), `accent` `#ffbb4d`.
+ - Semantic: `secondary` and `success` `#34d399`, `info` `#38bdf8`, `warning` `#eab308`, `error` `#fb7185`.
## Typography
- - Display: Cinzel (`font-display`) — hero/section headlines only.
- - Body/UI: Inter (`font-sans`). Mono: JetBrains Mono (`font-mono`).
- - Scale: hero `text-5xl→text-8xl`, section `text-4xl→text-6xl`, card `text-xl/2xl`, body `text-base→text-xl` lead.
- - Headlines are power statements ending in periods. Gold gradient span permitted on one phrase per headline.
-
- ## Layout & Spacing
-
- 8px grid. Sections `py-24 sm:py-32`, container `max-w-7xl mx-auto px-6 sm:px-10 lg:px-16`, card grids `gap-6 lg:gap-8`, cards `p-8`. Radii: buttons `rounded-md`, cards `rounded-2xl`, section containers `rounded-3xl`, pills `rounded-full`. Adjacent sections must not repeat the same layout skeleton.
+ - Sans: Inter (`font-sans`). Mono: JetBrains Mono (`font-mono`). Both load from Google Fonts in `index.html`.
+ - There is no display face. The config notes that Cinzel was removed.
+ - Extra sizes: `text-8xl` and `text-9xl` with tight line height and negative tracking.
- ## Components
+ ## Shape
- Section header (eyebrow → headline → subheadline), glassmorphism feature card (gold 0.2 border → 0.4 hover), step-number badge, rotating-beam hero CTA (`.cta-glow-button`), ghost arrow link, gradient divider, check-list item, pill badges. Icons: lucide-angular, stroke 1.5, gold on interactive.
+ `--rounded-box` 0.75rem, `--rounded-btn` 0.5rem, badges fully rounded.
## Motion
- All motion via `@hive-academy/angular-gsap` (`viewportAnimation` one-shots, `scrollAnimation` scrubs, `agsp-scroll-timeline` / hijacked patterns for pinned sequences). Ease `power2.out`, durations 0.6–0.8s, grid stagger `0.1 + index*0.12` capped 0.5s. Parallax depth layers at speed 0.2–0.5, scrub 1–1.5. Reduced-motion handled globally by the library; custom keyframes need explicit reduce overrides.
+ GSAP (`gsap`, `ScrollTrigger`, `MotionPathPlugin`) drives the hero, the final CTA and the always-on loop diagram. Tailwind animations in the config: `glow-pulse`, `pulse-ring`, `divider-draw`, `status-blink`. Section CSS carries `prefers-reduced-motion` overrides where it animates.
## Assets
- `apps/ptah-landing-page/public/assets/`: Egyptian textures (`textures/`: ankh-sphere, eye_of_horus, scarab, sun_disk_ra), backgrounds (`backgrounds/`: floating_obelisks, hieroglyph-circuit-pattern, pyramid_energy_apex, temple-bg), product screenshots (`images/showcase/`: panel-orchestration, panel-plugins, panel-providers, panel-setup-wizard, ptah-mcp-server, ptah-openrouter, ptah-setup-wizard, ptah-visual-interface).
+ `apps/ptah-landing-page/public/assets/`: `live-demo/` (clip posters and videos), `og/`, `showcase/` screenshots under `images/`, `textures/`, `backgrounds/`, `icons/` (including `glyphs/`).
+
+ Icons come from `lucide-angular` (`libs/web/ui/src/lib/navigation.component.ts` uses it).