Design System

A minimalist guide to the typography, colors, and components used by Mazed.

Primary white logo for dark backgrounds.

Download SVG

Typography

Display

Mazed AI

.text-display (Satoshi Variable)

Heading

Build Agents

.text-heading (Satoshi Variable)

Subheading

Multimodal platform for enterprise

.text-subheading (Satoshi Variable)

Body

Connect to your knowledge base and tools. Automate and augment customer service and business operations. Build flows to navigate complex workflows delivering fast resolutions.

.text-body (Satoshi Variable)

Small / Mono

System status: Operational

.text-small .font-mono (Geist Mono)

Colors

Backgrounds

bg-default

--color-bg

#000000

bg-subtle

--color-bg-subtle

#0a0a0a

bg-muted

--color-bg-muted

#111111

bg-container

--color-bg-container

#1D1D1D

Text

text-default

--color-text

#ffffff

text-muted

--color-text-muted

#a3a3a3

text-subtle

--color-text-subtle

#737373

Borders

Note: Main layout containers and section blocks generally do not have borders. Borders should be reserved for interactive selectors, inputs, or stacked inner cards where distinction is needed.

border-default

--color-border

#262626

border-muted

--color-border-muted

#1a1a1a

Accents & Brand

Usage Note: The Brand Green (#4DC991) is a strong identity color but should be used sparingly (e.g., small graphics, dots, hover states). Avoid using it for large backgrounds or saturated areas to maintain the dark, minimalist aesthetic.

Neutral Accent

accent

--color-accent

#e5e5e5

Brand Green

brand

--color-brand

#4dc991

brand-dark

--color-brand-dark

#0E291C

Brand Blue

brand-blue

--color-brand-blue

#0066FF

brand-blue-dark

--color-brand-blue-dark

#00193F

Iconography

System Icons

We use Lucide React for system icons. Icons should be consistent in stroke width (typically 2px) and size (16px, 20px, 24px).

Usage Guidelines

Use icons to enhance navigability, not just for decoration.
Pair with text where ambiguity might exist.
Interactive icons should have a hover state (usually text-white or bg-white/10).

Buttons

Primary (Gooey)

Used for main Calls to Action.

Standard Variants

Brand & Accent

Use brand colors for specific feature actions or success states.

Forms & Inputs

Input Fields

Email Address

[email protected]

Search documentation...

Inputs use a black background to stand out from the subtle gray backgrounds of cards. Focus states use a white ring.

Status Indicators

NeutralBrandBlueErrorWarning

Badges are used for status, tags, or categories. They should always have rounded-full corners.

Effects & Animations

Shimmering Text

MULTIMODAL-FIRST

Subtle luxury shimmer effect. Best used for tags or highlight text.

Blur In Up

Blur In Up Animation

animation="blurInUp" by="word"

Clean entry animation for headings.

Shine Border

High-Value Container

Animated border gradient for emphasizing premium containers or active states.

Cards & Containers

Standard Card Stacking

Nested Card Structure

The "Ray-de-fit" (Radii Fit) Rule: When nesting rounded containers, the inner radius should be slightly smaller than the outer radius to create concentric harmony.

Outer Container: 32px (e.g., Main Sections)
Middle Container: 24px (e.g., Feature Cards)
Inner Element: 16px (e.g., Buttons/Inputs inside cards)
Micro Element: 8px-12px (e.g., Tags, small icons)

Formula: R_inner = R_outer - Padding (approximate).

Spacing & Layout

Container Widths

Mobile100%

Tablet800px

Desktop1280px

Section Spacing

Mobile
64px

Tablet
80px

Desktop
96px

Design Principles

Minimalism & Reduction

Avoid decoration for decoration's sake. Every element should have a purpose. If a border or background isn't necessary for hierarchy, remove it. Use negative space (whitespace) as an active design element to let content breathe.

Intelligent Contrast

Guide the user's eye using contrast in size, weight, and color opacity (e.g., White vs. Gray vs. Dark Gray) rather than relying solely on vibrant colors. The hierarchy should be clear even in grayscale.

"Apple-like" Elegance

Strive for smooth, organic curves (generous border radii) and fluid animations. The interface should feel premium and polished. Avoid harsh lines, cluttered layouts, or overly "tech/sci-fi" aesthetics.

Composition

Balance elements symmetrically where possible, or use purposeful asymmetry for dynamic tension. Ensure alignment is strict—elements should align to the grid or to each other perfectly.

Fluid Responsiveness & Harmony

Always design with both Mobile and Desktop perspectives simultaneously. Components should intelligenty reconfigure and fit their parent containers across breakpoints. Avoid optimizing for one screen size at the expense of another; ensure spacing and layout transform harmoniously to create a cohesive experience everywhere.

Invisible Motion & Physics

Animation should feel natural and physical, not linear or robotic. We combine Framer Motion (Motion), ShadCN UI, and Tailwind CSS to create interactions that are subtle but have character.

Physics-Based: Use springs (stiffness/damping) instead of fixed durations where possible.
Intentionality: Every motion must have a reason (e.g., spatial continuity).

Subtlety: The best animation is often the one you don't consciously notice but feel.
Responsiveness: Interactions should yield immediately to user input.