OBSIDIAN-PRECISION

Obsidian Precision

Near-black developer aesthetic with custom geometric sans, hairline borders, radial glow depth, and surgical accent color.

Difficulty:★★★☆☆

Mood:Developer · Surgical · Near-Black · Precise · Technical

Dark & Monumental

Visual DNA

Deep near-black backgrounds (#0A0A0A to #111111) create an infinite canvas where content floats with surgical precision. Custom geometric sans (Geist for Vercel, custom for Linear), monospace for data. Radial gradient glows provide depth behind the hero. Hairline borders (border-white/5) create grid structure without visual weight. One accent color — violet, amber, or white — used surgically on CTAs and status indicators. The page feels like a mission control interface designed by someone who cares about kerning. Every element has a precise position. Nothing is accidental. The radial glow behind the hero creates depth without imagery — the darkness itself becomes atmospheric.

Design Principles

NEAR-BLACK, NEVER PURE

#0A0A0A to #111111. Pure #000 kills depth. The radial glow needs somewhere to bleed into. Near-black creates the infinite canvas feel while maintaining subtle depth between layers.

What it prevents: The flat, dead feeling of pure black that makes everything look like a terminal.

---

HAIRLINE AS STRUCTURE

1px borders at white/5 or white/10 create grid structure without visual weight. Bento grid cells, cards, and sections are separated by hairlines, not shadows or background changes. The border IS the layout.

What it prevents: Heavy borders, drop shadows, or colored backgrounds that add visual noise.

---

ACCENT AS SIGNAL

One color (violet #5E6AD2, amber, or white) used surgically on CTAs and status indicators only. The accent is a signal — it means "this is interactive" or "this is important." It never decorates.

What it prevents: Color used for decoration, gradients, or multiple accents that create visual chaos.

---

CUSTOM TYPE AS IDENTITY

Geist for Vercel, custom Linear font, proprietary type for Raycast. The font IS part of the brand identity. When custom fonts aren't available, use a clean geometric sans (Inter Tight, Satoshi) — never default to Inter Regular.

What it prevents: The AI default of Inter/Roboto that makes every site look the same.

---

RADIAL GLOW AS DEPTH

A subtle radial gradient behind the hero creates atmospheric depth without imagery. The glow color matches the brand accent. It's the "ambient light" of the interface — barely visible but essential for the premium feel.

What it prevents: Flat, lifeless dark backgrounds with no sense of atmosphere.

Typography System

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Custom geometric sans (brand-specific) |
| **Examples** | Geist (Vercel), Linear Custom, Inter Tight, Satoshi, Cabinet Grotesk |
| **Weight** | 500-600 (medium-semibold, not bold) |
| **Tracking** | -0.02em to -0.04em (tight, confident) |
| **Size** | `clamp(2rem, 5vw, 4rem)` — large but not monumental |
| **Transform** | Sentence case or title case (not all-caps) |

**Why custom:** The font is part of the brand identity. Geist, Linear Custom — these ARE the brands. When unavailable, Inter Tight or Satoshi are the closest alternatives.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display (or Inter as fallback) |
| **Examples** | Geist, Inter (400-500), Satoshi |
| **Weight** | 400-500 |
| **Tracking** | 0 to -0.01em |
| **Size** | `clamp(0.8rem, 0.4vw + 0.65rem, 0.95rem)` |
| **Line Height** | 1.5-1.6 |

---

## Monospace / Data Type

| Property | Specification |
|----------|--------------|
| **Register** | Monospace |
| **Examples** | JetBrains Mono, Geist Mono, Fragment Mono |
| **Weight** | 400 |
| **Tracking** | 0 |
| **Size** | Same as body or 1px smaller |
| **Usage** | Code snippets, numbers, technical labels, version tags |

---

## Type Scale

```
Display:  clamp(2rem, 5vw, 4rem)    — hero headline
Headline: clamp(1.5rem, 3vw, 2.5rem) — section titles
Subhead:  clamp(1rem, 1.5vw, 1.25rem) — card titles
Body:     clamp(0.8rem, 0.4vw + 0.65rem, 0.95rem)
Mono:     same as body or -1px
Micro:    0.7rem — tags, labels, version numbers
```

---

## Font Pairing Logic

**Display + Body:** Same family at different weights. Geist 500 + Geist 400. This creates visual harmony.

**Display + Mono:** Geometric sans + technical mono. The mono signals "this is data/code" while the sans handles everything else.

**Never:** Mix more than 2 families. Sans + mono is sufficient.

Color Architecture

# Color Architecture

## Ground

```css
--color-ground: #0A0A0A;    /* Primary background */
--color-ground-elevated: #111111; /* Cards, panels */
--color-ground-overlay: #161616;  /* Hover states */
```

**Never pure #000.** The near-black creates depth for radial glows and hairline borders.

---

## Text

```css
--color-text-primary: #EDEDED;   /* Primary text */
--color-text-secondary: #A0A0A0; /* Secondary, descriptions */
--color-text-muted: #666666;     /* Labels, metadata */
--color-text-inverse: #0A0A0A;   /* Text on accent buttons */
```

---

## Accent

```css
--color-accent: #5E6AD2;  /* Linear violet — the signature */
/* Alternatives: */
--color-accent-amber: #F5A623;  /* Vercel/Raycast amber */
--color-accent-white: #FFFFFF;  /* Pure white accent on dark */
--color-accent-blue: #3B82F6;   /* Standard blue */
```

**Rule:** ONE accent. Used on:
- Primary CTA buttons (filled)
- Active navigation state
- Status indicators (online, new, beta)
- Links in body text
- Icon accents

---

## Borders

```css
--color-border: rgba(255, 255, 255, 0.06);  /* Default hairline */
--color-border-hover: rgba(255, 255, 255, 0.12); /* Hover state */
--color-border-accent: rgba(94, 106, 210, 0.3);  /* Accent border */
```

**Hairline borders are structural.** They separate cards, define grid cells, and create visual hierarchy without adding weight.

---

## Radial Glow

```css
--color-glow: rgba(94, 106, 210, 0.15); /* Accent-colored radial glow */
```

Applied behind the hero as a large radial gradient. Creates atmospheric depth.

---

## The Color Rule

> **Near-black ground, one accent color used surgically, hairline borders for structure, radial glow for depth. No gradients, no multiple accents, no pure black.**

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure #000000 background | #0A0A0A to #111111 |
| Multiple accent colors | ONE accent, locked page-wide |
| Gradient backgrounds | Radial glow only (behind hero) |
| Purple-to-blue gradients | Solid accent color |
| Bright neon accents | Desaturated, sophisticated tones |
| White text on white accent | Use --text-inverse (#0A0A0A) |

Motion Principles

# Motion Principles

## Philosophy

Motion is **precise and purposeful**. Spring physics for interactions, staggered fade-up for entrances. Nothing decorative — every animation communicates hierarchy or feedback.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero headline | Opacity + translateY(8px)→0 | 600ms | `cubic-bezier(0.16, 1, 0.3, 1)` | 0ms |
| Hero subtext | Opacity + translateY(8px)→0 | 600ms | `cubic-bezier(0.16, 1, 0.3, 1)` | 100ms |
| CTA buttons | Opacity + translateY(8px)→0 | 600ms | `cubic-bezier(0.16, 1, 0.3, 1)` | 200ms |
| Feature cards | Opacity + scale(0.97)→1 | 500ms | `cubic-bezier(0.22, 1, 0.36, 1)` | stagger 0.06s |
| Bento cells | Opacity + translateY(12px)→0 | 500ms | `cubic-bezier(0.22, 1, 0.36, 1)` | stagger 0.08s |

**Key easing:** `cubic-bezier(0.16, 1, 0.3, 1)` — snappy but smooth. Faster than cinematic styles, slower than generic UI.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Fade-up on scroll | Elements fade up with translateY(12px)→0 on viewport entry |
| Stagger | 0.06-0.08s delay between sibling elements |
| Once | `viewport={{ once: true }}` — animate only on first entry |
| Parallax | None — this style doesn't use parallax |

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Nav links | Color → accent (200ms) | — |
| Primary CTA | Slight scale (1.02) + brightness increase | Scale 0.98 (tactile press) |
| Secondary CTA | Border opacity increase | — |
| Cards | Border color → border-hover (200ms) | — |
| Icons | Subtle scale (1.05) | Scale 0.95 |

**Spring physics for interactive elements:**
```css
transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
```

---

## Reduced Motion

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never | Why |
|----------|-----|
| Parallax scrolling | Too cinematic for this precise style |
| Marquee text | Lazy filler |
| Bounce easing | Feels playful, not professional |
| Rotating elements | Distracting from content |
| Auto-playing animations | User should control pacing |

Layout Grammar

# Layout Grammar

## Grid System

**Left-aligned heroes, bento grids for features.**

Content is left-aligned, not centered. This creates a technical, developer-focused feel. The bento grid uses asymmetric cell sizes for visual interest.

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | `min-h-[100dvh]` or auto with generous padding |
| Background | Near-black with radial glow behind content |
| Headline position | Left-aligned |
| Headline size | `clamp(2rem, 5vw, 4rem)` |
| Subtext | Below headline, max-width 540px |
| CTAs | Below subtext, horizontal row |
| Glow | Radial gradient centered behind headline area |

**Radial glow implementation:**
```css
.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vh;
  background: radial-gradient(
    ellipse at center,
    var(--color-glow) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
```

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 10vh, 8rem);
--content-max-width: 1200px;
--edge-padding: clamp(1.5rem, 5vw, 4rem);
```

---

## Bento Grid

```css
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; /* Hairline gap */
  background: var(--color-border); /* Creates border effect */
}

.bento-cell {
  background: var(--color-ground-elevated);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Asymmetric cells */
.bento-cell-wide {
  grid-column: span 2;
}

.bento-cell-tall {
  grid-row: span 2;
}
```

---

## Layout Patterns

### Pattern 1: Left-Aligned Hero with Glow
```
         [Radial glow behind]
┌─────────────────────────────────────┐
│                                     │
│  HEADLINE (left-aligned, large)     │
│  Subtext below (max 540px)          │
│  [CTA Primary] [CTA Secondary]      │
│                                     │
└─────────────────────────────────────┘
```

### Pattern 2: Bento Feature Grid
```
┌──────────┬──────────┬──────────┐
│  Card 1  │  Card 2  │  Card 3  │
│  (wide)  │          │          │
├──────────┴──────────┼──────────┤
│  Card 4             │  Card 5  │
│                     │  (tall)  │
└─────────────────────┴──────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | 3-col bento, left-aligned hero, radial glow |
| **Tablet (768px)** | 2-col bento, reduced glow |
| **Mobile (375px)** | 1-col stacked, no glow |

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered hero | Left-aligned |
| Equal 3-column grids | Asymmetric bento |
| Card shadows | Hairline borders only |
| Full-width colored sections | Near-black with subtle elevation |
| Zigzag layouts | Consistent left-aligned rhythm |

Texture & Surface

# Texture & Surface

## Primary Texture: Radial Glow

The ONLY texture in this style. A subtle radial gradient behind the hero creates atmospheric depth.

```css
.hero-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(94, 106, 210, 0.15) 0%,  /* Accent-colored glow */
    transparent 70%
  );
}
```

**Parameters:**
- Width: 80vw, Height: 60vh
- Position: top -20%, centered horizontally
- Opacity: 0.10-0.20 (barely visible)
- Color: matches brand accent

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Near-black #0A0A0A |
| Cards/Panels | Elevated #111 with 1px border (white/6) |
| Buttons (primary) | Filled accent color, inverse text |
| Buttons (secondary) | Transparent, 1px border (white/10) |
| Navigation | Transparent, hover → accent color |
| Code blocks | Elevated background, mono font, subtle border |

**No grain, no noise, no patterns.** The surface is clean — depth comes from the radial glow and hairline borders.

---

## Hairline Border System

```css
border: 1px solid rgba(255, 255, 255, 0.06);
```

Used for:
- Card separation in bento grids
- Button borders (secondary)
- Section dividers
- Input field borders

**Hover state:**
```css
border-color: rgba(255, 255, 255, 0.12);
```

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Film grain or noise | Clean surfaces only |
| Gradient backgrounds | Radial glow behind hero only |
| Pattern overlays | Solid near-black |
| Drop shadows | Hairline borders |
| Glassmorphism | Solid elevated backgrounds |
| Textured cards | Clean #111 with border |

Vocabulary Bank

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `near-black ground` | #0A0A0A, not #000 — creates depth for glows |
| `radial glow depth` | Subtle accent-colored gradient behind hero |
| `hairline border` | 1px at white/6 — structural, not decorative |
| `geometric sans` | Custom or Geist/Satoshi — brand identity |
| `left-aligned hero` | Technical, developer-focused positioning |
| `staggered fade-up` | 0.06s delay cascade on entrance |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `bento grid` | Asymmetric mixed-size tile layout |
| `spring physics` | cubic-bezier(0.16, 1, 0.3, 1) easing |
| `monospace data` | JetBrains Mono for code/numbers |
| `tactile press` | Scale 0.98 on :active |
| `gradient orb` | Radial glow as atmospheric depth |
| `developer-aesthetic` | Technical, precise, no-nonsense |
| `status indicator` | Small colored dot or badge |
| `version tag` | Mono label showing version number |
| `integration grid` | Logo grid showing ecosystem |
| `animated counter` | Numbers that count up on scroll |

---

## Context Terms

| Term | Mood |
|------|------|
| `mission control` | Technical authority, precision |
| `infinite canvas` | Near-black with no boundaries |
| `surgical precision` | Every element has exact position |
| `developer-first` | Built for technical users |
| `premium SaaS` | Expensive-feeling software |

---

## Banned Terms

| Term | Why It Breaks |
|------|--------------|
| `Inter` (as display) | Default AI font — use Geist/Satoshi |
| `purple-to-blue gradient` | The #1 AI slop tell |
| `centered hero` | This style is left-aligned |
| `glassmorphism` | Too generic-SaaS |
| `bounce easing` | Too playful |
| `card shadows` | Use hairline borders instead |
| `gradient text` | Solid accent only |

---

## Prompt-Ready Phrases

```
"near-black ground #0A0A0A with radial glow"
"custom geometric sans (Geist or Satoshi)"
"hairline borders rgba(255,255,255,0.06)"
"left-aligned hero with accent CTA"
"bento grid with asymmetric cell sizes"
"staggered fade-up entrance, 0.06s delay"
"monospace for data and code snippets"
"one accent color used surgically"
"spring physics easing cubic-bezier(0.16, 1, 0.3, 1)"
"no gradients, no shadows, no glassmorphism"
```

Anti-Slop Checklist

☐No pure #000000 background (use #0A0A0A to #111111)

☐No Inter as display font (use Geist, Satoshi, Inter Tight, or custom)

☐No purple-to-blue gradients

☐No centered hero (left-aligned only)

☐No card shadows (hairline borders only)

☐No glassmorphism or backdrop-blur

☐No more than ONE accent color

☐No bounce or spring overshoot easing

☐No gradient text on headlines

☐No generic 3D illustrations

☐No "Build the future" headlines

☐No equal 3-column feature grids (use asymmetric bento)

☐No rounded corners above 8px

☐No drop shadows on cards

☐Radial glow present behind hero

☐Hairline borders used for structure

☐Monospace font for data/code elements

☐Staggered entrance animations (0.06s delay)

☐Tactile press on buttons (scale 0.98 on :active)

☐`prefers-reduced-motion` honored

☐Hero fits viewport or has generous padding

☐Max 4 text elements in hero stack

When to Use

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Developer tools** | The technical aesthetic signals "built for engineers." Mono for code, precise layout. |
| **SaaS platforms** | Premium feel without being flashy. Hairline borders and radial glow = expensive. |
| **API products** | Technical documentation feel. Clean, scannable, code-friendly. |
| **Analytics platforms** | Data-forward with mono numbers. Bento grids for metrics. |
| **Infrastructure products** | Mission control aesthetic. Dark, precise, reliable. |
| **Design tools** | Clean surfaces let the product screenshots shine. |
| **AI/ML products** | Technical credibility. The aesthetic says "we understand code." |

## Brand Personality Match

- **Technical** — built for developers or technical users
- **Precise** — cares about details, performance, craft
- **Premium** — expensive-feeling but not ostentatious
- **Confident** — doesn't need to shout
- **Modern** — current, not retro or futuristic

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer brands** | Too technical, too dark for general audiences |
| **Creative portfolios** | Too rigid, not expressive enough |
| **Editorial/content sites** | Not designed for long-form reading |
| **E-commerce** | No product showcase patterns |
| **Playful/youth brands** | Too serious, too precise |
| **Healthcare/wellness** | Wrong emotional register |

## How to Decide

Ask: **"Does my product feel like it belongs next to Linear, Vercel, or Raycast?"**

If yes → Obsidian Precision.
If no → Consider Dark Cinematic Studio (warmer), Liquid Glass Noir (more visual), or Dither Mono (more editorial).

Common Mistakes

Mistake 1: Using Pure Black

**What people do:** Set background to #000000.

**Why it fails:** Pure black kills the radial glow. There's nowhere for the gradient to bleed into. The page looks flat and terminal-like instead of atmospheric.

**Fix:** Use #0A0A0A to #111111. The near-black gives the glow room to exist.

---

Mistake 2: Using Inter as Display Font

**What people do:** Use Inter 400/600 for headlines because it's the default.

**Why it fails:** Inter is the #1 AI slop font. Every AI-generated site uses it. Using Inter makes your site look like every other AI output.

**Fix:** Use Geist, Satoshi, Inter Tight, Cabinet Grotesk, or a custom font. If you must use Inter, use Inter Tight (not regular Inter).

---

Mistake 3: Adding Drop Shadows to Cards

**What people do:** Add `box-shadow: 0 4px 12px rgba(0,0,0,0.3)` to cards.

**Why it fails:** Shadows add visual weight and feel like a generic SaaS template. This style uses hairline borders for separation — it's lighter, more precise.

**Fix:** `border: 1px solid rgba(255,255,255,0.06)` instead of shadows. The border creates structure without weight.

---

Mistake 4: Centering the Hero

**What people do:** Center the headline, subtext, and CTAs.

**Why it fails:** Centered heroes are the AI default. Left-aligned creates a technical, developer-focused feel that's distinctive.

**Fix:** Left-align everything. Max-width 540px for subtext. CTAs in a horizontal row below.

---

Mistake 5: Multiple Accent Colors

**What people do:** Use violet for CTAs, green for success, red for errors, blue for links.

**Why it fails:** The style's power comes from restraint. One accent (violet, amber, or white) used surgically. Multiple colors create visual noise.

**Fix:** One accent color. Use it on CTAs, active states, and one data point per section. For success/error, use muted desaturated versions.

---

Mistake 6: Equal-Column Grids

**What people do:** Use `grid-cols-3` with equal cells for features.

**Why it fails:** Equal grids look like a template. Asymmetric bento grids with varied cell sizes feel intentional and premium.

**Fix:** Use `grid-column: span 2` for wide cells, `grid-row: span 2` for tall cells. Mix sizes intentionally.

---

Mistake 7: Forgetting the Radial Glow

**What people do:** Use a flat near-black background with no atmospheric depth.

**Why it fails:** The radial glow IS the atmosphere. Without it, the page feels like a terminal — flat and lifeless. The glow creates the "infinite canvas" feeling.

**Fix:** Add a radial gradient behind the hero: `radial-gradient(ellipse at center, rgba(accent, 0.15) 0%, transparent 70%)`. Width 80vw, height 60vh, positioned above the content.

Reference Gallery

# Reference Gallery

## Live Sites

### Linear (linear.app)
- **What works:** Custom font, violet accent (#5E6AD2), left-aligned hero with radial glow, staggered fade-up animations, hairline borders, bento feature grid
- **URL:** linear.app

### Vercel (vercel.com)
- **What works:** Geist font, triangular/chevron motifs, dark glow background, light/dark mode, geometric precision
- **URL:** vercel.com

### Raycast (raycast.com)
- **What works:** Amber accent, extension card grid with icon + screenshot, command palette aesthetic, mono for technical labels
- **URL:** raycast.com

### Height (height.app)
- **What works:** Minimal animated task UI previews, dark with subtle color accents, clean bento layout
- **URL:** height.app

### Lovable (lovable.dev)
- **What works:** Dark with warm accent, AI-native positioning, chat-interface preview as hero
- **URL:** lovable.dev

## Key Visual References

### Radial Glow
- Centered behind hero, 80vw × 60vh
- Accent-colored at 10-20% opacity
- Creates "infinite canvas" depth

### Hairline Borders
- 1px solid rgba(255,255,255,0.06)
- Used for card separation, button borders, section dividers
- Hover: rgba(255,255,255,0.12)

### Bento Grid
- Asymmetric cell sizes (span 2 for wide/tall)
- 1px gap with border-colored background
- Each cell has distinct visual treatment

## Screenshot Notes

> When capturing references, look for:
> - The radial glow behind the hero (barely visible but essential)
> - Hairline border color and weight
> - Font choice (custom vs. available alternative)
> - Accent color and where it appears
> - Bento grid cell size variation
> - Stagger animation timing between elements

AI Prompts

EXACT REPLICA9460 charactersTested with: cursor, claude-code, v0

> Copy this entire prompt and paste it into your AI coding assistant.

---

```
Build a developer-focused landing page for "NEXUS" — an API orchestration platform for engineering teams. Stack: React + Vite + TypeScript + Tailwind CSS v4 + lucide-react + framer-motion. Page title: `Nexus — API Orchestration for Teams`.

Vibe: Near-black developer aesthetic. Surgical precision. Hairline borders. Radial glow depth. One accent color used like a signal flare.

---

## ANTI-SLOP CONSTRAINTS

- NO Inter as display font
- NO purple-to-blue gradients
- NO centered hero
- NO card shadows
- NO glassmorphism
- NO more than ONE accent color
- NO bounce easing
- NO gradient text
- NO equal 3-column feature grids

---

## FONTS

Load via Google Fonts:
```
https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap
```

Usage:
- **Inter Tight** (500/600): Headlines, UI text (replaces Geist)
- **Inter Tight** (400): Body text
- **JetBrains Mono** (400): Code, data, technical labels

CSS:
- `.font-display { font-family: 'Inter Tight', sans-serif; font-weight: 600; letter-spacing: -0.02em; }`
- `.font-body { font-family: 'Inter Tight', sans-serif; font-weight: 400; }`
- `.font-mono { font-family: 'JetBrains Mono', monospace; }`

---

## FLUID SIZE SYSTEM

```css
:root {
  --edge-pad: clamp(1.5rem, 5vw, 4rem);
  --section-gap: clamp(4rem, 10vh, 8rem);
  --logo: clamp(1rem, 0.9vw, 1.2rem);
  --nav: clamp(0.7rem, 0.3vw + 0.55rem, 0.85rem);
  --headline: clamp(2rem, 5vw, 4rem);
  --subhead: clamp(1.1rem, 2vw, 1.5rem);
  --body: clamp(0.8rem, 0.4vw + 0.65rem, 0.95rem);
  --micro: 0.7rem;
  --btn-px: clamp(1.2rem, 1.5vw, 1.75rem);
  --btn-py: clamp(0.65rem, 0.8vh, 0.9rem);
}
```

---

## COLOR SYSTEM

```css
:root {
  --ground: #0A0A0A;
  --ground-elevated: #111111;
  --text-primary: #EDEDED;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --accent: #5E6AD2;  /* Linear violet */
  --accent-text: #0A0A0A;  /* Inverse text on accent */
  --glow: rgba(94, 106, 210, 0.15);
}
```

Body: `bg-[#0A0A0A] text-[#EDEDED] antialiased font-body`.

---

## PAGE STRUCTURE

### 1. Header
`fixed top-0 left-0 right-0 z-50`, backdrop-blur-sm, bg-[#0A0A0A]/80.
Padding: `paddingInline: var(--edge-pad)`, `paddingTop: clamp(1rem, 2vh, 1.5rem)`, `paddingBottom: clamp(0.75rem, 1.5vh, 1rem)`.
Flex space-between.

**Logo:** Inter Tight 600, tracking `-0.02em`, size `var(--logo)`. Text: `NEXUS`. Color `var(--text-primary)`.

**Nav:** Inter Tight 400, size `var(--nav)`, gap `clamp(1.5rem, 3vw, 2.5rem)`.
Links: `Product` | `Docs` | `Pricing` | `Blog`
Hover: color `var(--accent)` (200ms).

**CTA (right):** `var(--accent)` bg, `var(--accent-text)` text, rounded-md (6px), size `var(--nav)`, padding `0.5rem 1rem`. Text: `Get Started`.

### 2. Hero
`relative min-h-[100dvh] flex items-center`, padding `var(--edge-pad)`.

**Radial Glow:**
```css
position: absolute;
top: -20%; left: 50%; transform: translateX(-50%);
width: 80vw; height: 60vh;
background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 70%);
pointer-events: none; z-index: 0;
```

**Content (z-10, relative, max-w-[640px]):**
- Badge — inline-flex, items-center, gap 8px, border `var(--border)`, rounded-full, padding `4px 12px 4px 4px`, size `var(--micro)`, color `var(--text-secondary)`:
  - Green dot (8px circle, bg-green-500) + `v2.4 now available`
- Headline — `.font-display`, size `var(--headline)`, leading `1.1`, tracking `-0.03em`, color `var(--text-primary)`:
  `API orchestration`
  `for engineering teams`
- Subtext — `.font-body`, size `var(--body)`, color `var(--text-secondary)`, max-w-[540px], line-height 1.6:
  `Nexus connects your services, handles retries, and gives your team a single source of truth for every API call. No more duct tape.`
- CTA row — flex, gap 12px, margin-top 32px:
  - Primary: bg `var(--accent)`, text `var(--accent-text)`, rounded-md, padding `var(--btn-px)`/`var(--btn-py)`, font-medium. Text: `Start building` + lucide ArrowRight (size 14). Hover: scale(1.02) 200ms.
  - Secondary: transparent, border `var(--border)`, rounded-md, same padding. Text: `View docs`. Hover: border `var(--border-hover)`.

### 3. Logo Bar
Padding: `clamp(2rem, 5vh, 4rem)` vertical, `var(--edge-pad)` horizontal.
Centered. Text: `Trusted by engineering teams at` — `.font-body`, size `var(--micro)`, color `var(--text-muted)`, uppercase, tracking `0.1em`.
Below: flex row, justify-center, gap `clamp(2rem, 4vw, 4rem)`, opacity 0.4.
Company names (text, not images): `Vercel` `Linear` `Raycast` `Supabase` `Resend` — `.font-display`, size `var(--nav)`, color `var(--text-secondary)`.

### 4. Bento Feature Grid
Padding: `var(--section-gap)` vertical, `var(--edge-pad)` horizontal.
Max-width 1200px, centered.

Section label: `.font-mono`, size `var(--micro)`, color `var(--text-muted)`, uppercase, tracking `0.1em`: `CAPABILITIES`
Section headline: `.font-display`, size `var(--subhead)`, color `var(--text-primary)`, margin-bottom `clamp(2rem, 4vh, 3rem)`: `Everything you need. Nothing you don't.`

Grid: `display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;`

**Cell 1 (wide — col span 2):**
- bg `var(--ground-elevated)`, padding `clamp(1.5rem, 3vw, 2.5rem)`
- Icon: lucide Zap (size 20, color `var(--accent)`)
- Title: `.font-display`, size `clamp(1rem, 1.5vw, 1.25rem)`: `Real-time Orchestration`
- Body: `.font-body`, size `var(--body)`, color `var(--text-secondary)`: `Route, transform, and retry API calls across your entire stack. One config file, zero duct tape.`

**Cell 2:**
- Same structure
- Icon: lucide Shield
- Title: `Built-in Observability`
- Body: `Every request traced. Every error categorized. Dashboards that engineers actually want to look at.`

**Cell 3:**
- Icon: lucide GitBranch
- Title: `Version Control`
- Body: `Your API config lives in Git. Review changes, roll back deploys, sleep well.`

**Cell 4 (wide — col span 2):**
- Icon: lucide Terminal
- Title: `CLI-First Workflow`
- Body: `npx nexus init. That's it. Your project is configured, connected, and ready to deploy.`

**Cell 5:**
- Icon: lucide Users
- Title: `Team Permissions`
- Body: `RBAC built in. Audit logs for everything.`

### 5. Code Preview Section
Padding: `var(--section-gap)` vertical, `var(--edge-pad)` horizontal.
Max-width 900px, centered.

Two-column: left = text, right = code block.

**Left:**
- Label: `.font-mono`, `var(--micro)`, `var(--text-muted)`, uppercase: `DEVELOPER EXPERIENCE`
- Headline: `.font-display`, `var(--subhead)`: `Config that reads like code`
- Body: `.font-body`, `var(--body)`, `var(--text-secondary)`: `YAML-free. TypeScript-native. Your API routes are just functions with decorators.`

**Right — Code Block:**
```css
bg: var(--ground-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: clamp(1rem, 2vw, 1.5rem);
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
line-height: 1.7;
color: var(--text-secondary);
overflow-x: auto;
```

Content:
```typescript
import { route, retry } from '@nexus/sdk';

@route('/payments/charge')
@retry({ attempts: 3, backoff: 'exponential' })
async function chargePayment(req: Request) {
  const result = await stripe.charges.create({
    amount: req.body.amount,
    currency: 'usd',
  });
  return { status: 'ok', id: result.id };
}
```

### 6. CTA Section
Padding: `var(--section-gap)` vertical, `var(--edge-pad)` horizontal.
Centered, max-width 600px.

Headline: `.font-display`, `clamp(1.5rem, 3vw, 2.5rem)`, centered: `Start building in minutes`
Body: `.font-body`, `var(--body)`, `var(--text-secondary)`, centered, max-width 440px: `Free for small teams. No credit card required.`
CTA: same as hero primary. Text: `Get started free`.

### 7. Footer
Padding: `clamp(2rem, 4vh, 3rem)` vertical, `var(--edge-pad)` horizontal.
Border-top: `1px solid var(--border)`.
Flex space-between.
- Left: `.font-body`, `var(--micro)`, `var(--text-muted)`: `© 2026 Nexus, Inc.`
- Right: flex gap `clamp(1rem, 2vw, 2rem)`: `Twitter` `GitHub` `Discord` — `.font-body`, `var(--micro)`, `var(--text-muted)`, hover `var(--text-secondary)`.

---

## VISUAL RULES

- Near-black ground (#0A0A0A), elevated cards (#111)
- Accent (#5E6AD2) ONLY on primary CTA, active nav, badge dot, icons
- Hairline borders (rgba(255,255,255,0.06)) for all separation
- Radial glow behind hero (accent-colored, 15% opacity)
- Left-aligned everything
- Bento grid with asymmetric cells (span 2 for wide)
- Mono font for code and technical labels
- No shadows, no gradients, no glassmorphism

---

## ANIMATIONS (framer-motion)

Hero elements: `initial={{ opacity: 0, y: 8 }}` → `animate={{ opacity: 1, y: 0 }}`, transition: `{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }`, stagger children by 0.1s.

Bento cells: `initial={{ opacity: 0, scale: 0.97 }}` → `animate={{ opacity: 1, scale: 1 }}`, transition: `{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }`, stagger 0.06s.

Buttons: hover `scale: 1.02`, active `scale: 0.98`, transition 200ms.

`prefers-reduced-motion: reduce` → disable all animations.

---

## ICONS

lucide-react: `ArrowRight`, `Zap`, `Shield`, `GitBranch`, `Terminal`, `Users`. Size 20, strokeWidth 1.5.

---

Recreate this page faithfully with the exact colors, fonts, fluid clamps, layout, and animation timings above.
```

This prompt recreates a specific design pixel-faithfully. Study it to understand the style at its purest.