Design System

The building blocks of ibedes.

Colors

Zag Palette

Zag Dark

var(--color-zag-dark)

Zag Light

var(--color-zag-light)

Zag Dark Muted

var(--color-zag-dark-muted)

Zag Light Muted

var(--color-zag-light-muted)

Zag Accent Light

var(--color-zag-accent-light)

Zag Accent Dark

var(--color-zag-accent-dark)

Theme Palette

Background

var(--background)

Foreground

var(--foreground)

Primary

var(--primary)

Secondary

var(--secondary)

Muted

var(--muted)

Accent

var(--accent)

Destructive

var(--destructive)

Border

var(--border)

Typography

Display Font (Press Start 2P)

The quick brown fox jumps over the lazy dog.

Serif Font (Literata Variable)

The quick brown fox jumps over the lazy dog.

Mono Font (IBM Plex Mono)

The quick brown fox jumps over the lazy dog.

Heading 1

Heading 2

Heading 3

Heading 4

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small text. Lorem ipsum dolor sit amet.

Components

Buttons

Dark Mode Preview (simulated)

Links

Inputs

Cards

Retro Marquee

Design System • Components • Typography • Colors • Design System • Components • Typography • Colors • Design System • Components • Typography • Colors • Design System • Components • Typography • Colors •

Spacing & Layout

Spacing Scale

Base spacing unit is 0.25rem (4px). Use these tokens for padding, margin, and gap.

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

Container

Standard container widths for responsive layouts.

sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Effects

Border Radius

sm
rounded-sm
default
rounded
md
rounded-md
lg
rounded-lg
full
rounded-full

Shadows

shadow-sm
shadow
shadow-md
shadow-lg

Icons

Hover over icons to see brand colors.