Nexus — Learn Next.js with production discipline

_ 01

Design Tokens

_ color.palette

_ typography.scale

DisplayThe quick brown fox

HeadingSection heading

BodyBody text for reading

Monoconst result = await fetch()

CaptionMeta · Label · Caption

_ radius.shadow

sm — 8px

md — 12px

lg — 16px

xl — 24px

_ 02

Component Gallery

Core UI components in the Dark Developer design system.

_ component

Buttons

_ component

Cards

1,200+

Actions

450+

Plugins

2M+

Active users

_ component

Form Elements

search.query

⌘

filter.category

All plugins↕

_ 03

Navigation & Code

Command palette and syntax highlighting patterns.

_ Navigation

Search actions, files, apps…⌘K

📄Open in Editor↩

📋Copy Path⌘C

🗂️Reveal in Finder⌘⌥F

▶️Run Script⌘⏎

greet.ts

1function greet(name: string): string {

2 return `Hello, ${name}!`

3}

4

5// Invoke with a user name

6const msg = greet('Copilot')

7console.log(msg)

8// → Hello, Copilot!

_ 04

Data & Layout

System stats and split-panel layout.

_ System Stats

CPU

34%

Memory

2.1 GB

Disk

78%

Network

42 ms

_ Actions

Quick Access

Use keyboard shortcuts to trigger any action instantly from anywhere in your workflow.

Press ⌘K to open command palette

Prompt Preview

Copy a prompt that recreates the Dark Developer theme

Use this prompt to ask AI for a polished interface that matches this showcase across color, typography, spacing, shape, and overall art direction.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a polished Next.js showcase page or design system slice that matches the Dark Developer theme.
Creative direction: High-contrast dark system surfaces, precise monospace typography, and vibrant red accents — a design language built for speed and developer focus.
Style label: Dark Developer.
Mood keywords: dark, developer, minimal, vibrant.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Design principles to preserve:
- High contrast
- Monospace first
- Keyboard-driven

Theme-specific art direction:
- Typography direction: developer-first UI with monospace support for labels, metadata, and utility surfaces.
- Shape language: compact radii, crisp dividers, and high-contrast dark surfaces.
- Overall feel: fast, focused, dark, and keyboard-centric.

Color and surface tokens:
- background: #1C1C1E
- surface: #2C2C2E
- primary: #FF6363
- secondary: #0A84FF
- text: #FFFFFF
- textMuted: #8E8E93
- border: #3A3A3C

What the result should include:
- Include a cohesive set of themed UI building blocks: buttons, cards, forms, navigation, data/stat surfaces, and at least one layout composition.
- Use the provided tokens as the source of truth for color, borders, text hierarchy, and surface contrast.
- Keep the result responsive and visually complete enough to feel like a polished showcase page or mini design system.

Output requirements:
- Return a complete implementation, not a wireframe.
- Make the page feel cohesive from hero through component examples.
- Match color, size, shape, typography, gradients, border treatment, and spacing as closely as possible.
- Keep the implementation responsive, accessible, and production-ready.
- If a closest-equivalent font is needed outside this project, state it explicitly and keep the visual feel aligned with the reference.

Generate the full theme first, then trim sections you do not need.

Take it. Ship it.

Copy the tokens and components to kickstart your next developer tool.

View Design System Explore Other Themes