System v6.0 Online

#
Design
System

A comprehensive language for digital products. Built on the principles of clarity, physics, and restraint.

Figma
React
Tokens
A11y

## 01 / Typography

Display H1 / Inter Bold

# The quick brown
fox jumps over.

H2 / Inter SemiBold

## Digital Interface

Used for section headings and major content blocks. High contrast for scanability.

H3 / Inter Medium

### Component Architecture

Used for card titles and subsection headings. Balanced weight for readability.

Body Large

The design system provides a comprehensive suite of components, all built with accessibility in mind.

Body Default

Each component is designed to be flexible and composable, allowing for a wide range of use cases while maintaining consistency.

Body Small / Caption

Helper text, captions, and secondary information.

MONOSPACE LABEL

## 02 / Color System

Black
#000000
Primary Text
White
#FFFFFF
Surface
Neutral 100
#F5F5F5
Background
Neutral 500
#737373
Muted
Dark Gradient Overlay / Emphasis
Light Gradient Subtle Surface

## 03 / Components

### Button Architecture

#### Input Fields

#### Card Component

STATS

### Analytics Dashboard

View your performance metrics in real-time with advanced filtering.

View Details

#### Navigation Elements

## 04 / Icons

home
settings
user
notification
upload
security
• System V6 • Creative Combination • Aura Theme • Motion Styled • Responsive • Accessible • System V6 • Creative Combination • Aura Theme • Motion Styled • Responsive • Accessible