v1.0

Brand Guideline

The complete reference for Cmdflow's visual identity — design tokens, color palette, typography, spacing, motion, and component standards. All values map to CSS custom properties defined in app/globals.css.

IDENTITY

Brand Identity

Design Territory

Playful Premium

Cmdflow combines the discipline of premium technology companies with the warmth and personality of a product people enjoy spending time with.

Design Principles

Precision over Decoration

Every element must justify its existence. Decoration is earned through functional purpose.

Hierarchy through Restraint

Use whitespace and typography — not borders and shadows — to establish visual hierarchy.

Consistency is Freedom

Reusing components and patterns creates coherence, not limitation.

Content is the Interface

The design serves the content, not the reverse. Layout adapts to content.

Progressive Disclosure

Show what users need now. Reveal complexity when they ask for it.

Brand Personality

Creator-firstConfidentPlayfulFriendlyHelpfulIntelligentPremiumClearCuriousCapable

Primary principle: Clarity first. Personality second. Delight third. Complexity only when justified.

TOKENS

Color Palette

All colors are defined as CSS custom properties on :root. Dark mode values are pre-defined in the design system foundation but not yet implemented.

Surface & Background

Surface Base

--cmd-color-surface-base#FAFAF8

Surface

--cmd-color-surface#F0EFEB

Surface Elevated

--cmd-color-surface-elevated#FFFFFF

Surface Overlay

--cmd-color-surface-overlayrgba(0,0,0,0.04)

Text

Text Primary

--cmd-color-text-primary#1A1A18

Text Secondary

--cmd-color-text-secondary#6B6964

Text Muted

--cmd-color-text-muted#A09E98

Text Inverse

--cmd-color-text-inverse#FFFFFF

Text on Primary

--cmd-color-text-on-primary#FFFFFF

Brand / Primary

Primary Base

--cmd-color-primary-base#4A9EFF

Primary Hover

--cmd-color-primary-hover#3584E8

Primary Active

--cmd-color-primary-active#2569CC

Primary Muted

--cmd-color-primary-muted#E8F1FE

Primary Border

--cmd-color-primary-border#B8D6FE

Secondary

Secondary Base

--cmd-color-secondary-base#1A1A18

Secondary Hover

--cmd-color-secondary-hover#333230

Border

Border Subtle

--cmd-color-border-subtle#E2E0DB

Border Default

--cmd-color-border-default#D4D2CC

Border Strong

--cmd-color-border-strong#B8B5AD

Feedback — Success

Success

--cmd-color-success-base#22C55E

Success Muted

--cmd-color-success-muted#DCFCE7

Success Border

--cmd-color-success-border#86EFAC

Feedback — Warning

Warning

--cmd-color-warning-base#F59E0B

Warning Muted

--cmd-color-warning-muted#FEF3C7

Warning Border

--cmd-color-warning-border#FCD34D

Feedback — Danger

Danger

--cmd-color-danger-base#EF4444

Danger Muted

--cmd-color-danger-muted#FEE2E2

Danger Border

--cmd-color-danger-border#FCA5A5

Feedback — Info

Info

--cmd-color-info-base#4A9EFF

Info Muted

--cmd-color-info-muted#E8F1FE

Info Border

--cmd-color-info-border#B8D6FE

Focus & Selection

Focus Ring

--cmd-color-focus-ringrgba(74, 158, 255, 0.4)

Selection

--cmd-color-selectionrgba(74, 158, 255, 0.2)

TOKENS

Typography

Three-font system: Geist (display), Inter (body), JetBrains Mono (code). All fonts are self-hosted via next/font.

Font Family

Geist

Display / Headings

Font Family

Inter

Body / UI

Font Family

Mono

JetBrains Mono / Code

Display Scale (Geist)

Level	Size	Line Height	Letter Spacing	Weight
XL	clamp(2.5rem, 5vw, 4.5rem)	1.0	-0.02em	700
L	clamp(2rem, 4.5vw, 3.75rem)	1.05	-0.02em	700
M	clamp(1.75rem, 3.5vw, 3rem)	1.1	-0.015em	600
S	clamp(1.5rem, 2.5vw, 2.25rem)	1.15	-0.01em	600

Heading Scale (Geist, 600 weight)

Level	Size	Line Height	Letter Spacing
H1	clamp(2rem, 5vw, 3.815rem) (61px)	1.2	-0.02em
H2	clamp(1.6rem, 4vw, 3.052rem) (48.8px)	1.25	-0.015em
H3	clamp(1.35rem, 3vw, 2.441rem) (39px)	1.3	-0.01em
H4	clamp(1.15rem, 2.5vw, 1.953rem) (31.2px)	1.35	-0.005em
H5	clamp(1rem, 2vw, 1.563rem) (25px)	1.4	0em
H6	clamp(0.875rem, 1.5vw, 1.25rem) (20px)	1.4	+0.01em

Body Scale (Inter, 400 weight)

Level	Size	Line Height	Use
Large	1.125rem (18px)	1.6	Hero subtext, lead paragraphs
Medium	1rem (16px)	1.6	Default body text
Small	0.875rem (14px)	1.55	Secondary text, descriptions

Utility Scale

Level	Size	Line H	Weight	Use
Caption	0.8125rem (13px)	1.4	400	Timestamps, photo credits
Overline	0.75rem (12px)	1.3	500	Uppercase section labels, eyebrow text
Code	0.875rem (14px)	1.6	400	Inline code, code blocks (JetBrains Mono)
Button	0.875rem (14px)	1	500	All button labels (Geist)
Label	0.8125rem (13px)	1.2	500	Form labels, input labels (Inter)
Small	0.75rem (12px)	1.4	400	Legal text, footnotes

TOKENS

Spacing

An 18-step spacing scale based on 0.25rem (4px) increments. Use these values exclusively — no arbitrary spacing values.

Spacing Scale

0

0.125rem

0.25rem

0.5rem

0.75rem

1rem

1.25rem

1.5rem

2rem

2.5rem

3rem

3.5rem

4rem

5rem

6rem

8rem

12rem

16rem

Semantic Spacing

Token	Value	Use
`--cmd-spacing-stack-xs`	--cmd-spacing-2 (0.5rem)	Tight content groups (label + input)
`--cmd-spacing-stack-sm`	--cmd-spacing-4 (1rem)	Related content (heading + paragraph)
`--cmd-spacing-stack-md`	--cmd-spacing-6 (1.5rem)	Distinct content blocks
`--cmd-spacing-stack-lg`	--cmd-spacing-10 (2.5rem)	Major sections within a page area
`--cmd-spacing-inline-xs`	--cmd-spacing-2 (0.5rem)	Tight inline elements (icon + text)
`--cmd-spacing-inline-sm`	--cmd-spacing-3 (0.75rem)	Button groups, tag groups
`--cmd-spacing-inline-md`	--cmd-spacing-4 (1rem)	Form field groups, navigation items
`--cmd-spacing-inline-lg`	--cmd-spacing-6 (1.5rem)	Larger inline groupings

Section Spacing

Token	Desktop	Tablet	Mobile
`--cmd-spacing-section-padding`	8rem (128px)	4rem (64px)	3rem (48px)
`--cmd-spacing-section-gap`	4rem (64px)	2.5rem (40px)	2rem (32px)
`--cmd-spacing-section-inner`	3rem (48px)	2rem (32px)	1.5rem (24px)

TOKENS

Border Radius

Cmdflow uses soft corners for a friendly feel without becoming childish. Controlled rounded geometry with occasional pill shapes for labels and compact controls.

--cmd-radius-none

Containers, structural elements

--cmd-radius-sm

0.25rem (4px)

Buttons, inputs, badges

--cmd-radius-md

0.5rem (8px)

Cards, dialogs, dropdowns

--cmd-radius-lg

1rem (16px)

Sections, feature panels

--cmd-radius-xl

1.5rem (24px)

Hero, full-bleed containers

--cmd-radius-full

9999px

Pills, avatars, toggle handles

TOKENS

Shadows

Shadows are used sparingly. Default cards rely on surface contrast, borders, and layering rather than shadows.

Card

--cmd-shadow-card0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)

Elevated

--cmd-shadow-elevated0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)

Modal

--cmd-shadow-modal0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05)

Dropdown

--cmd-shadow-dropdown0 4px 12px rgba(0,0,0,0.08)

Button

--cmd-shadow-button0 1px 2px rgba(0,0,0,0.05)

TOKENS

Motion

Motion should explain, guide, reward, or create memory. If an animation does none of these, remove it. All motion respects prefers-reduced-motion.

Duration Scale

Token	Value	Use
`--cmd-motion-duration-instant`	50ms	Micro-interactions, color transitions
`--cmd-motion-duration-fast`	100ms	Hover states, active states, button feedback
`--cmd-motion-duration-normal`	200ms	Generic UI transitions, dropdowns, tooltips
`--cmd-motion-duration-slow`	300ms	Modal enter, drawer slide, card hover elevation
`--cmd-motion-duration-reveal`	400ms	Scroll reveals, staggered entries, accordion expand
`--cmd-motion-duration-page`	500ms	Page transitions, section morph
`--cmd-motion-duration-hero`	700ms	Hero initial animation, gradient cycle
`--cmd-motion-duration-hero-max`	1200ms	Maximum hero animation duration

Easing Curves

Token	Curve	Character	Use
`--cmd-motion-ease-default`	cubic-bezier(0.2, 0, 0, 1)	Smooth, professional	Most UI animation
`--cmd-motion-ease-enter`	cubic-bezier(0, 0, 0.2, 1)	Swift, decisive	Elements entering viewport
`--cmd-motion-ease-exit`	cubic-bezier(0.4, 0, 1, 1)	Quick, clean	Elements leaving viewport
`--cmd-motion-ease-linear`	cubic-bezier(0, 0, 1, 1)	Constant	Continuous motion
`--cmd-motion-ease-emphasis`	cubic-bezier(0.16, 1, 0.3, 1)	Dynamic, premium	WOW moments, hero entrance

SYSTEM

Layout & Grid

12-column responsive grid with content-driven breakpoints. Use container-site, container-narrow, and container-bleed utilities.

Breakpoints

Name	Min Width	Container Max	Columns
sm	640px	100%	4
md	768px	720px	8
lg	1024px	960px	12
xl	1280px	1216px	12
2xl	1536px	1280px	12

Z-Index Scale

Token	Value	Use
`--cmd-z-base`	0	Default content
`--cmd-z-sticky`	10	Sticky headers, section navs
`--cmd-z-dropdown`	20	Dropdown menus, tooltips
`--cmd-z-header`	30	Main navigation header
`--cmd-z-backdrop`	40	Modal/drawer backdrops
`--cmd-z-modal`	50	Modal dialogs, drawers
`--cmd-z-toast`	60	Toast notifications
`--cmd-z-tooltip`	70	Tooltips (on top of modals)
`--cmd-z-palette`	80	Command palette
`--cmd-z-maximum`	100	Loading overlays, blocking UI

ASSETS

Brand Assets

Download official Cmdflow brand assets for media, press, and partner use.

Design Review Scorecard

Every major page and section must be reviewed on: Brand Fit, Clarity, Originality, UX, Visual Hierarchy, Copy Quality, Motion Purpose, Accessibility, Responsive Quality, Performance Cost, Technical Feasibility, Scalability, Conversion Impact, Maintainability. No major section should proceed with any score below 7 or Brand Fit/Clarity below 9.

Last updated from design.md and DESIGN-SYSTEM-FOUNDATION.md

Brand Guideline

Brand Identity

Design Territory

Design Principles

Brand Personality

Color Palette

Surface & Background

Text

Brand / Primary

Secondary

Border

Feedback — Success

Feedback — Warning

Feedback — Danger

Feedback — Info

Focus & Selection

Typography

Geist

Inter

Mono

Display Scale (Geist)

Heading Scale (Geist, 600 weight)

Body Scale (Inter, 400 weight)

Utility Scale

Spacing

Spacing Scale

Semantic Spacing

Section Spacing

Border Radius

Shadows

Motion

Duration Scale

Easing Curves

Layout & Grid

Breakpoints

Z-Index Scale

Brand Assets

Logos

Icons

Cover Images

Meta / Social

Documents

Design Review Scorecard