Design System

A comprehensive guide to Graphics Studio's visual language, components, and design principles

Typography

Our type system uses Satoshi font family with carefully crafted scales for hierarchy and readability across all devices.

Display Styles

Display 1
The quick brown fox
Font: Satoshi Bold / Size: 80px / Weight: 700 / Letter Spacing: -0.03em
Display 2
The quick brown fox
Font: Satoshi Bold / Size: 56px / Weight: 700 / Letter Spacing: -0.03em

Heading Styles

Heading 1
The quick brown fox jumps
Font: Satoshi Bold / Size: 48px / Weight: 700 / Letter Spacing: -0.03em
Heading 2
The quick brown fox jumps
Font: Satoshi Bold / Size: 40px / Weight: 700 / Letter Spacing: -0.03em
Heading 3
The quick brown fox jumps over
Font: Satoshi Medium / Size: 28px / Weight: 600 / Letter Spacing: -0.02em
Heading 4
The quick brown fox jumps over the lazy
Font: Satoshi Medium / Size: 24px / Weight: 600 / Letter Spacing: -0.01em

Body Styles

Body Large
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Font: Satoshi Regular / Size: 20px / Weight: 400 / Line Height: 1.7
Body Regular
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. The five boxing wizards jump quickly.
Font: Satoshi Regular / Size: 17px / Weight: 400 / Line Height: 1.7
Body Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. The five boxing wizards jump quickly and vow to help fix the prize.
Font: Satoshi Regular / Size: 16px / Weight: 400 / Line Height: 1.7
Caption
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Font: Satoshi Regular / Size: 14px / Weight: 400 / Line Height: 1.6

Color System

Our adaptive color palette is designed for optimal contrast, readability, and visual hierarchy with sophisticated gradients that work in both light and dark modes.

Primary Colors

Primary Gradient
Start: #ffffff End: #d0d0d0
White
HEX: #ffffff RGB: 255, 255, 255
Light Gray
HEX: #E5E5E7 RGB: 229, 229, 231
Medium Gray
HEX: #A1A1A6 RGB: 161, 161, 166

Semantic Colors

Success
HEX: #4ade80 RGB: 74, 222, 128
Error
HEX: #f87171 RGB: 248, 113, 113
Warning
HEX: #fbbf24 RGB: 251, 191, 36
Info
HEX: #60a5fa RGB: 96, 165, 250

Neutral Colors

Neutral Gray
HEX: #666666 RGB: 102, 102, 102
Light Neutral
HEX: #888888 RGB: 136, 136, 136
Silver
HEX: #a0a0a0 RGB: 160, 160, 160
Light Silver
HEX: #d0d0d0 RGB: 208, 208, 208

Components

Reusable UI components with consistent styling and interactive states.

Buttons

Cards

Icon Card

Cards with icons provide visual context and improve scanability of content.

Simple Card

Basic card component for displaying content with consistent spacing and hierarchy.

Feature Card

Feature cards highlight key benefits with visual elements.

Input Fields

Accordion

What is a design system?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It ensures consistency and efficiency across products.
How do I use these components?
Each component includes detailed documentation, code examples, and best practices. Simply copy the code and customize it to fit your specific needs while maintaining the design guidelines.
Can I customize the theme?
Yes! The design system supports both light and dark themes. You can toggle between themes using the theme switcher in the navigation bar. All components automatically adapt to the selected theme.

Value Proposition Cards

Design Excellence

Create stunning, modern interfaces that captivate users and elevate your brand with our comprehensive design system.

Spacing System

Consistent spacing scale based on 4px increments for harmonious layouts.

4px (0.25rem)
8px (0.5rem)
12px (0.75rem)
16px (1rem)
24px (1.5rem)
32px (2rem)
48px (3rem)
64px (4rem)
80px (5rem)
96px (6rem)

Icon System

Font Awesome icons used consistently throughout the interface for clear communication.

Image
Video
Palette
Magic
Bolt
Brush
Check
Star
Heart
User
Settings
Search

Border Radius

Smooth, rounded corners create a modern and friendly aesthetic.

8px - Small
12px - Medium
16px - Large
20px - XLarge
24px - XXLarge
100px - Pill

Shadow System

Elevation and depth created through carefully crafted shadow layers.

Small Shadow
Medium Shadow
Large Shadow
Extra Large
Glow Effect

Data Visualization

Comprehensive data visualization components including charts, scorecards, and tables styled to match the design system.

Total Revenue
$124.5K
+12.5% vs last month
Active Users
8,429
+8.2% vs last month
Conversion Rate
3.24%
-2.1% vs last month
Avg. Session
4:32
No change

Bar Chart

Line Chart

Doughnut Chart

Data Table

Product Revenue Growth Status
Design System Pro $45,200 +15.2% Active
Component Library $32,450 +8.7% Active
UI Kit Bundle $28,900 -3.2% Active
Templates Pack $18,750 +22.1% Inactive
Icon Collection $12,300 0% Active

Feedback Components

Interactive components for user communication and system feedback.