Nexus — Learn Next.js with production discipline

01

Design Tokens

Color Palette

Typography Scale

DisplayThe quick brown fox

TitleSection title

BodyComfortable body reading text

CalloutCallout or UI label

CaptionCaption · footnote · label

Border Radius

sm — 8px

md — 12px

lg — 18px

xl — 24px

02

Component Gallery

Core UI components styled in the Light Minimal design system.

Actions

Buttons

Cards

Shop the latest

Inputs

Form Elements

03

Navigation & Badges

Wayfinding and status components.

Navigation

Precision-engineered for professionals. Built with a recycled aluminium enclosure and a stunning Liquid Retina display.

Badges & Tags

ActivePendingArchivedBeta

Click to toggle tags

Tap bell to add notification

04

Data & Layout

Stats, progress, and list patterns.

Data Display

Downloads

2.4M

+12%

Active Users

840K

+8%

Uptime

99.9%

+0.1%

Score

4.9

+0.2

Storage72%

Memory48%

CPU31%

List Layout

Prompt Preview

Copy a prompt that recreates the Light Minimal 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 Light Minimal theme.
Creative direction: Generous whitespace, refined system typography, and restrained color usage — a premium light design language built for clarity and content-first presentation.
Style label: Light Minimal.
Mood keywords: light, premium, minimal, 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:
- Content first
- Refined spacing
- Restrained color

Theme-specific art direction:
- Typography direction: premium minimal sans styling with calm hierarchy, generous whitespace, and restrained weight changes.
- Shape language: rounded corners and pill buttons with soft borders instead of heavy shadows.
- Overall feel: clean, premium, light, and editorially calm.

Color and surface tokens:
- background: #FBFBFD
- surface: #FFFFFF
- primary: #0071E3
- text: #1D1D1F
- textMuted: #6E6E73
- border: #D2D2D7

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 something beautiful.

Copy the tokens and components to kickstart your next premium product.

View Design System Explore Other Themes