Conduit Design System

A dark, hardcore, bleeding-edge design system for the modern developer control plane.

Brand Colors

Core palette for the Conduit identity.

Electric

Neon

Terminal

Destructive

Background

Card

Muted

Secondary

Primary

Typography

Geist Sans & Geist Mono for that SF tech aesthetic.

Display

The quick brown fox

Heading 1

The quick brown fox

Heading 2

The quick brown fox

Body

The quick brown fox jumps over the lazy dog.

Mono

const conduit = await connect();

Gradient Text

Bleeding edge infrastructure

Buttons

All button variants and sizes.

Badges

Status indicators and labels.

DefaultSecondaryOutlineDestructive

Electric Running Warning Error

Cards

Container components for content.

Device Card

A standard card component

Cards contain content and actions about a single subject.

Glowing Card

With electric glow effect

Use glow utilities for emphasis on important elements.

Gradient Card

Subtle gradient background

Gradients add depth and visual interest.

Inputs

Form controls and interactive elements.

Default Input

Disabled Input

Enable notifications

Auto-reconnect

Tabs

Organize content into switchable panels.

Manage your tmux sessions and terminal connections.

Effects & Utilities

Glows, grids, and visual effects.

bg-grid

bg-dots

glow-sm

glow-md

glow-lg

glow-neon

Terminal Preview

Simulated terminal output styling.

conduit@dev-server:~

$ conduit status

Checking device connections...

✓ dev-macbook (local) ONLINE

✓ prod-server (remote) ONLINE

⚡ cloud-vm-01 (cloud) RUNNING

3 devices connected

$ ▊