← Voltar

Design System v13

MAGNETIC
FIELD

Interactive Forces — Push the field. Watch it return.

Scroll

01 — Typography

Type Scale

Syne — Headings

Display

Syne 800 · 56px · -3%

Heading 1

Syne 700 · 40px · -1%

Heading 2

Syne 600 · 28px

Heading 3

Syne 600 · 20px

Space Mono — Body & Code

The quick brown fox jumps over the lazy dog. Particle systems create emergent complexity from simple rules applied at scale.

Space Mono 400 · 15px · 1.7

Caption and metadata text. Used for labels, timestamps, and auxiliary information across the system.

Space Mono 400 · 13px · 1.6

const magnetic = new Field();
magnetic.repel(cursor, 120);
magnetic.spring(0.85);

02 — Color

Palette

Electric Indigo
#6C3BFF — Primary
Soft Violet
#B794F4 — Secondary
Deep Space
#0D0D1A — Background
Ghost White
#F0EDFF — Foreground
Magenta Accent
#FF3BFF — Accent

03 — Components

Buttons

All buttons have magnetic attraction — hover to feel the pull.

03 — Components

Form Inputs

03 — Components

Cards

Cards repel the cursor — move your mouse over them.

⚡
Particle Engine
High-performance canvas-based particle simulation with spring physics, velocity damping, and real-time cursor interaction.
Physics
★
Magnetic Components
Every interactive element responds to cursor proximity with subtle attraction and repulsion forces for a tactile feel.
Interaction
◆
Type System
Carefully crafted typographic scale using Syne for display text and Space Mono for technical and body content.
Typography

04 — Grid

Grid System

12
6
6
4
4
4
3
3
3
3
8
4
2
2
2
2
2
2

05 — Spacing

Spacing Scale

sp-1
4px
sp-2
8px
sp-3
12px
sp-4
16px
sp-6
24px
sp-8
32px
sp-10
40px
sp-12
48px
sp-16
64px
sp-24
96px
sp-32
128px