Nexus — Learn Next.js with production discipline

01

Design Tokens

Color Palette

Typography Scale

DisplayThe quick brown fox

HeadingSection heading

BodyComfortable body reading text

LabelInput label · UI element

CaptionCaption · footnote · meta

Gradient Accents

Brand

Success

Navy fade

Mixed

02

Component Gallery

Core UI components styled in the Gradient Fintech design system.

Actions

Buttons

Selection

Cards

Monthly revenue — last 12 months

Inputs

Form Elements

Card number

💳

Expiry

CVC

Country

Secured by 256-bit SSL. Your data is encrypted.

03

Navigation & Charts

Progress flows and sparkline visualizations.

Step Progress

Cart

Payment

Review

Confirm

Step 1 of 4

Revenue — 7 days

$21.3K

MonTueWedThuFriSatSun

04

Data & Dashboard

Metric cards and dashboard layout patterns.

Metrics

Revenue

$24.8K

+18%

Transactions

1,247

+12%

Success Rate

98.7%

+0.3%

Avg. Order

$19.90

-2.1%

Account Balance

$4,829.10

Recent Activity

🎨Design Tools-$29.00

☁️Cloud Storage-$9.99

💸Payout Received+$540.00

Prompt Preview

Copy a prompt that recreates the Gradient Fintech 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 Gradient Fintech theme.
Creative direction: Deep navy canvas with layered gradients, vibrant purple accents, and glassmorphism surfaces — a fintech-grade design language built for trust, depth, and visual polish.
Style label: Gradient Fintech.
Mood keywords: dark, gradient, fintech, polished.

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:
- Depth through gradients
- Glassmorphism
- Trust signals

Theme-specific art direction:
- Typography direction: polished modern fintech sans with strong headline contrast and concise supporting copy.
- Shape language: layered cards, glass surfaces, subtle blur, and smooth gradients.
- Overall feel: trustworthy, deep, vibrant, and premium.

Color and surface tokens:
- background: #0A2540
- surface: rgba(255,255,255,0.06)
- primary: #635BFF
- secondary: #00D4AA
- text: #FFFFFF
- textMuted: #B8C5D6
- border: rgba(255,255,255,0.12)

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 faster with Gradient Fintech

Copy the tokens and components to build polished fintech interfaces.

View Design System Explore Other Themes