01
Typography
1,240
Hero headline, two lines
of monumental text
of monumental text
Page title, one line
Section title — clear, open
Subtitle — supporting hierarchy
Lead paragraph — introduces a section with calm authority and measured pace.
Body text establishes the reading rhythm of the system. Set at 16px with generous line-height, it ensures long-form content remains effortlessly legible.
Secondary body — descriptions, supporting text, captions of substance
Caption text — metadata, timestamps, auxiliary information
Form label — 14px medium
MICRO LABEL — UPPERCASE · 10PX · WEIGHT 500
02
Color
Monochromatic base
--color-white
#FFFFFF
Fondo principal
--color-surface
#FAFAFA
Cards y paneles
--color-surface-raised
#F4F4F4
Hover, inputs reposo
--color-border
#E8E8E8
Bordes, separadores
--color-border-strong
#D0D0D0
Inputs activos
--color-text-disabled
#BDBDBD
Disabled, placeholders
--color-text-tertiary
#9E9E9E
Captions, metadatos
--color-text-secondary
#616161
Texto de apoyo
--color-text-primary
#212121
Texto principal
--color-black
#0A0A0A
Énfasis máximo
Accent options — pick one only
Opción A — frío
#0066FF
Azul eléctrico
Opción B — tierra
#2D5016
Verde oscuro orgánico
Opción C — neutro
#8B6F47
Marrón arena
Opción D — puro
#000000
Negro absoluto
Signal colors — state only, never decorative
Info
#0066FF
Success
#16A34A
Warning
#D97706
Error
#DC2626
03
Buttons
Variants
Sizes — primary
With icons
04
Inputs & Forms
We'll never share your email.
As it appears on your ID.
Password must be at least 8 characters.
Cannot be modified.
Markdown supported.
05
Cards
Variants
Base card
Hover to reveal shadow elevation. Border present at rest.
Flat card
No shadow. Surface background. Border only.
Elevated card
No border. Permanent md shadow. Highest tier.
Interactive + stat + profile
Interactive
Hover to lift. Click to select. Cursor pointer.
24,801
Active users this month
MG
Maria García
Product Designer
07
Tables
| Project | Status | Owner | Revenue | Users | |
|---|---|---|---|---|---|
| Atlas Platform | Active | M. García | $48,200 | 3,841 | |
| Meridian API | Review | J. Robles | $12,450 | 921 | |
| Vox Interface | Draft | A. Chen | — | — | |
| Forma SDK | Archived | T. Nakamura | $6,100 | 204 |
08
Badges & Tags
Neutral
Active
Pending
Failed
Info
Atlas Platform
Active
— two badges max per context
Forma SDK
Archived
v2.4
09
Alerts
Information
Your session will expire in 15 minutes. Save your work before it ends.
Changes saved
Your profile has been updated successfully.
Review required
Two projects have passed their deadline. Immediate action is recommended.
Authentication failed
Invalid credentials. Please check your email and password and try again.
10
Modals & Overlays
Preview (inline)
Edit profile
11
Menus & Dropdowns
12
Tooltips
Appears after 400ms delay on hover
12px · weight 400 · max-width 220px · no shadow
Ctrl+S — saves and publishes immediately
13
Progress & Loading
Progress bar — 2px height only
Upload
78%
Processing
34%
Storage used
91%
Top-of-page bar
Page load indicator — top edge, 2px, no spinner
Loading states
20px spinner · stroke 1.5px · 800ms
Skeleton — pulse opacity 1→0.5→1 · 1.5s
14
Page composition
01
Design reduced
to its essence
to its essence
A visual system built on discipline. Every element present has earned its place.
24k
Active users
98%
Uptime SLA
4.2s
Avg. response
Recent projects
Active
Atlas Platform
Core infrastructure for distributed data pipelines and analytics.
Updated 2h ago
Review
Meridian API
RESTful service layer connecting external partners to core data.
Updated yesterday
Draft
Vox Interface
Experimental voice-first interaction model for ambient devices.
Updated 4d ago
Get in touch
We respond within one business day. For urgent matters, use the priority channel.
© 2026 Studio. All rights reserved.
PRINCIPIOS DEL SISTEMA
─────────────────────
01 Lo que se elimina define el diseño.
02 El espacio vacío no es ausencia.
Es el elemento más poderoso.
03 Una familia tipográfica.
Toda la jerarquía posible.
04 El color señaliza. No decora.
05 Cada animación debe ser invisible
cuando funciona correctamente.
06 La consistencia no admite excepciones.
07 La perfección es la ausencia de
lo que no necesita estar.
─────────────────────
MINIMALISM DESIGN SYSTEM — v1.0