Coinbase Trust Blue demo
Coinbase Trust Blue

A clean, trust-focused fintech landing page style inspired by Coinbase, featuring blue accents, generous whitespace, and professional minimalism suited for crypto and financial platforms.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 18.6 KB · 2438 words
# SYSTEM PROMPT — CODING AGENT TASK: "COINBASE TRUST BLUE" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt — output the final, complete, runnable code in a single response. No partial deliveries, no commentary, no questions. **All user-facing copy must be written in English.**

---

## 0. PROJECT BRIEF & THEME SPECIFICATION

**0.1 Mission**
- Build a responsive landing page for a **fictional** institutional crypto platform (invent a lowercase brand wordmark, e.g., "vaultline"; never present the page as the real Coinbase company; do not copy Coinbase's actual marketing copy).
- Required sections, in order: sticky **Header** (global), **Hero**, **Features** (3 cards), **How It Works** (3 steps), **Testimonials**, **Pricing** (3 tiers), **FAQ**, **Final CTA**, **Footer** with secondary links.
- Author all copy yourself: concise, institutional, trust-focused English. **No lorem ipsum.**

**0.2 Theme Identity — "Coinbase Trust Blue"**
- Era: 2024–2026 institutional crypto. Clean fintech, type-led hierarchy, generous whitespace.
- **One singular trust accent:** Coinbase Blue `#0052ff`. No gradients, no secondary accent hues; green/red reserved exclusively for success/error semantics.
- **Binary light/dark:** a complete light theme and a complete dark theme (see 1.3).

**0.3 Color Tokens — bind exactly** (light theme in `:root`; dark overrides in `.dark`)

```css
:root {
  --primary: #0052ff;         /* Coinbase Blue — FILLS only: buttons, badges, CTA panel */
  --secondary: #578bfa;       /* Hover Blue — hover fills + blue text/icons on dark surfaces */
  --link-blue: #0667d0;       /* blue text/icons on light surfaces */
  --bg-primary: #ffffff;      /* see Exception clause in 1.2 */
  --bg-secondary: #eef0f3;    /* Cool Gray surface: light cards, step surface */
  --bg-inverse: #0a0b0d;      /* alternating dark sections */
  --card-inverse: #282b31;    /* Dark Card — cards on dark sections */
  --text-primary: #0a0b0d;    /* Near Black */
  --text-secondary: #5b616e;
  --text-inverse: #fefefe;    /* text on dark surfaces */
  --text-success: #15803d;
  --text-error: #dc2626;
  --border-default: rgba(91, 97, 110, 0.2);
  --border-success: #15803d;
  --border-error: #dc2626;
  --focus-ring: #0a0b0d;      /* light surfaces; dark sections scope it locally to #fefefe */
  --radius-sm: 8px;
  --radius-md: 12px;          /* cards */
  --radius-lg: 24px;           /* large panels */
  --radius-pill: 56px;         /* signature buttons */
  --shadow-sm: 0 1px 2px rgba(10, 11, 13, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 11, 13, 0.12);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-dropdown: 100;           /* sticky header, mobile menu */
  --z-modal: 200;
  --z-toast: 300;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-base: 'Inter', system-ui, sans-serif;
}
.dark {
  --link-blue: #578bfa;
  --bg-primary: #0a0b0d;
  --bg-secondary: #282b31;
  --bg-inverse: #15181e;
  --card-inverse: #282b31;
  --text-primary: #fefefe;
  --text-secondary: #9aa1ad;
  --text-inverse: #fefefe;
  --text-success: #4ade80;
  --text-error: #f87171;
  --border-success: #4ade80;
  --border-error: #f87171;
  --border-default: rgba(238, 240, 243, 0.2);
  --focus-ring: #fefefe;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
}
```

- **Accent usage law:** `--primary` (#0052ff) is for **filled** elements only (buttons, badges, CTA panel). Blue **text/icons** on light surfaces use `--link-blue`; blue **text/icons** on dark surfaces use `--secondary` (#578bfa) — this holds in both themes (all surfaces are dark in the dark theme, so blue text/icons are always #578bfa there).
- **Contrast pairing law:** every light background token pairs with a dark text token, and every dark background token pairs with a light text token, in **both** themes (e.g., `--bg-inverse` ↔ `--text-inverse`, `--bg-primary` ↔ `--text-primary`). Verify every pairing.

**0.4 Typography — Four-Role Font System**
- **Display role** (hero h1, section h2s, CTA panel headline): `'Inter Tight'` via Google Fonts; hero h1 `font-size: clamp(2.75rem, 7vw, 5rem)` (80px cap), `font-weight: 400`, `line-height: 1.00`; section h2 `clamp(2rem, 4vw, 2.75rem)`, `line-height: 1.1`.
- **Sans/UI role** (nav, buttons, labels, card titles, prices, badges): `'Inter'`, `font-weight: 600`.
- **Text/body role** (paragraphs, descriptions): `'Inter'`, `font-size: 18px`, `font-weight: 400`, `line-height: 1.56`.
- **Icons role:** Google Material Symbols (Rounded), default 24px.
- Keep the four **roles** structurally distinct in CSS (`--font-display`, `--font-ui`, `--font-base`) even where one Google family serves two roles.

**0.5 Signature Visual Rules**
- **56px pill buttons** (`--radius-pill`) with `text-transform: lowercase` — a deliberate signature. Scope lowercase to: button labels, section eyebrows, badges, the brand wordmark. **Never** lowercase headlines or body copy. Apply via CSS transform only; do not rewrite source text.
- **12px cards** (`--radius-md`); large panels `--radius-lg`.
- **Section alternation map (light theme):** Header (theme-aware) → Hero **light** → Features **dark** → How It Works **light** (surface `--bg-secondary`) → Testimonials **dark** → Pricing **light** → FAQ **dark** → Final CTA **light** (with `--primary` panel) → Footer **dark**. In the dark theme every section renders dark, preserving rhythm via surface tokens.
- **Hover:** filled blue elements transition background `#0052ff → #578bfa` over `var(--transition-fast)`.
- **Focus:** `outline: 2px solid; outline-offset: 2px`, colored `var(--focus-ring)` — near-black on light surfaces, `#fefefe` on dark surfaces (dark sections override `--focus-ring` locally). Never `outline: none`.

**0.6 Page Composition — build top to bottom**
- **Header (sticky):** flex row, `align-items: center`, space-between; lowercase wordmark; anchor links (Features / How it works / Pricing / FAQ) in `--font-ui` 600; **theme toggle** (per 1.3); pill CTA "get started". Background `--bg-primary` + 1px `--border-default` bottom border; `z-index: var(--z-dropdown)`. On mobile, nav links collapse behind a Material Symbol `menu` button (`aria-expanded`, `aria-controls`).
- **Hero (light):** centered flex column; lowercase eyebrow; Display h1 per 0.4; 18px/1.56 subcopy in `--text-secondary` (max-width ~36rem); two CTAs: `.btn .btn--primary` "get started" + `.btn .btn--secondary` "explore the platform"; trust strip of 3 lowercase items, each a Material Symbol + text (e.g., "regulated", "insured custody", "24/7 support").
- **Features (dark):** eyebrow + h2 in `--text-inverse`; 3 `.card`s on `--card-inverse` in a wrapping flex row → single column ≤768px; each card: Material Symbol icon (e.g., `shield`, `verified_user`, `bolt`) tinted `--secondary`, title in `--font-ui` 600, description, and a "learn more" text link in `--secondary`; hover lift per 2.2. Angles: cold-storage custody, regulated & licensed, real-time settlement.
- **How It Works (light, `--bg-secondary` surface):** 3 steps, wrapping flex row → column; each: "01/02/03" badge (pill, `--primary` fill, white text), step title, description; optional CSS-only connector line, hidden on mobile. Copy arc: create account → verify identity → fund & invest.
- **Testimonials (dark):** 3 quote cards (`--card-inverse`): 5-star rating (Material Symbol `star`, `font-variation-settings: 'FILL' 1`, wrapper `aria-label="Rated 5 out of 5"`), quote in the Text role, author row: CSS initials avatar (circle, `--primary` fill, white initials) + name (`--font-ui` 600) + role (`--text-secondary`). Fictional names/roles.
- **Pricing (light):** eyebrow + h2 + subcopy; 3 tier cards on `--bg-secondary`, wrapping flex row → column; middle tier `.card--featured`: 2px `--primary` border, `--shadow-md`, lowercase pill badge "most popular" (`--primary` fill, white text). Each tier: name (lowercase, UI 600), price (Display, ~2.5rem — e.g., $0 / $29 / custom), feature list (Material Symbol `check` + text), CTA (`.btn--primary` featured, `.btn--secondary` others, "contact sales" for custom). Optional accessible billing toggle (`role="switch"`, `aria-checked`).
- **FAQ (dark):** 6 Q&As (security/cold storage, insurance, fees, regulation, withdrawals, support). Accordion: `h3 > button` full-width flex (`justify-content: space-between`), `aria-expanded` + `aria-controls`, Material Symbol `expand_more` rotating 180° when open; panel `role="region"` + `aria-labelledby`, animated via CSS (`grid-template-rows: 0fr → 1fr`, `var(--transition-normal)`); native-button keyboard operability; optional one-open-at-a-time JS.
- **Final CTA (light):** full-width panel: `--primary` fill, `--radius-lg`, generous padding; Display h2 in `#fefefe`; `.input-group` email capture — `input type="email"` (bg `#fefefe`, text `#0a0b0d`) + `.btn` white-filled with `--primary` text, "get started". On submit (JS, `preventDefault`): invalid → `.is-invalid` styles + error icon + message in `.input-group__error` (`aria-live="polite"`); valid → button `.is-loading` (spinner) → `.is-success` "you're in" + success message in `--text-success` inside the live region.
- **Footer (dark):** flex-wrap brand block (wordmark, tagline) + 3–4 link columns (product, company, support, legal; 4–5 links each in `--secondary`, underline on hover/focus); bottom bar with copyright and lowercase legal links, space-between → stacked on mobile.

---

## 1. STRICT RULES & ARCHITECTURE TO ENFORCE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** any `style="..."` attribute, any `<style>` block, any inline SVG.
- Target styles exclusively via class/ID selectors over semantic HTML5 markup (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`, exactly one `h1`, logical heading order).
- HTML must remain presentation-agnostic: restyling later must require edits to `style.css` only, never markup.

**1.2 CSS Variables & Theme Tokens**
- Declare and consume every token from 0.3 — no hard-coded colors, radii, shadows, durations, or z-index values outside `:root`/`.dark`.
- Include the mandatory semantic set even where lightly used: `--text-success`, `--text-error`, `--border-success`, `--border-error`, `--z-modal`, `--z-toast`.
- **Near-white rule:** any near-white surface uses `#fefefe`, never `#ffffff`. **Exception (explicit):** the Coinbase Trust Blue spec demands binary white/dark sections, so `--bg-primary` may be `#ffffff` in the light theme only — every other near-white surface (all dark-theme text/surfaces) uses `#fefefe`.
- Enforce the contrast pairing law (0.3) across both themes and all inverse sections.

**1.3 Mandatory Dark Mode Support**
- Provide dark tokens under a `.dark` class **and** honor `@media (prefers-color-scheme: dark)` as the first-visit default.
- Visible **theme toggle** in the header: Material Symbol `dark_mode`/`light_mode`, `aria-pressed="true"` when dark is active, `aria-label="Toggle dark mode"`; persist the choice in `localStorage` (e.g., key `theme`); on load: stored value → else media query → apply the class to `<html>`.
- Theme switching flips tokens only — no HTML restructuring, no duplicated markup; header, cards, forms, and every state must remain fully legible in both themes.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox (`display: flex` / Tailwind flex utilities): header, section rows, card rows, pricing, footer.
- **Every flex container defaults to `align-items: center`** (`items-center`). Documented exceptions only: text stacks inside cards/steps and footer link columns (`flex-start`, for readability), accordion panels.
- Mobile-first: multi-column rows collapse to a single column ≤768px; zero horizontal scrolling at any viewport ≥320px; fluid type via `clamp()`.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (Play CDN or compiled) **or** clean custom CSS in `style.css` following Tailwind's `@layer`/`@apply` philosophy. In either case, all colors/radii/shadows/motion come from the CSS variables, and reusable component classes (`.btn`, `.card`, `.input-group`) are defined once and reused.
- Utilities may handle layout (spacing, wrapping, responsive direction) but must never bypass the token system.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load via Google Fonts `<link>` tags (with `preconnect`): `Inter Tight` (400) and `Inter` (400, 600), bound to `--font-display`, `--font-ui`, `--font-base`.
- Icons: Google Material Symbols (Rounded) stylesheet; render as `<span class="material-symbols-rounded">icon_name</span>`. **Forbidden:** inline SVGs, local icon files, emoji icons, third-party icon packs.
- **Exception clauses (explicit):** (a) the spec names proprietary Coinbase fonts (CoinbaseDisplay/Sans/Text) that are not distributed on Google Fonts — bind the closest Google Fonts equivalents as mapped in 0.4 and never load self-hosted or proprietary font files; (b) the spec's `font-family: system-ui` applies only as the fallback stack after the Google families; (c) the proprietary "Coinbase Icons" set is replaced by Google Material Symbols.

---

## 2. COMPONENT DESIGN SPECIFICATIONS TO ENFORCE

**2.1 Button Component Requirements** (`.btn` + `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`; transient `.is-loading`, `.is-success`, `.is-error`, `.is-disabled`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min-height 48px (never below a 44×44px touch target); `padding-inline: 1.5rem; border-radius: var(--radius-pill);` `--font-ui`, weight 600, `text-transform: lowercase`; `transition: var(--transition-fast) var(--ease-standard)`.
- **Primary fill:** bg `--primary`, label `#fefefe`. **Hover:** bg → `--secondary` (#578bfa) **and label color → `#0a0b0d`** (white on #578bfa fails contrast), plus `--shadow-md`, `cursor: pointer`.
- **Secondary/ghost:** transparent bg, 1px `--border-default`, `--text-primary`; hover: border-color `--primary` + faint blue tint.
- **Focus:** `:focus-visible` → `outline: 2px solid var(--focus-ring); outline-offset: 2px`; never remove outlines.
- **Active/pressed:** `transform: scale(0.97)`.
- **Loading:** `aria-busy="true"`, pointer-events disabled (prevents double-clicks/double submits), rotating Material Symbol `progress_activity` spinner; reserve a fixed 1em spinner box so button dimensions never distort.
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no hover/active transforms.
- **Success/Error:** temporary feedback styles driven by `--text-success`/`--text-error` (+ icon + live-region text), as specified for the Final CTA form.

**2.2 Card Component Requirements** (`.card`, `.card--featured`, `.card--skeleton`, `.card--empty`)
- **Default:** flexbox column layout with `gap: var(--spacing-gap)`; bg `--bg-secondary` (light sections) or `--card-inverse` (dark sections); 1px `--border-default`; `border-radius: var(--radius-md)`; padding 1.5–2rem; `--shadow-sm` elevation.
- **Hover:** `transform: translateY(-2px)` + `--shadow-md`, `transition: var(--transition-normal) var(--ease-standard)`.
- **Focus-within:** border color shifts to the section's blue accent when a child link/button receives focus.
- **Skeleton:** define `.card--skeleton` shimmer (CSS gradient-sweep animation) that never shifts layout.
- **Empty:** define `.card--empty` — centered Material Symbol (~40px) + guidance text — even if not rendered by default.

**2.3 Form & Input Requirements** (`.input-group`, `.input-group__field`, `.input-group__error`)
- Structure: a flex column wrapping a `<label for>` (may be visually hidden via a `.visually-hidden` utility if design requires, but must exist), the `<input>`, and a dedicated error-feedback container with reserved min-height (no layout jump) and `aria-live="polite"`.
- Field: min-height 48px, 1px `--border-default`, theme surface bg, generous padding, `--font-base` 18px.
- **States styled:** empty; focused (border `--primary` + focus ring per 0.5); filled; valid (`.is-valid`: `--border-success` + `check` icon); invalid (`.is-invalid`: `--border-error`, error icon, message text in `--text-error`); disabled (`opacity: 0.5`, `cursor: not-allowed`); read-only (tinted bg).
- Never communicate state by color alone — always icon + text message.

**2.4 Modal / Popup Requirements (conditional)**
- No modal is required for this brief. If you add any optional modal (e.g., a "watch demo" dialog), it must implement: `role="dialog"` + `aria-modal="true"`; opening/open/loading/success/error/closing states animated via CSS transitions; a centered flex container (`align-items: center`) with backdrop `rgba(10, 11, 13, 0.6)`; a Material Symbol `close` button; keyboard focus trapping with focus return; close via `Esc` and backdrop click.

---

## 3. CORE UX & MICRO-INTERACTION RULES TO ENFORCE
- **Responsive by default:** fluid `clamp()` typography, flex-wrap layouts, zero horizontal overflow from 320px up.
- **Smooth animations:** every state change transitions with `var(--transition-fast)`/`var(--transition-normal)` + `var(--ease-standard)`; honor `prefers-reduced-motion: reduce` by disabling transforms, spinner rotation, and shimmer.
- **Accessibility:** WCAG AA contrast in light **and** dark modes; a skip-to-content link; semantic landmarks; logical DOM/focus order; full keyboard operability (no mouse-only interactions); ARIA only to augment semantics (toggle `aria-pressed`, accordion `aria-expanded`/`aria-controls`, switch `aria-checked`); `aria-live` regions for all dynamic feedback (form errors, submit status).
- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.
- **Destructive actions:** define `.btn--danger` (error-red fill/border, visually distinct in both themes) even if unused on this page.

---

## 4. DELIVERABLE & OUTPUT FORMAT
- Exactly three files: `index.html`, `style.css`, `script.js`. The only script reference is a single deferred entry point: `<script src="script.js" defer></script>`. No inline scripts, no inline styles, no inline SVGs. `script.js` contains only: theme toggle + persistence, accordion behavior, CTA form validation/loading/success handling, optional billing toggle, optional mobile-menu toggle, current-year stamp.
- **Naming convention:** one convention only — BEM (`.hero__title`, `.card--featured`, `.input-group__error`) with `.is-*` for transient states. Never mix conventions.
- **No unrequested placeholders:** no lorem ipsum; write real English fintech copy for every headline, label, and description.
- Output the complete code for all three files in one response, runnable by opening `index.html` directly. **Generate the final code immediately — first attempt, fully finished.**