Design System
A minimalist guide to the typography, colors, and components used by Mazed.
Primary white logo for dark backgrounds.
Download SVGTypography
Colors
Backgrounds
Text
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.
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
Brand Green
Brand Blue
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-whiteorbg-white/10).
Forms & Inputs
Input Fields
Inputs use a black background to stand out from the subtle gray backgrounds of cards. Focus states use a white ring.
Status Indicators
Badges are used for status, tags, or categories. They should always have rounded-full corners.
Effects & Animations
Shimmering Text
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
Animated border gradient for emphasizing premium containers or active states.
Cards & Containers
Standard Card Stacking
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
Section Spacing
64px
80px
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.