Unicorn.Land Component Specifications

Prompt: 1 — The Design System Architect Date: 2026-03-01 Personality: MINIMALIST x BOLD Primary emotion: Calm (with wry confidence)

Design Principles

1. Show, Don’t Decorate

Every visual element earns its place. If it doesn’t communicate information or aid navigation, remove it. Borders are used sparingly — spacing and background shifts do the work. Icons accompany text, never replace it without clear universal meaning.

2. Confident Restraint

Bold doesn’t mean loud. A single opal accent against warm stone says more than a rainbow of colors. Use weight (font-weight, shadow depth, spacing) to create hierarchy — not size alone. Let whitespace carry confidence.

3. Craft Is Felt, Not Seen

The quality is in the transitions (150ms ease-out, not 300ms linear), the focus rings (opal, not browser-default blue), the consistent 8px rhythm, the way hover states feel inevitable rather than decorated. Users feel the care without naming it.

Layout Grid

12-Column Responsive Grid

Column Spans (Common Patterns)

• Full width: 12 cols (all breakpoints)
• Two-column: 6 + 6 (lg+), stacks to 12 on md-
• Sidebar + content: 3 + 9 (lg+), stacks on md-
• Three-column: 4 + 4 + 4 (lg+), stacks to 6+6 on md, 12 on sm-
• Narrow content: 8 cols centered (lg+), 12 on md-

Grid Usage Rules

• Content containers always center within the viewport
• Gutters are consistent within a breakpoint — don’t mix
• Cards and components fill their column allocation, never break grid
• Full-bleed sections (hero images, backgrounds) extend edge-to-edge, content stays on grid

Component Specifications

1. Button

The primary interactive element. Four variants, three sizes, five states.

Variants: | Variant | Background | Text | Border | Use | |---------|-----------|------|--------|-----| | Primary | --ul-accent | white | none | Primary actions (1 per view) | | Secondary | transparent | --ul-text | --ul-border | Secondary actions | | Tertiary | transparent | --ul-accent-functional | none | Inline/text actions | | Destructive | --ul-error | white | none | Delete, remove, cancel |

Sizes: | Size | Height | Padding (h) | Font | Radius | |------|--------|------------|------|--------| | Small | 32px | 12px | subhead (14px/500) | --ul-radius-md | | Default | 40px | 16px | callout (16px/500) | --ul-radius-lg | | Large | 48px | 20px | body-lg (18px/400) | --ul-radius-lg |

States: - Default: As specified - Hover: Primary darkens to --ul-accent-hover. Secondary gets --ul-bg-surface background. Transition: var(--ul-duration-fast) var(--ul-ease-default) - Active/Pressed: Scale 0.98, shadow drops to xs - Focused: --ul-focus-ring (2px gap ring in opal-600) - Disabled: Opacity 0.4, cursor not-allowed, no hover/active states

Icon support: Leading icon (left), trailing icon (right), or icon-only (square aspect ratio). Icons at 16px for small, 20px for default/large.

2. Card

Content container with consistent structure. Three variants.

Base card: - Background: --ul-bg - Border: 1px --ul-border - Radius: --ul-radius-xl (12px) - Shadow: --ul-shadow-sm - Padding: --ul-space-6 (24px)

Variants: | Variant | Differences | |---------|------------| | Default | As base. For content sections, settings panels. | | Elevated | Shadow --ul-shadow-md, no border. For primary content, featured items. | | Interactive | Hover: shadow lifts to --ul-shadow-md, translateY(-1px). Cursor pointer. For clickable cards (product cards, nav cards). Transition: var(--ul-duration-fast) var(--ul-ease-default) |

Slots: - Header (optional): title + subtitle + action area. Title in title type (22px/500), subtitle in subhead type, secondary color. - Body: any content - Footer (optional): separated by 1px border-top --ul-border, padding-top --ul-space-4

3. Input (Text Field)

Structure: - Label: subhead type (14px/500), --ul-text, margin-bottom --ul-space-1-5 - Input: height 40px, padding 12px horizontal, body type (16px/400) - Helper text: caption type (12px/400), --ul-text-muted, margin-top --ul-space-1

States: | State | Border | Background | |-------|--------|-----------| | Default | --ul-border | --ul-bg | | Hover | --ul-stone-300 | --ul-bg | | Focused | --ul-accent-functional (2px) | --ul-bg | | Error | --ul-error | --ul-bg | | Disabled | --ul-border (0.5 opacity) | --ul-bg-surface |

• Radius: --ul-radius-lg
• Transition: border-color var(--ul-duration-fast) var(--ul-ease-default)

Variants: Text input, Textarea (min-height 96px, resize vertical), Select (with chevron-down icon right-aligned)

4. Badge

Small status indicators and labels.

Sizes: | Size | Height | Padding (h) | Font | |------|--------|------------|------| | Small | 20px | 6px | caption (12px/400) | | Default | 24px | 8px | footnote (13px/500) |

Variants: | Variant | Background | Text | |---------|-----------|------| | Default | --ul-stone-100 | --ul-text-secondary | | Accent | --ul-opal-50 | --ul-opal-700 | | Success | #f0fdf4 | #15803d | | Warning | #fefce8 | #a16207 | | Error | #fef2f2 | #b91c1c |

• Radius: --ul-radius-full
• Inline-flex, align-items center
• Optional leading dot (6px circle in matching text color)

5. Navigation (Header)

Top navigation bar for portfolio site and sub-products.

Structure: - Height: 64px - Background: --ul-bg with backdrop-filter: blur(12px) and 80% opacity for scroll-sticky - Border-bottom: 1px --ul-border - Padding: 0 --ul-grid-margin - Z-index: --ul-z-sticky - Position: sticky, top 0

Slots: - Left: Logo (wordmark or dot, height 24px) - Center: Nav links (desktop) — subhead type, --ul-text-secondary, hover --ul-text, active --ul-text with 2px bottom border in --ul-accent - Right: Action area (CTA button, theme toggle, etc.)

Mobile (< md): Hamburger menu icon (right), nav links in dropdown panel (full-width, slides down). Panel: --ul-bg, shadow --ul-shadow-lg, padding --ul-space-4.

6. Alert / Toast

Feedback messages. Four semantic variants.

Alert (inline): - Padding: --ul-space-4 - Radius: --ul-radius-lg - Left border: 3px in semantic color - Icon: 20px, semantic color, left-aligned - Title (optional): callout type - Message: body type

Toast (floating): - Position: fixed, bottom-right (bottom --ul-space-6, right --ul-space-6) - Max-width: 400px - Shadow: --ul-shadow-lg - Radius: --ul-radius-xl - Enter: slide up + fade in, var(--ul-duration-normal) var(--ul-ease-out) - Exit: fade out, var(--ul-duration-fast) var(--ul-ease-in) - Auto-dismiss: 5 seconds (configurable) - Z-index: --ul-z-toast

7. Modal / Dialog

Overlay content container for focused interactions.

Overlay: Background rgba(28, 25, 23, 0.5), z-index --ul-z-overlay Dialog: z-index --ul-z-modal

Structure: - Max-width: 480px (small), 640px (default), 800px (large) - Background: --ul-bg - Shadow: --ul-shadow-xl - Radius: --ul-radius-xl - Padding: --ul-space-6

Slots: - Header: Title (title type) + optional close button (icon-only, top-right) - Body: scrollable content area - Footer: right-aligned button group (secondary + primary pattern)

Animation: - Enter: scale from 0.95 + fade in, var(--ul-duration-normal) var(--ul-ease-out) - Exit: fade out, var(--ul-duration-fast) var(--ul-ease-in) - Overlay: fade in var(--ul-duration-normal)

Accessibility: Focus trap. Escape to close. role="dialog", aria-modal="true", aria-labelledby points to title.

8. Toggle / Switch

Binary on/off control.

Dimensions: - Track: 44px wide x 24px tall, radius full - Thumb: 20px circle, 2px inset from track edge

States: | State | Track | Thumb | |-------|-------|-------| | Off | --ul-stone-300 | white | | On | --ul-accent | white | | Hover (off) | --ul-stone-400 | white | | Hover (on) | --ul-accent-hover | white | | Focused | + --ul-focus-ring | — | | Disabled | opacity 0.4 | — |

• Thumb slides with var(--ul-duration-fast) var(--ul-ease-spring) (the spring gives satisfying bounce)
• role="switch", aria-checked

9. Divider

Horizontal or vertical separator.

• Default: 1px --ul-border
• With label: border interrupted by centered text in caption type, --ul-text-muted, padding 0 --ul-space-3 on the text
• Spacing: --ul-space-6 margin above and below (configurable)
• Vertical variant: 1px wide, full height of parent, margin 0 --ul-space-4

10. Avatar

User or product representation.

Sizes: | Size | Dimensions | Font | |------|-----------|------| | XS | 24px | caption | | SM | 32px | footnote | | MD | 40px | body | | LG | 56px | title | | XL | 80px | headline |

• Shape: circle (radius full)
• With image: object-fit cover
• Without image: initials on --ul-opal-100 background, --ul-opal-700 text
• Ring variant: 2px white border + 2px --ul-accent ring (for active/selected)

11. Tooltip

Contextual information on hover/focus.

• Background: --ul-stone-800 (dark mode: --ul-stone-200)
• Text: white (dark mode: --ul-stone-900), caption type
• Padding: --ul-space-1-5 --ul-space-2
• Radius: --ul-radius-md
• Max-width: 200px
• Arrow: 6px CSS triangle in matching background
• Enter: fade in + translateY(4px to 0), var(--ul-duration-fast) var(--ul-ease-out)
• Delay: 200ms before showing
• Z-index: --ul-z-toast
• role="tooltip", triggered by aria-describedby

12. Skeleton / Loading

Placeholder while content loads.

• Background: linear gradient from --ul-stone-100 through --ul-stone-200 back to --ul-stone-100
• Animation: shimmer — background-position slides from left to right, 1.5s var(--ul-ease-default) infinite
• Radius: matches the element it replaces
• Shapes: rectangle (text lines), circle (avatars), rounded rectangle (cards)
• Respects prefers-reduced-motion: no shimmer, static --ul-stone-100

13. Tab Group

Horizontal tab navigation for sectioned content.

Tab bar: - Border-bottom: 1px --ul-border - Gap: --ul-space-1 between tabs

Tab item: - Padding: --ul-space-2 --ul-space-4 - Font: callout type (16px/500) - Default: --ul-text-secondary - Hover: --ul-text - Active: --ul-text, 2px bottom border --ul-accent - Focused: --ul-focus-ring - Transition: color and border var(--ul-duration-fast) var(--ul-ease-default)

Tab panel: padding-top --ul-space-6

role="tablist", role="tab", role="tabpanel". Arrow keys navigate between tabs.

14. Dropdown Menu

Triggered menu with action items.

Trigger: any element (button, avatar, icon-button)

Menu panel: - Background: --ul-bg - Border: 1px --ul-border - Shadow: --ul-shadow-lg - Radius: --ul-radius-xl - Padding: --ul-space-1 vertical - Min-width: 180px - Z-index: --ul-z-dropdown - Enter: scale from 0.95 + fade in from trigger direction, var(--ul-duration-fast) var(--ul-ease-out)

Menu item: - Padding: --ul-space-2 --ul-space-3 - Font: body type - Default: --ul-text - Hover: --ul-bg-surface background - Focused: --ul-bg-surface background + --ul-focus-ring-inset - Destructive: --ul-error text color - Disabled: --ul-text-muted, no hover

Separator: 1px --ul-border, margin --ul-space-1 vertical

Arrow keys navigate. Enter/Space selects. Escape closes.

15. Checkbox

Selection control for multiple options.

Box: 18px square, radius --ul-radius-sm, border 1.5px

States: | State | Border | Background | Check | |-------|--------|-----------|-------| | Unchecked | --ul-stone-300 | --ul-bg | none | | Checked | --ul-accent | --ul-accent | white checkmark (2px stroke) | | Indeterminate | --ul-accent | --ul-accent | white dash | | Hover (unchecked) | --ul-stone-400 | --ul-bg | none | | Focused | + --ul-focus-ring | — | — | | Disabled | --ul-stone-200 | --ul-bg-surface | --ul-stone-300 |

• Label: body type, --ul-space-2 gap from box
• Check animation: scale from 0 with var(--ul-duration-instant) var(--ul-ease-spring)

16. Radio

Selection control for single choice from a group.

Circle: 18px, border 1.5px, radius full

States: Same pattern as Checkbox, but: - Selected: inner filled circle (8px) in white on --ul-accent background - Animation: inner circle scales in with var(--ul-duration-instant) var(--ul-ease-spring)

17. Progress Bar

Determinate progress indicator.

Track: height 6px (small) or 8px (default), --ul-stone-200, radius full Fill: --ul-accent, radius full, min-width 4px - Transition: width var(--ul-duration-normal) var(--ul-ease-default) - Optional label: percentage or fraction, footnote type, above or right

Indeterminate variant: Fill is 30% width, animates left-to-right continuously, 1.5s infinite

role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax

18. Code Block

Monospace content display.

• Font: --ul-font-mono, subhead size (14px)
• Background: --ul-stone-800 (light mode) / --ul-stone-900 (dark mode)
• Text: --ul-stone-100
• Padding: --ul-space-4
• Radius: --ul-radius-lg
• Overflow-x: auto (horizontal scroll for long lines)
• Optional header: filename in caption type, --ul-stone-400, border-bottom 1px --ul-stone-700
• Copy button: icon-only, top-right, --ul-stone-400 hover --ul-stone-200

Page Templates

Landing Page

• Hero: full-width, centered content, display type headline, body-lg subheadline, primary CTA button
• Feature grid: 3-column on lg, 2 on md, 1 on sm. Icon + title + description per card
• Social proof: logo strip or testimonial cards
• CTA section: centered, contrasting background (--ul-opal-50)
• Footer: <unicorn-footer> web component

Dashboard

• Sidebar: 240px fixed, --ul-bg, border-right --ul-border
• Top bar: 64px, breadcrumb + user avatar + actions
• Content: padded container, stat cards row + main content area
• Responsive: sidebar collapses to hamburger on md-

Settings

• Two-column on lg: nav rail (240px) + content panel
• Sections: card-based, each with heading + description + controls
• Save: sticky footer with secondary (cancel) + primary (save) buttons

Profile

• Header: avatar (XL) + name + bio, full-width or card-based
• Content tabs: activity, settings, etc.
• Responsive: avatar stacks above name on sm

Do’s and Don’ts

1. Color

• Do: Use --ul-accent for ONE primary action per view
• Don’t: Use opal for decorative backgrounds or body text

2. Typography

• Do: Use the defined type scale — pick the named size that fits
• Don’t: Invent custom font sizes between the scale stops

3. Spacing

• Do: Use the spacing tokens for all padding, margins, and gaps
• Don’t: Use arbitrary pixel values (17px, 23px, etc.)

4. Buttons

• Do: One primary button per view. Use secondary/tertiary for other actions
• Don’t: Stack multiple primary buttons next to each other

5. Cards

• Do: Use consistent padding within a card. All cards in a row should be the same variant
• Don’t: Mix bordered and elevated cards in the same context

6. Focus States

• Do: Use the opal focus ring for all interactive elements
• Don’t: Remove browser focus outlines without providing a visible replacement

7. Motion

• Do: Use the motion tokens for all transitions. Respect prefers-reduced-motion
• Don’t: Add animations that aren’t in the token set. Never animate layout properties (width, height, top, left) — use transform

8. Dark Mode

• Do: Test all components in both light and dark mode
• Don’t: Use hardcoded colors — always reference the semantic aliases

9. Icons

• Do: Use Lucide icons at 20px default, 1.5px stroke, with text labels
• Don’t: Use icons alone without labels (except universally understood: close, search, menu)

10. Accessibility

• Do: Every interactive element must be keyboard-accessible with visible focus indication
• Don’t: Use color alone to communicate state — pair with text, icons, or borders