Artisan Studio Design System

v2.4.0 • Arts & Creative Direction

Brand Identity

Artisan Studio represents the intersection of traditional craftsmanship and modern digital design. Our visual language is warm, expressive, and meticulously structured.

Mission
To empower brands through intentional, human-centered design that balances aesthetic beauty with functional clarity.
Design Philosophy
Every pixel serves a purpose. We prioritize readability, accessibility, and emotional resonance while maintaining strict consistency across all touchpoints.
Voice & Tone
Professional yet approachable. Creative but precise. We speak with confidence, clarity, and warmth—never pretentious, always purposeful.
Usage Guidelines
Maintain minimum clear space equal to the logo height. Avoid stretching, recoloring, or placing on busy backgrounds. Always use approved color tokens.

Color Palette

Our colors are carefully calibrated for contrast, accessibility, and brand recognition across light and dark contexts.

Typography

A harmonious pairing of serif and sans-serif typefaces creates hierarchy, readability, and editorial elegance.

H1 Heading Playfair Display / 48px / Bold
H2 Heading Playfair Display / 36px / SemiBold
H3 Heading Playfair Display / 28px / SemiBold
H4 / Body Large Inter / 20px / Medium
Body Regular Inter / 16px / Regular
Body Small Inter / 14px / Regular
Code / Caption Monospace / 13px / Regular

Spacing & Grid

Based on an 8px baseline grid for consistent rhythm and alignment across all layouts.

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
--space-1: 4px | --space-2: 8px | --space-3: 12px | ... | --space-20: 80px

Elevation & Shadows

Layered depth system that adapts to light and dark themes.

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

Buttons

Interactive triggers with clear hierarchy and accessible focus states.

Variants

Sizes

With Icons

Inputs & Forms

Accessible form controls with clear validation states.

Standard Input
Input Group
Select

Badges & Tags

Compact status indicators for categorization and metadata.

New Approved Review Rejected Draft

Alerts & Notifications

Contextual messaging for user feedback and system status.

ℹ️ Information
A new version of the design system is available for review.
✅ Success
Your project files have been uploaded successfully.
⚠️ Warning
Storage limit reached. Consider archiving old assets.
❌ Error
Failed to sync design tokens. Please check your connection.

Interactive Controls

Toggles, checkboxes, and switches for user preferences.

System Theme

Cards

Container components for grouping related content.

🖼️
Project Card
Used for displaying design projects, case studies, and portfolio items with metadata.
📊
Analytics Card
Displays metrics, progress indicators, and performance data for campaigns.
👤
Team Member
Profile cards with role, contact info, and availability status for collaboration.
🔔
Activity Feed
Chronological updates, comments, and system notifications in a scrollable container.
Copied to clipboard!