Color & Spacing
The difference between an amateur and a pro design often comes down to Consistency. Learn how to use our precision sliders to create perfect breathing room for your content.
The Spacing Science
Padding vs Margin
In MockaUI, we use the 4px grid system. Most padding and margin controls map to Tailwind units (p-4 = 16px).
Controls the space between the **border** and the **content**. Use this to make elements feel larger and more touchable.
Controls the space between **components**. Use this to create separate "logical chunks" in your layout.
Visualizing the Box Model
inside Design Mode
Advanced Color Control
The Color Picker
Every color field supports HEX, RGBA, and HSL. For dark mode, we recommend using HSL for better shade control.
Semantic Colors
MockaUI uses Primary, Secondary, and Accent tags to ensure that when you change a main brand color, it propagates.
Opacity Sliders
Create depth using alpha channels. Backgrounds at 10% opacity create perfect subtle "card" feels.
The "80% Rule" for Spacing
Professional designers often find that a layout feels "wrong" because it's too cramped. If you're unsure, try increasing your vertical padding (py-XX) by another 20%. White space is not empty space—it's active design.
Explore Design Systems →