Nexus — Learn Next.js with production discipline

Design Tokens

Color Tokens

Typography Scale

DisplayShip fast, stay focused

HeadingProject board view

BodyComfortable reading text for issue descriptions

LabelStatus · Priority · Assignee

CaptionUpdated 3 hours ago · LIN-2847

Border Radius

sm — 4px

md — 6px

lg — 10px

xl — 16px

Components

Component

Buttons & Actions

Click to simulate loading

Component

Project Cards

Component

Create Issue

Title

Priority

Assignee

Issue Tracker

Signature Component

L

All Issues6

6 of 6 issues

1

2

Navigation

N

Nexus Design

My Issues

Data & Charts

Issues Closed

248

+12%

Cycle Velocity

34

+5 pts

Avg Lead Time

2.4d

-0.8d

Open Bugs

18

+3

MemberRoleClosedOpen

A

Alex Kim

Lead324

S

Sam Park

Engineer276

T

Taylor J.

Design192

Velocity

34 pts

↑ +5 pts from last cycle

Cycle 14

C9

C10

C11

C12

C13

C14

Layout Patterns

Save changes

Three-column productivity layout — sidebar · main · detail panel

Prompt Preview

Copy a prompt that recreates the Productivity Dark 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 Productivity Dark theme.
Creative direction: Ultra-dark canvas, indigo-purple accents, and tight typography — a focused software-product design language built for clarity, speed, and distraction-free workflows.
Style label: Productivity Dark.
Mood keywords: dark, productivity, focused, clean.

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:
- Ultra-dark surfaces
- Tight spacing
- Status-driven UI

Theme-specific art direction:
- Typography direction: compact productivity UI with tight spacing and precise hierarchy.
- Shape language: restrained radii, subtle borders, and dense but readable surfaces.
- Overall feel: focused, ultra-dark, and efficient.

Color and surface tokens:
- background: #08090A
- surface: #1A1C1E
- primary: #5E6AD2
- secondary: #6E8EF7
- text: #F7F8F8
- textMuted: #8A8F98
- border: rgba(255,255,255,0.08)

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.

Build with purpose.

Clarity, velocity, and focus — baked into every interaction.

View All Themes Components

Productivity Dark

Design Tokens

Components

Buttons & Actions

Project Cards

Design System

Mobile App v3

API Gateway

Create Issue

Issue Tracker

Navigation

Data & Charts

Layout Patterns

Copy a prompt that recreates the Productivity Dark theme

Build with purpose.