# Control — Design System
> Intuitive freehand web design tool for creatives.
- **Canonical:** https://uiuxskills.com/library/control
- **Source:** https://cntrl.site
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:03.385Z

---

---
version: alpha
name: Control
description: Intuitive freehand web design tool for creatives.
tone: >-
  Direct, confident, and professional. The voice is concise, favoring imperative verbs and technical
  clarity over marketing fluff.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  outline: "#000000"
  error: "#FF0000"
  success: "#008000"
  focus-ring: "#000000"
  surface-bright: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Favorit Mono
    fontSize: 4rem
    fontWeight: 500
  display-md:
    fontFamily: Favorit Mono
    fontSize: 3rem
    fontWeight: 500
  headline-lg:
    fontFamily: Favorit Mono
    fontSize: 2.5rem
    fontWeight: 500
  headline-md:
    fontFamily: Favorit Mono
    fontSize: 2rem
    fontWeight: 500
  body-md:
    fontFamily: Favorit Mono
    fontSize: 1rem
    fontWeight: 400
  label-md:
    fontFamily: Favorit Mono
    fontSize: 0.875rem
    fontWeight: 600
  label-sm:
    fontFamily: Favorit Mono
    fontSize: 0.75rem
    fontWeight: 400
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "#666666"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Control is a high-energy, design-centric platform that empowers creatives to build complex, animated websites directly in the browser. The visual identity is stark, modernist, and heavily influenced by brutalist design principles, utilizing a monochromatic palette with high-contrast typography.

## Colors

The color strategy relies on a strict monochromatic palette to maintain a technical, high-contrast aesthetic. There is no reliance on color for decoration; every hue serves a functional, structural, or semantic purpose.

*   Primary (#000000): The core brand color used for text, borders, and primary interactive elements.
*   Surface (#FFFFFF): The base background color for the application and all primary containers.
*   Surface-container (inferred) (#F4F4F4): Used for secondary containers and card backgrounds to create subtle depth.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on primary backgrounds.
*   On-surface (#000000): The main text color for maximum readability on white surfaces.
*   Outline (#000000): Used for all borders and dividers to maintain a sharp, graphic look.
*   Error (inferred) (#FF0000): Semantic color for destructive actions or error states.
*   Success (inferred) (#008000): Semantic color for success states.
*   Focus-ring (inferred) (#000000): High-contrast focus state for accessibility.
*   Surface-bright (inferred) (#FFFFFF): Highlight surface for active component states.

## Typography

The typography is exclusively Favorit Mono, reinforcing the tool's technical, developer-friendly roots. Hierarchy is established through size and weight shifts rather than font variety.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg (inferred): Used for sub-headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md: Standard paragraph text.
*   Label-md (inferred): Used for UI labels and button text.
*   Label-sm (inferred): Used for captions and metadata.

## Layout

The layout follows a strict, grid-based system that emphasizes alignment and whitespace. It uses a responsive design that scales content blocks based on viewport width, maintaining a consistent gutter size across all breakpoints. The page structure follows this order: nav, hero, features, showcase, pricing, footer. The hero pattern is centered, high-impact, and features a clear primary CTA.

## Elevation & Depth

Elevation is used sparingly, relying on high-contrast borders and color shifts rather than drop shadows to define depth. This keeps the aesthetic flat and sharp.

*   Elevation.sm: Subtle lift for minor components.
*   Elevation.md: Standard lift for interactive cards.
*   Elevation.lg: Maximum lift for modals or overlays.

## Shapes

The design language is strictly rectangular. All border-radius tokens (`rounded.sm`, `rounded.md`, `rounded.lg`, `rounded.xl`) are set to 0px to reinforce the brutalist, technical nature of the tool. The only exception is `rounded.full`, which is reserved for circular UI elements where necessary.

## 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 are rectangular, high-contrast elements. Use `button-primary` for primary actions and `button-secondary` for secondary actions, ensuring the `label-md` typography is consistent across all states.

### Card
Cards are defined by `colors.outline` borders and `colors.surface` backgrounds. Use `card-elevated` for secondary containers to differentiate sections without using shadows.

### Input Field
Input fields use `colors.surface` and `colors.outline` for a clean, technical look. Apply `input-field-focus` to the border color when the user interacts with the field.

### Badge
Badges are small, rectangular labels. Use `badge` for standard metadata and `badge-success` or `badge-error` for semantic status indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use rounded corners on buttons or cards. |
| Apply `{typography.body-md}` for all long-form text. | Do not use drop shadows on components. |
| Use `{colors.outline}` for all borders. | Do not mix font families; stick to the mono typeface. |
| Use `{spacing.md}` as the base unit for padding. | Do not use low-contrast text colors. |
| Use `{typography.label-md}` for navigation labels. | Do not use excessive, loose whitespace. |
| Apply `{colors.surface-container}` for card backgrounds. | Do not use decorative, non-functional icons. |
| Use `{colors.focus-ring}` for accessibility states. | Do not use gradients or soft transitions. |
| Keep all shapes strictly rectangular. | Do not use center-aligned text for long-form body. |

## Content Style

CTA labels are imperative, short, and direct (e.g., "START NOW", "LEARN"). They favor action-oriented verbs that communicate immediate utility.

Headings are bold, benefit-driven statements. They avoid marketing fluff, focusing instead on the technical capabilities of the platform.

Copy density is designed for scannability. Paragraphs are kept short, and lists are used frequently to break up technical information and maintain a high-energy, professional rhythm.

## Imagery & Icons

Imagery consists of high-quality product screenshots and abstract visual experiments, reflecting the platform's creative focus. Icons are minimal, stroke-based, and strictly functional. Avoid decorative imagery that does not serve a clear purpose in the interface.