Artboards Design System

A dark-first UI architecture built for scalable, high-performance web tools. Premium SaaS aesthetic. Zero dependencies. Visually disciplined.

Design Philosophy

Core Identity

  • Dark-first
  • Neon-accented
  • Depth layered
  • Premium SaaS
  • Creator-focused
  • Privacy-first
  • Zero dependency

Not

  • Glass overload
  • Gradient spam
  • Generic Tailwind UI
  • Light theme clone
  • Startup template #42

Emotional Tone

Powerful but calm. Technical but creative. Advanced but accessible.

Color System

Background Hierarchy

bg0
bg1
bg2
bg3
bg4

Never jump randomly between layers. Spatial logic matters.

Accent Tokens

Primary
Creative
Info
Success
Warning

Max 2 accent colors per component.

Typography

Hero Heading

Section Heading

Card Title

Body text sample 15–16px.

Small text 13px.

Micro text 12px.

4.2%

Engagement Rate

Layout System

8px
16px
24px
32px
48px
64px

Card System

Base Card
Hover Card

Button System

Motion Principles

Fade In Demo

Background System

Subtle grid. 1–3 blurred gradient orbs. Never oversaturated.

Form System

Data Display

4.2% Engagement Rate

Responsive Rules

Mobile-first. Stack vertically. Two-column desktop only.

Accessibility

  • Visible focus states
  • Proper contrast
  • ARIA support
  • Keyboard navigation

Monetization Layer

PRO Premium feature preview

Brand Consistency

  • Same nav system
  • Same toast
  • Same spacing rhythm
  • Same gradient
  • Same typography