lightengineeringminimalmonochrome

Geometric Light

Pure white surfaces, crisp black typography, and subtle geometric grid — a deployment-grade design language built for engineers who value precision over decoration.

✶ Geometric Light

Design Tokens

Color Tokens

Typography Scale

DisplayDeploy to production

HeadingDeployment settings

BodyYour deployment is live and serving traffic globally.

Monogit push origin main

Caption2m 14s · 4 regions

Border Radius

none

sm — 4px

md — 8px

pill

Components

Component

Buttons & Actions

Click to simulate

Component

Deployments

nexus-design.nexus.app

main · a3f9c14

Ready

3m ago·2m 14s·4 regions

nexus-design-git-staging.nexus.app

staging · 8b2e5d7

Building

Just now·–

nexus-design-git-fix-123.nexus.app

fix/issue-123 · c7a1b88

Error

1h ago·0m 48s

Component

New Project

Project Name

Framework

Region

Deploy Log

Signature Component

nexus-designa3f9c14main

nexus-design.nexus.app

Idle

$ # Click "Run Deploy" to start simulation

Ready to deploy

Navigation

nexus-design/

Data & Analytics

Project Overview

Deployments

247

+12

Avg Build Time

1m 34s

-8s

Error Rate

0.12%

-0.03%

Regions

Global

Project	Builds	Status
nexus-design main	142	Healthy
nexus-api main	87	Warning
nexus-docs main	18	Healthy

Project

Builds

Status

nexus-design

main

142

Healthy

nexus-api

main

Warning

nexus-docs

main

Healthy

Request Rate

91 req/s

↑ Peak today at 16:00

24h

Layout Patterns

Sidebar + dot-grid canvas layout with pill-shaped navigation

Prompt Preview

Copy a prompt that recreates the Geometric Light 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 Geometric Light theme.
Creative direction: Pure white surfaces, crisp black typography, and subtle geometric grid — a deployment-grade design language built for engineers who value precision over decoration.
Style label: Geometric Light.
Mood keywords: light, engineering, minimal, monochrome.

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:
- Grid geometry
- Monochrome precision
- Pill shapes

Theme-specific art direction:
- Typography direction: precise engineering-focused sans styling with monochrome discipline.
- Shape language: pill controls, geometric spacing, and crisp low-noise borders.
- Overall feel: minimal, technical, and exact.

Color and surface tokens:
- background: #FAFAFA
- surface: #FFFFFF
- primary: #000000
- secondary: #0070F3
- text: #111111
- textMuted: #666666
- border: #EAEAEA

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.

Ship. Iterate. Grow.

Engineering-grade precision wrapped in effortless simplicity.

View All Themes Components