# The Hive — Design System Prompt (Stand-alone) Paste this entire prompt at the **start** of a Claude / Cursor / ChatGPT session. It is self-contained: every token, scale, and component pattern is defined inline. You do **not** need any companion file (no `tokens.json`, no `tokens.css`, no `PROMPT.md`, no `preview.html`) to apply this system. --- ## SYSTEM PROMPT (copy everything below) You are building UI that must match **The Hive Practice design system**. Every visual decision must come from the tokens and patterns declared in this prompt. Do not invent colors, font sizes, shadows, radii, durations, or easings outside this document. ### Hard rules 1. **Drop in the tokens.** Paste the `:root` block below at the top of the project's global stylesheet. 2. **Load the fonts.** Add the `` snippet below to every page. 3. **Only use CSS custom properties** for color, font, radius, and motion. No raw hex/rgba/magic numbers in component CSS except for the explicit shadow recipes listed below. 4. **Prefer canonical names** (`--accent`, `--surface-base`, `--ink-primary`). Legacy aliases (`--amber*`, `--void`, `--text-*`) exist only for back-compat — do not introduce them in new code. 5. **Typography is role-based.** Use the typography roles listed below. Do not choose arbitrary `rem` sizes. 6. **Motion is tokenized.** Transitions and animations use `--duration-*` + `--ease-*`. The named keyframes (`fadeUp`, `stepIn`, `shimmer`, `urgencyPulse`, `bannerScroll`) are defined below — reuse them. 7. **Accessibility floor.** Honor `prefers-reduced-motion: reduce` by disabling transforms/animations. Focus ring is `box-shadow: 0 0 0 3px rgba(30,90,63,0.12); border-color: var(--accent);`. --- ### 1. Tokens — paste into your global CSS ```css :root { /* Surfaces */ --surface-base: #f6f7f3; --surface-elev: #ffffff; --surface-sunk: #eef0ea; --surface-glass: rgba(255, 255, 255, 0.72); /* Accent (evergreen) */ --accent: #1e5a3f; --accent-glow: #2e7a55; --accent-soft: #4d9a74; --accent-deep: #0f3a2a; --accent-dim: rgba(30, 90, 63, 0.08); --accent-border: rgba(30, 90, 63, 0.22); /* Ink + rule */ --ink-primary: #0f1a14; --ink-secondary: #4a544a; --ink-dim: #7d887e; --rule: rgba(15, 26, 20, 0.1); /* Semantic */ --color-error: #c45e5e; /* Typography */ --font-display: 'Urbanist', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* Layout */ --section-pad: clamp(5rem, 10vh, 9rem); --content-max: 1200px; --content-narrow: 800px; /* Motion */ --duration-fast: 0.3s; --duration-medium: 0.35s; --duration-header: 0.4s; --duration-slow: 0.5s; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-expressive: cubic-bezier(0.22, 1, 0.36, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 900px) { :root { --section-pad: 4rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15ms !important; } } ``` --- ### 2. Fonts — paste into `` on every page ```html ``` Baseline document styles: ```css body { font-family: var(--font-body); background: var(--surface-base); color: var(--ink-secondary); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-primary); } a { color: var(--accent); text-decoration: none; } ``` --- ### 3. Typography roles (use by name — don't invent sizes) | Role | font-family | size | weight | letter-spacing | transform | color | |---|---|---|---|---|---|---| | `hero.title` | display | `clamp(2.8rem, 5vw, 4.2rem)` | 800 | -0.02em | — | `--ink-primary` | | `section.title` | display | `clamp(2rem, 3.5vw, 3rem)` | 800 | -0.01em | — | `--ink-primary` | | `hero.lede` | body | 1.18rem | 400 | — | — | `--ink-secondary` | | `hero.desc` | body | 1.05rem, line-height 1.85 | 400 | — | — | `--ink-secondary` | | `hero.promise` | display | 1.05rem | 700 | -0.005em | — | `--ink-primary` | | `wordmark` | display | 1rem | 800 | 0.04em | uppercase | `--ink-primary` | | `banner.track` | display | 0.95rem (0.78 ≤768px) | 800 | 0.18em | uppercase | `--surface-base` | | `nav.link` | display | 0.7rem | 700 | 0.14em | uppercase | `--ink-secondary` | | `nav.cta` | display | 0.65rem | 700 | 0.12em | uppercase | — | | `eyebrow / tag` | display | 0.65rem | 700 | 0.25em | uppercase | `--accent` | | `body.default` | body | 1rem (html base 16px) | 400 | — | — | `--ink-secondary` | --- ### 4. Component patterns (match these exactly) **Primary button** ```css background: var(--accent); color: var(--surface-base); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem 2.2rem; border-radius: 2px; border: 1.5px solid transparent; transition: all var(--duration-medium) var(--ease-standard); ``` Hover: `background: var(--accent-glow); transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 16px rgba(30,90,63,0.3);` **Secondary button** — transparent background, `color: var(--accent)`, `border: 1.5px solid var(--accent-border)`; hover `background: var(--accent-dim); border-color: var(--accent);` plus the same lift. **Nav CTA** — `padding: 0.55rem 1.4rem; border-radius: 3px; font-size: 0.65rem; letter-spacing: 0.12em;` otherwise identical to primary. **Chip / badge** — `background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent); border-radius: 100px; padding: 0.35rem 0.75rem;` type role `eyebrow`. Optional leading dot: `6×6, border-radius: 50%, background: var(--accent)`. **Card** — `background: var(--surface-elev); border: 1px solid var(--rule); border-radius: 6px; padding: 1.5rem;`. Shadow recipes: - Editorial / philosophy: `box-shadow: 0 20px 45px -30px rgba(15, 26, 20, 0.2);` - Front-door figure: `box-shadow: 0 25px 55px -30px rgba(15, 26, 20, 0.18);` - Header scrolled: `box-shadow: 0 4px 24px rgba(15, 26, 20, 0.08);` - Focus ring: `box-shadow: 0 0 0 3px rgba(30, 90, 63, 0.12); border-color: var(--accent);` **Form field** — label uses `eyebrow` role. Input: `background: var(--surface-base); border: 1px solid var(--rule); border-radius: 4px; padding: 0.8rem 0.9rem; font-family: var(--font-body); color: var(--ink-primary);`. Focus: the focus-ring recipe above. Invalid: `border-color: var(--color-error)`, error text `color: var(--color-error); font-size: 0.78rem;`. **Nav bar** — `background: rgba(246, 247, 243, 0.88); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--rule); border-radius: 6px;`. Link underline-on-hover animates `width 0 → 100%` on `::after` (`height: 1.5px; background: var(--accent);`) with `var(--ease-expressive)`. **Banner** — full-bleed `background: var(--accent); color: var(--surface-base);`. Content is a `display: inline-flex` track animating `bannerScroll 32s linear infinite`. Duplicate the items once so the `-50%` translation loops seamlessly. Dot separators between items: 6×6, 50% radius, `background: var(--surface-base); opacity: 0.55`. **Shimmering hero emphasis** — optional: wrap accent words in a span with `background: linear-gradient(90deg, var(--accent), var(--accent-glow), var(--accent-soft), var(--accent-glow), var(--accent)); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: shimmer 4s ease-in-out infinite;`. --- ### 5. Motion — named keyframes (paste into global CSS) ```css @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes stepIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { 0%, 100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } } @keyframes urgencyPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(30, 90, 63, 0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 10px rgba(30, 90, 63, 0); } } @keyframes bannerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } ``` Durations to pair with them: `fadeUp 0.8s var(--ease-reveal)`, `stepIn 0.8s var(--ease-standard)`, `shimmer 4s ease-in-out`, `urgencyPulse 1.8s ease-in-out`, `bannerScroll 32s linear`. --- ### 6. Scales you must honor - **Border-radius:** 1px (hairline), 2px (tight / buttons), 3px (nav CTA), 4px (small / inputs), 6px (medium / cards), 8px (large / dialogs), 100px (pill / badges), 50% (round / avatars). Do not use values outside this scale. - **Duration:** 0.3s, 0.35s, 0.4s, 0.5s, 0.7s, 0.8s, 0.9s, 4s, 32s. - **Easings:** `--ease-standard` for UI transitions, `--ease-expressive` for nav/underline reveals, `--ease-reveal` for content entrances. - **Breakpoints (px literals in `@media`):** 480, 640, 700, 720, 768, 860, 900. - **Z-index:** hero canvas 0, hero content 1, texture 2, elevated content 3, site header 90, banner 100, grain overlay 9999. --- ### 7. Before writing any CSS — checklist 1. Is there a token for the value I need? If yes, use it. Never hardcode a color, font size, radius, duration, or easing that is already in the token list above. 2. Is there a matching **typography role**? If yes, copy it verbatim. 3. Is a literal truly one-off (used once, and not a color / font / radius / motion)? Fine. Otherwise, add a new CSS custom property at the top of the file first, then reference it. 4. Does the component mirror one of the patterns in Section 4? If yes, match the spacing and class structure, don't remix. --- ### 8. Deliverables expected - HTML / JSX / Astro files that pass visual parity with the patterns in Section 4. - Zero new hardcoded colors / fonts / shadows outside what is declared above. - If you introduce a new token, add it to the `:root` block with a short comment explaining its role. ### 9. When asked for a brand-new section 1. Pick the nearest existing pattern (hero, card grid, form, banner, nav). 2. Scaffold with tokens. 3. Show the diff before applying it across multiple files. --- ## Quick-start snippet (drop into a blank `index.html`) ```html ``` That's everything you need — no companion files required.

Card with Image

Preview & Code

Usage

Tokens Used