Brand System

Your Brand, Baked Into Every Component

Define your design tokens once. Colors, typography, spacing, and shadows propagate to every component in your library. Token changes take effect in under 200ms.

Live Token Preview

primary

secondary

accent

success

warning

surface

Token changed. Propagating to 47 components...

142ms

Design Tokens with Live Preview

Define every design decision as a token. Preview changes instantly. Export to CSS, JSON, or YAML.

Primary

#6366F1

Secondary

#EC4899

Surface

#F8FAFC

Accent

#F59E0B

Component Library

Pick and play. Every component respects your brand tokens.

Button

6 variants

Actions

Card

4 variants

Layout

Input

5 variants

Forms

Badge

3 variants

Display

Modal

2 variants

Overlay

Table

3 variants

Data

Tabs

4 variants

Navigation

Avatar

3 variants

Display

Tooltip

2 variants

Overlay

Dropdown

4 variants

Actions

Alert

5 variants

Feedback

Skeleton

3 variants

Loading

Visual Tags System

Organize brand assets with visual tags. Group colors by purpose, components by page, and tokens by usage pattern. Tags make it easy to find and maintain your design system as it grows.

NavigationFormsCardsModalsMarketingDashboardAuthSettings

YAML Export

Export your entire brand system as a portable YAML file. Import it into other Skulptor projects, share with your team, or use it as a source of truth for CI/CD pipelines.

brand:
name: "My App"
colors:
primary: "#6366F1"
secondary: "#EC4899"
typography:
heading: "Inter Bold"
<200ms

Token changes propagate to all components in your library in under 200 milliseconds. Change a color, and every button, card, and input updates in real time.