SystemFoundation
Search system...
Versionv2.0.1 Foundation Layer

Design System Foundation

A minimalist and clean structural guide establishing the core visual language, focusing on strict monochromatic hierarchy, precise typography, and consistent spatial rules.

1. Color Palette

Strict monochromatic scale for high contrast and clean interfaces.

6 tokens
Primary & Text
Black
#000000
Surface & Background
White
#FFFFFF
Grey 50 (App Bg)
#F5F5F5
UI Elements & Borders
Grey 100 (Lines)
#E5E5E5
Grey 400 (Muted)
#A3A3A3
Grey 600 (Subtext)
#525252

2. Typography

Clean sans-serif scale mapping logical hierarchy to pixel sizes.

Inter · 5 steps
Heading XL
36px / 40px / Bold
The quick brown fox
Heading L
24px / 32px / Semibold
The quick brown fox jumps over
Heading M
18px / 24px / Medium
The quick brown fox jumps over the lazy dog
Body Regular
14px / 20px / Regular
The quick brown fox jumps over the lazy dog. This text is used for primary paragraphs, descriptions, and general content areas where readability is paramount.
Body Small
12px / 16px / Regular
The quick brown fox jumps over the lazy dog. Used for meta data, captions, and secondary labels.

3. Spacing & Radius

Consistent 6px border-radius rule applied to structural components.

radius: 6px
6px
All cards, buttons, inputs, and structural containers utilize a strict 6px border radius.
Applied Example Card
Demonstrating radius and spacing
Versionv2.0.1 Component Library

UI Components

A complete set of interactive building blocks following strict monochrome aesthetics, 6px border radius, and clean typographic hierarchy.

4
Component Groups
6px
Border Radius
3
Button Variants
Mono
Color Palette

1. Buttons

Three interaction-level variants with consistent sizing and 6px radius.

border-radius: 6px
Primary bg: #000 · text: #FFF
Secondary bg: #FFF · border: #000 · text: #000
Ghost bg: transparent · no border · text: #000
Button Anatomy
padding 12px 20px (Default)
height 40px (Default) · 36px (Sm) · 48px (Lg)
radius 6px (all variants)
font Inter 14px / Medium

2. Badges & Tags

Compact labels for status, categories, and metadata. 6px radius throughout.

border-radius: 6px
Status Badges
Active Inactive Pending Live Archived
Category Tags
Dismissible Tags
Count & Notification Badges
Messages 4 Notifications 12 Updates 99+ Empty 0

3. Form Inputs

Clean text fields, selects, and textareas with consistent 6px radius and subtle borders.

border-radius: 6px
Input States
border: #E5E5E5 · bg: #FFF
text: #000 · border: #E5E5E5
border: 2px #000 · focused state
bg: #F5F5F5 · opacity: 60%
This field contains an error.
Validation passed.
Inputs with Icons & Affixes
https://
@domain.io
Select & Textarea
×
Composed Form Example

4. Checkboxes & Radios

Minimal monochrome selection controls with clear visual states.

Monochrome Style
Checkboxes
Radio Buttons
Toggle Switches
Applied Example — Settings Form
Notification Preferences
Enabled
Disabled
Enabled
Frequency
Versionv2.0.1 Spatial System

Layout & Spacing Guide

Precise spatial rules built on an 8pt grid foundation. Every spacing value, container, and layout decision derives from this system to ensure visual rhythm and consistency.

8pt
Base Grid Unit
7
Spacing Steps
6px
Border Radius
12
Column Grid

1. Grid System

All layout decisions are anchored to an 8pt base grid, with 4pt subdivisions for fine-grained alignment.

base unit: 8pt
8PT BASE GRID Primary spacing unit
8px cells
8px
16px = 2 units
24px = 3 units
32px = 4 units
40px = 5 units
grid: 8x8px
4PT SUBDIVISION Fine-grained alignment for icons, badges, labels
4px cells
4px — icon gap, tight padding
8px — default gap unit
12px — label spacing
16px — component padding
grid: 4x4px
12-COLUMN LAYOUT GRID 1000px canvas · 24px gutter · 16px margin
12 columns · 8px gutter
1 col — 64px 2 col — 136px 4 col — 280px 6 col — 424px (1/2) 8 col — 568px (2/3) 12 col — 856px (full)

2. Spacing Scale

Seven core spacing values derived from the 8pt grid. Each step doubles or follows a consistent progression.

8pt multiples
Visual Scale — Horizontal Bars
T-1
4px
0.5× unit · Icon gap, micro spacing
space-1
T-2
8px
1× unit · Base grid, tight gaps
space-2
T-3
16px
2× unit · Component padding, label gap
space-4
T-4
24px
3× unit · Card padding, section gap
space-6
T-5
32px
4× unit · Content blocks, inner sections
space-8
T-6
48px
6× unit · Section breaks, hero padding
space-12
T-7
64px
8× unit · Page sections, major layout gaps
space-16
Square Blocks Comparison
Each spacing value is a multiple of the 8pt base unit. 4px exists as a half-unit for fine micro-spacing only.
Spacing in Context — Annotated Card
Quick Actions
Last updated 2h ago
Spacing Specs
Card padding — 24px (T-4)
Icon-to-text gap — 8px (T-2)
Header-to-body gap — 16px (T-3)
Text line gap — 8px (T-2)
Body-to-action gap — 20px

3. Card Examples

How 6px radius applies to containers, cards, and elevated surfaces across the monochrome palette.

radius: 6px
Radius Scale Reference
0px
Square
4px
Subtle
6px
Standard
8px
Rounded
12px
Soft
50%
Pill / Avatar
The system standard is 6px for all structural elements. Pill (50%) is reserved for tags and avatars only.
Card Surface Variants — Monochrome Palette
Surface White ···
2,841
Active users this week
↑ +12.4% vs last week
Surface Grey-50 ···
$48,200
Revenue this month
↑ +8.1% vs last month
Surface Black ···
98.7%
System uptime
● No incidents reported
Container Hierarchy
Page Container · bg: #F5F5F5 · no radius
Section · bg: white · radius: 6px · shadow-soft
Card · radius: 6px
Card · radius: 6px
Card · radius: 6px

4. Composed Example

A hero content block demonstrating the full system in action — grid, spacing, radius, typography, and components unified.

Live composition
StudioOS
ProductPricingDocsBlog
Now in public beta

Design systems built for scale.

StudioOS gives your team the foundation to ship consistent, beautiful interfaces faster. Built on an 8pt grid with strict monochrome principles.

SC
JM
RT
+
Trusted by 4,200+ designers
★★★★★ 5.0 (640 reviews)
8pt Grid System
All spacing derived from a single base unit for perfect rhythm.
Monochrome Palette
Strict black-to-white scale for timeless, accessible interfaces.
6px Radius Rule
Consistent corner rounding across every structural element.
99.9%
Design consistency