ZeroOne D.O.T.S. AI · Design System 1

The Design Frame

Every color, font, button, input, and interaction pattern — in one place. Built on Next.js + Convex. Scalable to 1M users.

Get Started Sign In

Color Palette

Design tokens — defined in globals.css

Deep Anchors

ink

#191924

plum

#2D1B4E

charcoal

#2A2A3C

D.O.T.S Pastels

lavender

#C8B6FF

mint

#B8E0D2

peach

#FFCDB2

sky

#A2D2FF

rose

#FFB5C2

lemon

#FFF3B0

Warm Neutrals

cream-50

#FDFCFA

cream-100

#F8F7F4

sand-200

#E8E6E0

stone-500

#918D82

slate-700

#4A4842

Sidebar

sidebar-bg

#13131D

hover

#1E1E2E

active

#252538

text

#A8A6B0

Semantic

teal/accent

#4ECDC4

amber

#D4A574

gold

#F5C542

danger

#EF4444

Typography

3 fonts — display, body, mono

Instrument Serif — Display / Headings

The quick brown fox

DM Sans — Body / UI

Platform-ready design

Regular weight for body copy. Clean, readable at all sizes.

Base

Space Mono — Code / Labels

const design = "ready";

01001101 01100001 01101100 01101100

Button Variants

All states and sizes

Solid Variants

Outline Variants

Ghost / Text

With Icons

Loading State

Sizes

Input Variants

Text, textarea, select, search

Text Input

Textarea

Select

With Label + Error

Email Address

Please enter a valid email

Success State

Username

Username is available

Badge Variants

Status, role, count

AdminActivePendingDangerInfoWarningNeutral

312991K+

Card Variants

Stat, info, link, hero

Total Users

48,291

+12% this month

Info Card

Useful for displaying contextual information about a feature or section.

Dark Gradient

Hero / featured content style card.

Wide Bento Card

2-col span

Ideal for charts, summaries, or wide-format data.

Mon

Tue

Wed

Thu

Canvas + Text Contrast

Readability across all backgrounds

Light / Text

Heading text

Body copy at 14px — clear and readable

Dark / Text

Heading text

Body copy at 14px — clear and readable

Lavender / Text

Heading text

Body copy at 14px — clear and readable

Plum / Lavender

Heading text

Body copy at 14px — clear and readable

Canvas + Filter Effects

Blur, grain, backdrop effects

Glassmorphism

Frosted glass panel

Dark + Grain

Film grain texture

Canvas + Overlay

Light gradient overlay

Spacing Scale

8px grid system

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

96px

Radius & Shadows

Border-radius tokens and elevation

12px/lg

16px/xl

24px/2xl

full

2xl

Micro-interactions

Hover, transition, and animation patterns

Lift on hover

translateY + shadow

Color shift

border + text + bg

Scale + rotate

Icon transform

Loading & Feedback

Spinners, skeletons, and progress

Spinners

Skeleton Text

Skeleton Card

Progress Bar

Uploading...65%

Storage limit90%

Tooltip / Popover (Static)

Hover Target

Useful info tooltip

Premium 3D & Interactions

Framer Motion physics and native Spline WebGL

Web GL 3D

Spline Integration

Framer Motion

Constraint Drag Physics

Framer Motion

Staggered List

Click the menu icon

Lab

Magnetic CTA

Lab

Organic Morph

Status: Active

Lab

Dynamic Dock

Lab

Shared Layout Grid

Click a tile

Analytics

Campaigns

Finances

Network

Folder Structure

Where everything lives — for a 10-year-old

design1-base/
│
├── convex/                    ← DATABASE (Convex cloud)
│   ├── schema.ts              ← All tables defined here
│   ├── auth.ts                ← Login, signup, logout, forgot password
│   ├── users.ts               ← Profile read & update
│   ├── notifications.ts       ← Notification CRUD
│   ├── wallet.ts              ← Credits & transactions
│   └── analytics.ts           ← Page view tracking
│
├── src/
│   ├── app/                   ← All pages (Next.js App Router)
│   │   ├── layout.tsx         ← Root layout (fonts, providers)
│   │   ├── page.tsx           ← → redirects to /design
│   │   │
│   │   ├── design/            ← 🎨 This page — design system showcase
│   │   │
│   │   ├── login/             ← /login
│   │   ├── signup/            ← /signup
│   │   ├── forgot-password/   ← /forgot-password
│   │   │
│   │   └── (platform)/        ← All authenticated platform pages
│   │       ├── layout.tsx     ← Sidebar + Navbar shell
│   │       │
│   │       ├── profile/       ← /profile (system product)
│   │       │   ├── page.tsx
│   │       │   ├── info/
│   │       │   ├── avatar/
│   │       │   └── preferences/
│   │       │
│   │       ├── product-one/   ← /product-one (Sample product 1)
│   │       │   └── page.tsx
│   │       │
│   │       ├── product-two/   ← /product-two (Sample product 2)
│   │       │   └── page.tsx
│   │       │
│   │       └── billing/       ← /billing (Wallet)
│   │           └── page.tsx
│   │
│   ├── components/
│   │   └── shell/
│   │       ├── Icon.tsx       ← Dynamic Lucide icon
│   │       ├── Sidebar.tsx    ← Full sidebar w/ product switcher
│   │       └── Navbar.tsx     ← Top bar w/ notifications + wallet
│   │
│   ├── lib/
│   │   ├── utils.ts           ← cn(), timeAgo(), formatCredits()
│   │   └── products/
│   │       ├── types.ts       ← ProductManifest, NavItem types
│   │       └── registry.ts    ← ⭐ EDIT THIS to add products
│   │
│   ├── providers/
│   │   ├── AuthProvider.tsx   ← useAuth() hook + session management
│   │   └── Providers.tsx      ← Convex + Auth wrappers
│   │
│   └── stores/
│       └── sidebar-store.ts   ← Sidebar collapse/expand state
│
├── .env.local                 ← CONVEX_DEPLOYMENT + NEXT_PUBLIC_CONVEX_URL
└── INDEX.md                   ← 📖 This file (master index)

How to Add a New Product

5 steps, takes 5 minutes

Edit registry.ts

Copy the product template at the bottom of src/lib/products/registry.ts. Set slug, name, color, icon, and your nav items.

Create your page file

Create src/app/(platform)/your-product/page.tsx. Export a default React component.

Add sub-pages (optional)

Create src/app/(platform)/your-product/section/page.tsx for each section listed in the registry.

Start dev server

Run: npm run dev. Your product appears instantly in the sidebar product switcher.

Connect Convex (optional)

Add your table to convex/schema.ts. Add queries/mutations. Use useQuery/useMutation in your pages.