UI Guidelines

The design system and component library for Brandled. This guide defines our typography, colors, spacing, and interaction patterns to ensure a consistent, professional, and accessible user experience.

ATypography System

Font Family

Inter

Single Font Family - Clean, Neutral, Highly Readable

The quick brown fox jumps over the lazy dog.

Font Weights

Regular (400)Aa
Medium (500)Aa
SemiBold (600)Aa
Bold (700)Aa

Type Hierarchy

Heading 1

text-4xlfont-bold

Heading 2

text-2xlfont-semibold

Heading 3 / Sub-section

text-lgfont-semibold

Body text. Used for main content blocks. Line height is set to ensure readability across long paragraphs. Ideally between 1.5 and 1.6 for comfortable reading.

text-basefont-normalleading-relaxed

Caption / Small text. Used for helper text, meta data, and secondary information.

text-smtext-base-content/70

BColor System

Semantic Roles

Primary

#292929 - Neutral/Dark Action

Secondary

Supporting

Accent

Highlights (Brndled Red)

Success

Professional Green

Warning

Warm Amber

Error

Muted Red

Neutral / Gray Scale

80% of the UI should consist of these neutral tones to maintain hierarchy and focus.

50

100

200

300

400

500

600

700

800

900

CSpacing & Layout

Base Spacing Unit (8px)

4px
class: *-1
8px
class: *-2
12px
class: *-3
16px
class: *-4
24px
class: *-6
32px
class: *-8
48px
class: *-12
64px
class: *-16

Layout Constants

  • Max Content Width1200px
  • Section Paddingpy-12 px-6 (48px / 24px)
  • Card Paddingp-6 (24px)
  • Gap (Small)gap-4 (16px)
  • Gap (Large)gap-8 (32px)

DButton System

Variants

btn btn-primary (Minimal, Dark)
btn btn-neutral
btn btn-ghost
btn btn-error

States & Sizes

One primary action per screen. Always.

EInput & Form System

Guidelines:

  • Input height should be consistent.
  • Clearly focused states.
  • Always use labels, placeholders are not labels.
  • Inputs should look boring. Clarity > Beauty.

FBorder Radius & Elevation

Border Radius Scale

Small (4px)
Medium (8px)
Large (12px)

Shadows / Elevation

Card Shadow (Subtle)
Modal / Dropdown (Elevated)

GIcon Usage Rules

Sizes

16px
20px
24px

Style

Use Stroke icons (not filled) for most UI elements. Consistent stroke width (2px).

Selected Library: Lucide React

Context

Action icon (no text) allows for common actions
Icon + Text for clarity

HMotion & Micro-interactions

  • Animation Duration150–250ms
  • Easingease-out

  • Allowed Usage:

    Button HoverLoadingPage Transitions

IStates

No Items Found

Empty state should be friendly and calm.

Loading skeletons over spinners for content.

UX Principles (Tattoo these mentally)

  • Consistency > CreativityDon't reinvent the wheel. Predictable interfaces are usable interfaces.
  • Clarity beats clevernessIf it needs explanation, it's not clear enough.
  • One primary action per screenGuide the user's attention to the most important task.
  • Reduce thinking, increase doingRemove friction. Pre-fill data. Use smart defaults.