DesignMD Directory

⌘K

shadcn DESIGN.md Dashboard Cursor Claude Code CodexPaid source bundle

Minimal SaaS Dashboard

A calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.

Preview

Image$39

Open the full preview to inspect theme and responsive behavior.

Minimal SaaS Dashboard DESIGN.md template preview showing the product workspace layout

Purchase to unlock the complete system

The preview stays visible. The runnable source, DESIGN.md context, prompts, tokens, and implementation files become available after purchase.

What's in the $39 bundle

6 dashboard pages: Overview · Revenue · Customers · Projects / Experiments · Billing & Usage · Settings
DESIGN.md
Tokens + CSS variables
Prompts + agent skills
11 reusable components
Personal + commercial license

Next.js TailwindChartsshadcn/ui

Stack: Next.js 15 · React 18 · TypeScript · Tailwind CSS · Lucide primitives

Source-backed gallery

Pages included

Every card maps to a route in the runnable source bundle. Open the matching preview path to inspect its route context, then use the ZIP for the runnable source.

Minimal SaaS Dashboard Overview route screenshot

Overview

Scan the current business pulse, KPIs and growth health.

source-template/components/dashboard.tsx

Minimal SaaS Dashboard Revenue route screenshot

Revenue

Review revenue momentum and acquisition mix.

source-template/components/dashboard.tsx

Minimal SaaS Dashboard Customers route screenshot

Customers

Search customer health, plans and recent activity.

source-template/components/dashboard.tsx

Minimal SaaS Dashboard Projects / Experiments route screenshot

Projects / Experiments

Track experiments and the next business action.

source-template/components/dashboard.tsx

Minimal SaaS Dashboard Billing & Usage route screenshot

Billing & Usage

See plan, usage limits and the provider handoff boundary.

source-template/components/dashboard.tsx

Minimal SaaS Dashboard Settings route screenshot

Settings

Tune workspace defaults and destructive settings states.

source-template/components/dashboard.tsx

Public design system

Compact operational UI, without the dashboard sludge

One screen per job, not one screen doing every job: a KPI strip, a revenue signal, and a Billing & Usage view — no customer table, no team-role admin. Navigation density, metric hierarchy, table rhythm, responsive collapse, semantic states, keyboard focus, and implementation rules for AI coding agents all come from this contract.

Token roles

Ink — Primary actions, navigation
Signal — Active state, momentum
Data Accent — Charts, selected data
Canvas — Warm page background
Surface — Cards, panels, inputs
Surface Hover — Row/item hover

Typography and rhythm

Display: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Body: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Spacing base: 4px
Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64px
Responsive rules: Desktop (>1024px): persistent sidebar 240px, multi-column stat grid Tablet (768–1024px): sidebar collapses to icons or slides out

What is included in the download

The paid ZIP contains the runnable source, design contract and agent handoff artifacts. The public file tree is intentionally visible before purchase.

source-template/

DESIGN.md

README.md

prompts/implement.md

prompts/remix.md

tokens/tokens.json

tokens/css-variables.css

tokens/tailwind.theme.ts

skills/cursor.md

skills/claude-code.md

skills/codex.md

scripts/verify-bundle.mjs

Run locally

cd source-template && pnpm install && pnpm dev

Not included: authentication, database persistence, Stripe, email, analytics providers, authorization enforcement and production API credentials.

AI-agent workflow

How to use

DESIGN.md is the context

$read DESIGN.md --agent codex

Read DESIGN.md with Codex before editing UI. Preserve local imports, responsive behavior, accessibility, and the existing local UI primitives.

01

Install

Run pnpm install and start the local source template.

02

Load context

Keep DESIGN.md, components.json, and tokens in the project root.

03

Extend

Use the prompts and local UI primitives before adding new patterns.

SaaS DashboardA ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.Editorial Product Landing PageA complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.

Tokens

Color system

Named roles from the template contract. Every swatch is keyboard-copyable and includes its intended use, so the palette remains meaningful outside this preview.

Brand

Surfaces

Text

Data visualization

Status colors

Light and dark status color tokens
Status	Light	Dark	Usage
Success		—	Positive metrics
Warning		—	Warning states
Danger		—	Errors, destructive
Info		—	Informational, links

More templates

Explore other ready-to-use DESIGN.md templates for your next project.

SaaS Dashboard template preview

SaaS Dashboard

A ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.

Editorial Product Landing Page template preview

Editorial Product Landing Page

A complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.

AI App Starter template preview

AI App Starter

A dark-first DESIGN.md for AI apps: deep space canvas, an indigo-to-violet brand gradient reserved for generative moments, calm neutrals, and streaming-aware states.

Admin Panel template preview

Admin Panel

Admin Panel DESIGN.md for Cursor, Codex, and Claude Code: Light + Dark themes, responsive table rules, semantic states, and Tailwind-ready exports.

Need to know

Frequently asked questions

Practical answers about this template, its implementation scope, and the source bundle.