Border Colors

Border colors provide visual separation and emphasis in your interface. All colors use the border-cn- prefix and adapt to light and dark themes.

Primary Border Colors

Foundation border colors for general UI elements. Lower numbers provide stronger contrast.

// Primary borders
<div className="border border-cn-1">Strongest border</div>
<div className="border border-cn-2">Medium border</div>
<div className="border border-cn-3">Subtle border</div>

// Default shorthand
<div className="border">Uses border-cn-3 by default</div>

Default Border

Use border (without specifying a color) to apply the default border color (border-cn-3). This is the most commonly used border color for subtle separation.

State and Brand Borders

Special border colors for disabled states and brand emphasis.

// Disabled state
<input disabled className="border border-cn-disabled" />

// Brand border
<div className="border border-cn-brand">Brand highlight</div>

Semantic Border Colors

Semantic borders communicate meaning and status. Success, danger, and warning include both default and outline variants. Other colors only have outline variants for use with outline backgrounds.

// Default variants (success, danger, warning only)
<div className="border border-cn-success">Success border</div>
<div className="border border-cn-danger">Danger border</div>
<div className="border border-cn-warning">Warning border</div>

// Outline variants (must be paired with matching text and background)
<div className="bg-cn-success-outline text-cn-success-outline border border-cn-success-outline">
  Success outline style
</div>

// Other semantic colors (outline only)
<div className="bg-cn-blue-outline text-cn-blue-outline border border-cn-blue-outline">
  Blue outline
</div>

Outline Variant Pairing

Always use outline border variants with their matching text and background colors: text-cn-{color}-outline + bg-cn-{color}-outline + border-cn- {color}-outline. Never mix outline borders with primary or secondary backgrounds.

Available semantic outline borders: gray, blue, purple, brown, cyan, indigo, lime, mint, orange, pink, violet

Border Width

Combine border colors with Tailwind’s border width utilities:

// Default width (1px)
<div className="border border-cn-3">1px border</div>

// Specific widths
<div className="border-2 border-cn-brand">2px border</div>
<div className="border-4 border-cn-danger">4px border</div>

// Directional borders
<div className="border-t border-cn-2">Top border only</div>
<div className="border-b-2 border-cn-3">2px bottom border</div>
<div className="border-l border-cn-1 border-r border-cn-1">Left and right</div>

// No border
<div className="border-0">Remove border</div>

Common Customization Patterns

Form Input States

// Default input
<input className="border border-cn-3" />

// Focus state with brand border
<input className="border focus:border-cn-brand focus:border-2" />

// Error validation
<input className="border border-cn-danger" />

// Success validation
<input className="border border-cn-success" />

Card with Border

<div className="bg-cn-1 border border-cn-3 rounded-3 shadow-cn-2 p-cn-lg">
  Card content
</div>

Alert with Semantic Border

// Alert with left accent border
<div className="bg-cn-warning-outline text-cn-warning-outline border-l-4 border-cn-warning-outline">
  Warning message
</div>

<div className="bg-cn-danger-outline text-cn-danger-outline border-l-4 border-cn-danger-outline">
  Error message
</div>

Usage Guidelines

When to use each border:

• border-cn-1 - Strongest separation, important boundaries
• border-cn-2 - Medium emphasis, secondary containers
• border-cn-3 - Default, subtle separation (most common)
• border-cn-disabled - Disabled form elements
• border-cn-brand - Focus states, brand emphasis
• border-cn-success/danger/warning - Semantic feedback (standalone)
• border-cn-{color}-outline - Always paired with outline backgrounds

Best Practices

1. Use the default - border or border-cn-3 works for most cases
2. Pair outline variants - Always match outline borders with outline text and backgrounds
3. Combine with width - Use border-2 or border-4 for emphasis
4. Directional borders - Use border-t, border-l, etc. for accent lines
5. State indication - Use semantic borders for form validation and status
6. Avoid overuse - Too many borders create visual clutter

Border Removal

Use border-0 to explicitly remove borders when customizing components. Useful when a component has a default border you don’t want.

Quick Reference

Color Group	Available Classes	Usage
Primary	border-cn-1, border-cn-2, border-cn-3	General borders, default is cn-3
State	border-cn-disabled	Disabled elements
Brand	border-cn-brand	Focus states, brand emphasis
Semantic (default)	border-cn-success, border-cn-danger, border-cn-warning	Status indication
Semantic (outline)	border-cn-{color}-outline	14 colors, must pair with outline text/bg

Semantic colors with outline: success, danger, warning, gray, blue, purple, brown, cyan, indigo, lime, mint, orange, pink, violet