Design Cues

Crafted UI is built on a set of consistent design principles and variables that help maintain a cohesive visual language across all components. This design system provides the foundation for creating intuitive, accessible, and aesthetically pleasing user interfaces.

Design cues are visual signals that guide users through interfaces, create recognizable patterns, and establish hierarchy. They work together to create a cohesive experience that is both visually appealing and functionally effective.

For comprehensive color information, including semantic colors, themes, and status indicators, see our Color System documentation.

Design tokens are the building blocks of our design system. They represent the smallest visual design decisions, such as colors, spacing, typography, and more. By using tokens instead of hard-coded values, we maintain consistency across our components.

Base Tokens

Crafted UI uses these fundamental tokens to define its visual language:

• Colors: Primary, secondary, accent, and semantic colors (see Color System)
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scales for margins, padding, and gaps
• Borders: Border widths, styles, and radii
• Shadows: Elevation levels through shadows
• Transitions: Animation duration and easing functions

In Crafted UI, you can access design variables through both CSS variables and Tailwind utility classes. This dual approach provides flexibility for different styling scenarios.

CSS Variables

You can directly use CSS variables in your custom styles:

.custom-element {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--border);
}

Tailwind Classes

For a more declarative approach, use the semantic color classes in Tailwind:

<div class="bg-primary text-primary-foreground border border-border">
  This element uses Crafted UI's design tokens
</div>

Customizing Variables

To customize the design variables for your project, you can override the CSS variables in your global styles:

:root {
  --primary: 240 100% 50%; /* Blue */
  --secondary: 280 100% 50%; /* Purple */
}

Crafted UI provides a set of default sizing variables that can be used to maintain consistent spacing and sizing across components. These variables come with reasonable defaults but can easily be customized for consistent alternative sizing.

Variable Name	Description	Default Value
container-container	Base container width	80rem
container-navbar	Navbar height	4rem
container-sidebar	Sidebar width	12rem