# Linearity — Design System
> Professional design and animation software for Apple devices.
- **Canonical:** https://uiuxskills.com/library/linearity
- **Source:** https://www.linearity.io
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:57.497Z

---

---
version: alpha
name: Linearity
description: Professional design and animation software for Apple devices.
tone: Professional, encouraging, efficient, and accessible.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FAFAFA"
  surface-bright: "#FFFFFF"
  surface-container: "#ECF4FF"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#D9D9D9"
  error: "#FF4D4F"
  success: "#52C41A"
  info: "#1890FF"
typography:
  display-lg:
    fontFamily: Helvetica, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Helvetica, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Helvetica, sans-serif
    fontSize: 28px
  headline-md:
    fontFamily: Helvetica, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: Helvetica, sans-serif
    fontSize: 18px
  body-sm:
    fontFamily: Helvetica, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: Helvetica, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  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-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
  input-field:
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "#0056b3"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFF1F0"
  badge-success:
    backgroundColor: "#F6FFED"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-error:
    backgroundColor: "{colors.error}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-success:
    backgroundColor: "{colors.success}"
    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

Linearity provides a high-performance, intuitive creative suite designed specifically for Apple users. The brand identity is clean, modern, and professional, prioritizing accessibility and efficiency to support creative workflows.

## Colors

The color palette is anchored in a high-contrast, monochromatic base, supplemented by functional semantic colors to guide user interaction and status.

*   Primary (#000000): The core brand color, used for primary text and high-impact UI elements.
*   Surface (#FAFAFA): The neutral base background for the application and website.
*   Surface-bright (#FFFFFF): Used for cards and elevated containers to provide contrast against the base surface.
*   Surface-container (#ECF4FF): A subtle blue-tinted background for section highlights.
*   On-surface (inferred) (#1A1A1A): The primary text color for readability on light surfaces.
*   On-primary (#FFFFFF): High-contrast text color for buttons and dark-filled elements.
*   Outline (#D9D9D9): Used for borders, dividers, and structural separation.
*   Error (inferred) (#FF4D4F): Semantic color for destructive actions or validation errors.
*   Success (inferred) (#52C41A): Semantic color for positive feedback and completion states.
*   Info (inferred) (#1890FF): Used for interactive links and navigational highlights.

## Typography

The typography system uses Helvetica to maintain a clean, professional, and Apple-native aesthetic across all interface levels.

*   Display-lg (inferred): Used for hero headlines to establish immediate visual hierarchy.
*   Headline-lg: Used for primary feature headings and section titles.
*   Body-md: The standard weight for primary paragraph text, ensuring readability.
*   Label-sm: Used for UI labels, button text, and compact interface elements.

## Layout

The layout follows a responsive grid system centered on a 16px base unit, ensuring generous whitespace and consistent alignment. The page structure flows from navigation to a hero section, followed by social proof, feature highlights, use cases, and the footer. The design is mobile-first, with spacing and typography scaling proportionally for smaller viewports.

## Elevation & Depth

Elevation is used sparingly to create subtle, professional depth, relying on soft, low-opacity shadows. These values are inferred to provide a clean, layered interface:

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard depth for cards and interactive containers.
*   Elevation.lg: Pronounced depth for modals or overlay components.

## Shapes

The design language utilizes a rounded corner system to balance professional precision with a modern, friendly aesthetic. 

Corner radii are applied consistently: `{rounded.lg}` is the standard for cards to maintain a soft, approachable feel, while `{rounded.full}` is reserved for action buttons and badges to emphasize interactivity.

## 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
Primary buttons use `{colors.primary}` with `{typography.label-sm}` text and `{rounded.full}`. Use these for main calls-to-action to ensure they stand out against the surface.

### Card
Cards utilize `{colors.surface-bright}` and `{rounded.lg}` with an `{colors.outline}` border. Use these to group related content or feature highlights.

### Badge
Badges are styled with `{colors.surface-container}` and `{rounded.full}`. Use these for status indicators or category labels.

### Input Field
Inputs feature `{rounded.md}` corners and an `{colors.outline}` border, which shifts to `{colors.primary}` on focus. Use these for all user data entry.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{typography.headline-lg}` for section headers. | Avoid using `{typography.display-lg}` for body text. |
| Use `{rounded.full}` for all action buttons. | Do not mix sharp corners with `{rounded.lg}` components. |
| Maintain `{spacing.md}` between grid items. | Avoid using low-contrast text on `{colors.surface-container}`. |
| Use `{colors.surface-container}` for subtle highlights. | Do not use `{colors.outline}` for primary text. |
| Apply `{typography.body-md}` for all paragraph text. | Avoid excessive use of shadows on flat elements. |
| Use `{rounded.md}` for input fields. | Do not use `{colors.info}` for destructive buttons. |
| Use `{colors.outline}` for card borders. | Avoid inconsistent spacing smaller than `{spacing.sm}`. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Get Started" or "Download Now" to drive conversion.

Headings are benefit-driven and concise, focusing on the value provided to the creative professional.

Copy density is designed for scannability, utilizing short paragraphs and frequent bullet points to break up information for quick reading.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots with clean, vector-based icons. Iconography should remain minimal and consistent with the brand's professional tone, avoiding overly decorative styles. Product imagery should be presented clearly, often within card containers, to showcase the software's interface.