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.

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
• 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

Colors are a critical aspect of our design system. Crafted UI uses a semantic color system that assigns meaning to colors beyond their visual appearance.

Semantic Colors

Rather than using color names like “green” or “blue,” we use functional names that describe the purpose:

Crafted UI supports both light and dark themes out of the box. The color variables automatically adapt to the current theme, ensuring consistent appearance and proper contrast in both modes.

Light Theme

The light theme uses softer, more neutral colors with appropriate contrast for readability. Background colors are light with darker text.

Dark Theme

The dark theme inverts the color relationships, using dark backgrounds with light text. It maintains the same semantic color relationships while providing a comfortable viewing experience in low-light environments.