Inkwell Complete Design System

Inkwell is an AI-powered company builder with a dark, futuristic design. Gold accents, Space Grotesk headlines, glass-morphism effects, and animated shine buttons. This reference covers the marketing site and the product dashboard.

Website

Marketing

Overview

AI-Powered Company Builder. Dark, futuristic marketing site with gold (#c9a962) primary, Space Grotesk headlines, glass-morphism effects, and animated shine buttons.

inkwell.example

https://inkwell.example

Dark Theme Space Grotesk Gold Accent Glass Effects

Colors

Gold primary, cyan accent, deeply dark backgrounds with semantic status colors.

Primary & Accent

Gold

#c9a962

--color-orange

Gold Dark

#a08642

--color-orange-dark

Cyan

#00d4ff

--color-cyan

Purple

#a855f7

--color-purple

Backgrounds

BG Primary

#0a0a0f

--color-bg

BG Secondary

#12121a

--color-bg-secondary

BG Tertiary

#1a1a25

--color-bg-tertiary

Card BG

#15151f

--color-bg-card

Text, Border & Status

Text

#ffffff

Text Sec.

#a0a0b0

Text Tert.

#606070

Border

#2a2a3a

Success

#00ff88

Warning

#f59e0b

Error

#ff4757

Info

#00d4ff

Typography

Space Grotesk headlines with tight tracking. System sans-serif for body text.

Mktg H1

3.8rem / 700
Space Grotesk
tracking -0.02em

Build with AI

Mktg H2

2.8rem / 700
Space Grotesk

AI Agent Teams

Section H

2rem / 700

Infrastructure

Body Lg

1.125rem / 400
line-height: 1.6

Deploy a full AI-powered team that runs your company infrastructure.

Body

1rem / 400

Each agent is specialized for its role, working together as a team.

Label

0.7rem / 600
uppercase 0.1em

Featured Agents

Code

Geist Mono
0.875em

npx zhc deploy --agents all

Buttons

Marketing buttons: uppercase, wide letter-spacing, gold primary with animated shine sweep.

Primary (Gold) with Shine

Glass / Frosted

Cyan & Outline

Sizes

Cards

Marketing cards with glow hover effect. Agent cards with colored top borders. Bento grid layout.

Standard + Agent Cards

AI Strategy Engine

Market analysis and competitive intelligence powered by your CEO agent.

CEO Agent

Strategic Leadership

Vision setting and organizational strategy.

CTO Agent

Technical Architecture

System design and infrastructure.

Bento Grid

Featured

Full AI Team Deployment

Launch an entire company infrastructure with specialized AI agents.

24/7 Ops

Agents work around the clock.

Analytics

Live dashboards for every metric.

Scaling

Add agents as you grow.

Hero Section

Two-column layout at desktop with terminal animation area.

AI-Powered Company Builder

Build Your AI Company in Minutes

Deploy a full team of AI agents that run your entire company infrastructure autonomously.

zhc-terminal

$ zhc deploy --agents all Initializing AI Company... CEO Agent........... done CTO Agent........... done CFO Agent........... done All agents deployed. Company is live.

Section Spacing

120px vertical padding with alternating backgrounds for visual rhythm.

Section 1 — #0a0a0f

Primary Background

padding: 120px 0

Section 2 — #12121a

Secondary Background

padding: 120px 0

Section 3 — #0a0a0f

Primary Background

padding: 120px 0

Animations

Entrance animations, shine sweeps, and pulse glows.

Entrance (Staggered)

translateY(30px) to 0, cubic-bezier(.16,1,.3,1)

Pulse Glow & Shine

Pulse

Spacing & Layout

4px base unit. Content constrained to 1280px max-width.

4px

8px

12px

16px

24px

32px

48px

64px

120px

Border Radius & Shadows

8px

12px

16px

50%

glow

CSS Variables — Website

/* Inkwell Marketing Website */
:root {
  --color-orange: #c9a962;
  --color-orange-dark: #a08642;
  --color-cyan: #00d4ff;
  --color-purple: #a855f7;
  --color-bg: #0a0a0f;
  --color-bg-secondary: #12121a;
  --color-bg-tertiary: #1a1a25;
  --color-bg-card: #15151f;
  --color-text: #ffffff;
  --color-text-secondary: #a0a0b0;
  --color-text-tertiary: #606070;
  --color-border: #2a2a3a;
  --color-border-dark: #3a3a4a;
  --color-success: #00ff88;
  --color-warning: #f59e0b;
  --color-error: #ff4757;
  --color-info: #00d4ff;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-glow: 0 0 20px rgba(201,169,98,.15);
  --font-marketing: "Space Grotesk", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", monospace;
  --transition: .15s ease;
}

App / Portal

Dashboard, agents, terminal, forms, and data components

App / Portal Overview

The Inkwell dashboard uses Geist Nostalgia as its primary UI font with a terminal-inspired aesthetic. Sidebar navigation, agent dashboards, and real-time terminal output.

Inkwell Dashboard

app.inkwell.example

Sidebar + Main 56px Navbar 240px Sidebar Geist Nostalgia

Colors & Agent Map

Twelve agent colors uniquely identify each AI role throughout the dashboard.

Agent Color Map

CEO

#c9a962

CTO

#00d4ff

CFO

#00ff88

CMO

#a855f7

COO

#ec4899

Developer

#00d4ff

Designer

#f43f5e

Marketer

#a855f7

Analyst

#00ff88

Writer

#c9a962

Support

#64748b

#d946ef

Typography — App

Geist Nostalgia (monospace fallback) for a terminal-native feel. Labels use uppercase with wide tracking.

App H1

2.5rem / 700
Geist Nostalgia

Dashboard

App H2

2rem / 700

Agent Overview

App H3

1.5rem / 700

Company Tasks

Body

1rem / 400

Agent task execution log with status updates.

Label

0.7rem / 600
uppercase 0.1em

Agent Status

Code

Geist Mono
0.875em

const agent = new Agent("CEO");

Buttons — App

Functional variants: primary, secondary, cyan, ghost, danger. All sizes plus disabled states.

Variants

Disabled

Sizes

Forms

Monospace inputs with gold focus ring. Error, disabled, and select states.

Company Name

Agent Type

Email (Error)

Please enter a valid email

Disabled

Enable auto-deployment

Send notifications

Cards — App

Dashboard stat cards, agent cards with colored borders, and task cards with progress bars.

Stat Cards

Active Agents

Tasks Done

847

Revenue

$24.8k

Agent Cards

CEO

Strategic Planning

Analyzing Q2 market opportunities.

CTO

Code Review

Reviewing PR #142 for rate limiting.

CFO

Budget Analysis

Monthly expense report generation.

Task Card

In ProgressTSK-0847

Deploy Auth Service

OAuth2 with social login support.

CTO

65%

Dashboard Layout

Sidebar (240px) + main content with stat cards and activity feed.

Company Dashboard

Online

Tasks

Uptime

99.9%

Recent Activity

CEO completed market analysis 2m

CTO deployed v2.4.1 15m

CFO generated expense report 1h

Tables

Dark theme with subtle row striping and hover highlights.

Agent	Status	Tasks	Last Active	Perf.
CEO	Online	124	2m ago	98%
CTO	Online	256	Now	99%
CFO	Away	89	1h ago	95%
Support	Offline	45	3h ago	-

Modals

Dark overlay with centered card panel. Header and footer separated by borders.

Status Indicators

Badges, pills, and status dots using semantic colors.

Badges

Active Pending Failed Processing Premium Pro Draft

Status Dots

Online

Away

Busy

Offline

Pulsing

Live

Error

Terminal

macOS-style terminal log viewer with color-coded output.

zhc-agent-logs

[14:23:01] CEO Starting market analysis for Q2... [14:23:03] CEO Fetching competitor data from 12 sources [14:23:05] CTO PR #142 merged to main [14:23:06] CTO Deploying v2.4.1 to production... [14:23:10] CTO Deployment complete. Health checks passing. [14:23:15] CMO Warning: API rate limit at 80%

Chat

User messages in gold, agent messages in dark card bubbles.

CTO Agent

Online

CTO

API rate limiting is active. Response times within 200ms SLA.

Run load tests against staging?

CTO

Starting load test with 10k concurrent connections. Results in ~5 min.

Loading States

Spinners and skeleton shimmer placeholders.

Spinners

20px

24px

32px

40px

Skeleton Screens

CSS Variables — App

/* Inkwell App / Portal — CSS Custom Properties */
:root {
  --color-orange: #c9a962;
  --color-orange-dark: #a08642;
  --color-cyan: #00d4ff;
  --color-success: #00ff88;
  --color-warning: #f59e0b;
  --color-error: #ff4757;
  --color-info: #00d4ff;
  --color-purple: #a855f7;
  --color-bg: #0a0a0f;
  --color-bg-secondary: #12121a;
  --color-bg-tertiary: #1a1a25;
  --color-bg-card: #15151f;
  --color-text: #ffffff;
  --color-text-secondary: #a0a0b0;
  --color-text-tertiary: #606070;
  --color-border: #2a2a3a;
  --color-border-dark: #3a3a4a;

  /* Agent Colors */
  --agent-ceo: #c9a962;
  --agent-cto: #00d4ff;
  --agent-cfo: #00ff88;
  --agent-cmo: #a855f7;
  --agent-coo: #ec4899;
  --agent-developer: #00d4ff;
  --agent-designer: #f43f5e;
  --agent-marketer: #a855f7;
  --agent-analyst: #00ff88;
  --agent-writer: #c9a962;
  --agent-support: #64748b;
  --agent-hr: #d946ef;

  /* Layout */
  --navbar-height: 56px;
  --sidebar-width: 240px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-glow: 0 0 20px rgba(201,169,98,.15);
  --font-nostalgia: "Geist Nostalgia", "Geist Mono", "SF Mono", monospace;
  --font-mono: "Geist Mono", "SF Mono", "Fira Code", monospace;
  --font-marketing: "Space Grotesk", -apple-system, sans-serif;
  --transition: .15s ease;
}

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Inkwell Complete Design System

Website

Overview

Colors

Primary & Accent

Backgrounds

Text, Border & Status

Typography

Buttons

Cards

Standard + Agent Cards

Bento Grid

Navigation

Hero Section

Build Your AI Company in Minutes

Section Spacing

Animations

Entrance (Staggered)

Pulse Glow & Shine

Spacing & Layout

Border Radius & Shadows

CSS Variables — Website

App / Portal

App / Portal Overview

Colors & Agent Map

Agent Color Map

Typography — App

Buttons — App

Forms

Cards — App

Stat Cards

Agent Cards

Task Card

Navigation — App

App Navbar

App Sidebar

Dashboard Layout

Company Dashboard

Tables

Modals

Deploy New Agent

Status Indicators

Terminal

Chat

Loading States

Spinners

Skeleton Screens

CSS Variables — App

Tailwind Mapping