# Unicorn Studio — Design System
> No-code WebGL design tool for interactive motion assets.
- **Canonical:** https://uiuxskills.com/library/unicorn-studio
- **Source:** https://www.unicorn.studio
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:30.638Z

---

---
version: alpha
name: Unicorn Studio
description: A no-code design tool for creating interactive WebGL motion assets.
tone: >-
  Modern, technical, and empowering. The brand voice is direct and professional, focusing on the
  'magic' of high-end motion design made accessible.
color-scheme: dark
colors:
  primary: "#AEAAC0"
  secondary: "#A9A2BD"
  background: "#08080A"
  surface: "#25252D"
  on-surface: "#FFFFFF"
  on-surface-dim: "#DAD7DE"
  error: "#D32F2F"
  outline: "#31313A"
  focus-ring: "#AEAAC0"
  success: "#4CAF50"
typography:
  display-lg:
    fontFamily: Overused Grotesk
    fontSize: 64px
  display-md:
    fontFamily: Overused Grotesk
    fontSize: 48px
  headline-lg:
    fontFamily: Overused Grotesk
    fontSize: 32px
  body-md:
    fontFamily: Segoe UI
    fontSize: 18px
  body-sm:
    fontFamily: Segoe UI
    fontSize: 14px
  label-md:
    fontFamily: Segoe UI
    fontSize: 16px
  label-sm:
    fontFamily: Segoe UI
    fontSize: 12px
rounded:
  sm: 3px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "#08080A"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#25252D"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "#25252D"
    textColor: "#DAD7DE"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "#08080A"
    rounded: "{rounded.md}"
    borderColor: "#31313A"
  input-field:
    backgroundColor: "#08080A"
    rounded: "{rounded.sm}"
    borderColor: "#31313A"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#FFFFFF"
  badge:
    backgroundColor: "#25252D"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "#31313A"
    height: 1px
  badge-error:
    backgroundColor: "#D32F2F"
    textColor: "#FFFFFF"
  badge-success:
    backgroundColor: "#4CAF50"
    textColor: "#FFFFFF"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-background:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface-dim:
    backgroundColor: "{colors.on-surface-dim}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-error:
    backgroundColor: "{colors.error}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-success:
    backgroundColor: "{colors.success}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 20px rgba(0,0,0,0.5)
---

## Overview

Unicorn Studio is a high-performance, dark-themed design platform tailored for creative professionals. The visual identity is sophisticated and minimalist, prioritizing content clarity and technical precision to reflect its core utility as a WebGL motion engine.

## Colors

The color strategy centers on a deep, high-contrast dark mode palette that minimizes visual noise, allowing motion assets to take center stage.

*   Primary (#AEAAC0): The main accent color for UI elements and interactive states.
*   Secondary (#A9A2BD): Supporting accent color for secondary UI elements.
*   Background (#08080A): The foundation for the entire application, providing a deep black canvas.
*   Surface (#25252D): Used for cards, containers, and elevated UI sections.
*   On-surface (#FFFFFF): Primary text color for high readability against dark surfaces.
*   On-surface-dim (#DAD7DE): Secondary text color for labels and supporting descriptions.
*   Error (#D32F2F): Semantic color for destructive actions.
*   Outline (#31313A): Used for subtle borders and dividers.
*   Focus-ring (inferred) (#AEAAC0): The primary indicator for keyboard navigation and focus states.
*   Success (inferred) (#4CAF50): Semantic color for success states and positive feedback.

## Typography

The typography stack combines the geometric, modern feel of Overused Grotesk for headings with the high legibility of Segoe UI for interface text.

*   Display-lg (Overused Grotesk): Primary hero heading size.
*   Display-md (Overused Grotesk): Secondary section heading size.
*   Headline-lg (inferred) (Overused Grotesk): Tertiary heading size.
*   Body-md (Segoe UI): Standard paragraph and body text.
*   Body-sm (inferred) (Segoe UI): Small body text for captions and fine print.
*   Label-md (inferred) (Segoe UI): Standard button and interactive label text.
*   Label-sm (inferred) (Segoe UI): Small UI labels and badge text.

## Layout

The layout utilizes a centered container strategy with a strict max-width constraint to maintain readability across desktop and mobile. A 4px base unit governs all spacing, ensuring a consistent vertical rhythm. The page structure follows this order: nav, hero, showcase, features, testimonials, pricing, and footer. The hero section features a centered headline and a single primary CTA, followed by a large product UI screenshot. On mobile, the navigation collapses into a drawer to prioritize content.

## Elevation & Depth

Elevation is used sparingly to create subtle separation between interactive elements and the dark background.

*   elevation.sm: Used for subtle card lift and small UI components.
*   elevation.md: Used for standard cards and dropdowns to provide clear separation from the background.
*   elevation.lg: Used for modal or drawer overlays to establish a high-level focus.

## Shapes

The brand employs a subtle rounded corner strategy to balance technical precision with approachability. UI components favor small radii, specifically 3px for inputs and 8px for cards, avoiding overly soft or pill-shaped aesthetics that might conflict with the "technical" brand tone.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {typography.label-md} and are styled with {rounded.sm}. The primary variant uses a dark background with white text, while the secondary variant utilizes the surface color to sit comfortably within the dark UI.

### Card
Cards are defined by {colors.surface} and {rounded.md}. They are intended to house content blocks or feature highlights, maintaining a consistent {spacing.md} between elements to prevent visual crowding.

### Input Field
Input fields use {rounded.sm} and {colors.outline} for borders. On focus, the border transitions to {colors.primary} to provide clear feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary CTAs. | Use {colors.background} for text elements. |
| Apply {typography.display-lg} for hero headlines. | Mix font families outside the defined stack. |
| Use {rounded.sm} for button components. | Use {rounded.full} on standard input fields. |
| Maintain {spacing.md} between card elements. | Use high-contrast shadows on flat surfaces. |
| Use {colors.surface} for secondary containers. | Use {colors.error} for non-destructive actions. |
| Apply {colors.on-surface-dim} for secondary text. | Use spacing larger than {spacing.2xl} in hero. |
| Use {colors.outline} for dividers. | Use {colors.primary} for non-interactive text. |
| Apply {elevation.md} for card components. | Use {elevation.lg} for standard buttons. |

## Content Style

CTA labels are written as imperative verbs in sentence case, such as "Start creating" or "Get started," to maintain a direct, action-oriented tone.

Headings are benefit-driven and punchy, focusing on the "magic" and "speed" of the platform. They are designed to be declarative, quickly communicating the value proposition to the user.

Copy density is kept low, favoring short, scannable paragraphs. Lists are used frequently to break up technical information and make features easier to digest.

## Imagery & Icons

The imagery style is mixed, relying on high-fidelity product screenshots and UI captures to demonstrate the tool's capabilities. Icons are clean, stroke-based, and minimal to match the technical aesthetic. All assets should be presented with a high degree of clarity, avoiding heavy filters or decorative elements that detract from the product's interface.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Unicorn Studio, a minimal enterprise-grade WebGL design tool with a modern, technical tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g. an outlined button or pill input) that the spec does not list.
3. Follow the Shapes narrative: inputs take `{rounded.sm}`, cards take `{rounded.md}`. Do not apply `{rounded.full}` to standard form elements or buttons.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. requesting `{elevation.lg}` on a button), surface the conflict before proceeding.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) to all transitions on interactive elements; do not use arbitrary durations.

## Output contract

**Must:**
- Use named tokens for every color, type scale, spacing, radius, elevation, and motion value.
- Cover hover, focus, and disabled states for every interactive component where the spec defines them.
- Render focus rings using `{colors.focus-ring}` on all keyboard-navigable elements.
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for padding and gaps.
- Write CTA labels as imperative verbs in sentence case per the Content Style section (e.g. "Start creating").

**Must NOT:**
- Invent colors, fonts, radii, or elevation levels absent from the spec.
- Use framework utility defaults (e.g. generic gray values, system border radii) when a brand token exists.
- Apply `{colors.primary}` to non-interactive text or `{colors.error}` to non-destructive actions.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite, replace, or restructure existing page copy, headings, navigation items, or routes as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface}`; for text on dark surfaces, default to `{colors.on-surface}` or `{colors.on-surface-dim}` for secondary content.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (component metadata, Storybook) is available, it overrides the inferred value.
- For unspecified breakpoints, follow the Layout section; if absent, default to mobile-first with one breakpoint at 768px, collapsing navigation into a drawer.