Design Principles

Our core philosophy guides every pixel, interaction, and decision. These principles ensure clarity, consistency, and user-centricity.

🎯

Clarity Over Cleverness

Interfaces should communicate their purpose immediately. Avoid decorative elements that obscure functionality or confuse users.

🔄

Consistent & Predictable

Reinforce familiarity through reusable patterns. Users should never guess how an interaction behaves if they've seen it before.

⚡

Delightful Performance

Subtle animations and micro-interactions provide feedback and guide attention without sacrificing speed or accessibility.

♿

Inclusive by Default

Every design must meet WCAG 2.1 AA standards. Accessibility isn't an afterthought—it's a foundational requirement.

02

Color System

Our palette is engineered for contrast, brand recognition, and functional hierarchy. Use semantic naming in code.

Primary

#6C3CE1

Accent

#F97316

Background

#0F0F1A

Surface

#1A1A2E

Success

#22C55E

Error

#EF4444

💡 Usage Rule: Use Primary for key CTAs and interactive states. Reserve Accent for secondary actions, highlights, or data visualization. Never use Accent for primary text or critical status indicators.

03

Typography

We use a dual-font system for optimal readability and modern aesthetics. Headings use Space Grotesk; body and UI use Inter.

Space Grotesk 700 / 3rem

Display Heading

Space Grotesk 600 / 2.25rem

Section Title

Space Grotesk 600 / 1.75rem

Card / Feature Title

Space Grotesk 500 / 1.35rem

Subtitle / Label

Inter 400 / 1rem

Body text is set in Inter Regular. Line height is 1.6 for optimal readability across paragraphs and documentation.

Inter 400 / 0.85rem

Captions, metadata, and helper text use a smaller size with reduced contrast.

04

Spacing & Grid

We follow an 8pt baseline grid system. All spacing, sizing, and margins should be multiples of 8 to maintain visual rhythm.

Token	Value (px)	Usage
--space-xs	4	Icon padding, micro gaps
--space-sm	8	Form elements, small margins
--space-md	16	Card padding, list spacing
--space-lg	24	Section gaps, button heights
--space-xl	32	Page margins, large blocks
--space-2xl	48	Hero sections, major dividers

📐 Grid: Desktop uses a 12-column grid with 24px gutters. Mobile collapses to a 4-column grid with 16px gutters. Always align content to the nearest grid line.

05

UI Components

Standardized components ensure rapid development and consistent user expectations. Always use the design system variants.

Buttons

Primary: Main conversion goals, limited to 1 per screen
Secondary: Tertiary actions, back navigation
Accent: Highlights, promotions, non-critical CTAs
Min touch target: 44×44px

Inputs & Forms

Labels always positioned above fields
Placeholder text is supplementary, never replaces labels
Error states use red border + inline message
Focus rings must be visible (2px solid primary)

Cards & Containers

Radius: 12px standard, 16px for hero cards
Padding: 24px desktop, 16px mobile
Shadows replaced with subtle borders for performance
Hover states: border-color shift + 2px translateY

06

Accessibility Standards

Every PixelCraft product must comply with WCAG 2.1 AA. These are non-negotiable baseline requirements.