# Sketch — Design System
> A professional vector-based design and prototyping toolkit for macOS.
- **Canonical:** https://uiuxskills.com/library/sketch
- **Source:** https://www.sketch.com
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:18.931Z

---

---
version: alpha
name: Sketch
description: A professional vector-based design and prototyping toolkit for macOS.
tone: Professional, empowering, transparent, and designer-centric.
color-scheme: light
colors:
  primary: "#F7B500"
  on-primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-surface: "#1A1A1A"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  neutral: "#757575"
  focus-ring: "#F7B500"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  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: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E0A400"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#E0A400"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E8F5E9"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 100ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Sketch maintains a clean, functional, and highly professional visual identity that prioritizes clarity and utility. Designed by creators for creators, the aesthetic is intentionally minimal and accessible, focusing on the work itself rather than decorative UI elements.

## Colors

The color palette is anchored by the brand's iconic yellow, used sparingly to draw attention to primary actions, while the rest of the interface relies on a high-contrast, neutral foundation to ensure readability.

*   Primary (#F7B500): The signature Sketch yellow for primary CTAs and brand highlights.
*   On-primary (inferred) (#000000): High-contrast black text for readability on primary yellow buttons.
*   Surface (#FFFFFF): The clean white base for the main content area.
*   Surface-dim (inferred) (#F5F5F5): Light gray used for section backgrounds and subtle containers.
*   On-surface (#1A1A1A): Dark charcoal for primary body text and high-legibility UI elements.
*   Outline (inferred) (#E0E0E0): Subtle borders for cards and structural dividers.
*   Error (inferred) (#D32F2F): Standard red for validation and destructive states.
*   Success (inferred) (#388E3C): Standard green for positive feedback.
*   Neutral (inferred) (#757575): Muted tones for secondary text and non-interactive UI elements.
*   Focus-ring (inferred) (#F7B500): The brand yellow applied to focus states for accessibility.

## Typography

The typography system utilizes the Inter typeface to provide a neutral, highly readable, and professional reading experience across all screen sizes.

*   Display-lg (inferred): Large-scale hero headlines.
*   Display-md (inferred): Secondary section headers.
*   Headline-lg (inferred): Feature section titles.
*   Headline-md (inferred): Sub-headers for content blocks.
*   Body-md (inferred): Standard paragraph text for long-form content.
*   Label-md (inferred): Button labels and primary UI controls.
*   Label-sm (inferred): Captions, metadata, and small UI labels.

## Layout

The layout follows a responsive, mobile-first grid system that utilizes a max-width container to maintain optimal line lengths. A consistent 8px-based spacing rhythm is applied vertically to ensure alignment across all sections. The page structure flows from navigation to hero, beta-banner, testimonials, features, and footer. The hero pattern is strictly centered, featuring a prominent headline and primary CTA.

## Elevation & Depth

Depth is applied sparingly to maintain a flat, modern aesthetic, using subtle shadows to lift interactive elements from the background.

*   Elevation.sm: Used for subtle card lift and minor UI separation.
*   Elevation.md: Used for dropdowns, popovers, and interactive cards.
*   Elevation.lg: Used for modal overlays and drawer components.

## Shapes

The interface uses a consistent rounded-corner philosophy to soften the technical nature of the tool. An 8px radius (`rounded.md`) is the standard for most cards and input fields, while smaller elements like badges use a 4px radius (`rounded.sm`) to maintain a crisp, compact appearance.

## 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 `{colors.primary}` for primary actions with high-contrast `{colors.on-primary}` text. Secondary buttons are transparent with an `{colors.outline}` border, maintaining a clean, secondary hierarchy.

### Card
Cards are defined by a `{colors.surface}` background and a consistent `{rounded.md}` corner radius. Use `{colors.outline}` for borders on static cards, or apply `{elevation.md}` for cards that require visual lift.

### Input Field
Input fields feature a `{colors.surface}` background and `{rounded.sm}` corners. The border defaults to `{colors.outline}`, switching to `{colors.focus-ring}` when the user interacts with the field.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs. | Use `{colors.primary}` for text on white backgrounds. |
| Apply `{typography.display-lg}` for hero headlines only. | Use `{typography.display-lg}` for body text. |
| Use `{rounded.md}` for all card components. | Mix different border-radius values on one component. |
| Maintain `{spacing.md}` between section elements. | Use `{spacing.xs}` for main section margins. |
| Use `{colors.on-surface}` for primary body text. | Use `{colors.error}` for non-destructive actions. |
| Apply `{colors.outline}` for subtle dividers. | Use excessive shadows on flat UI elements. |
| Use `{typography.label-md}` for button labels. | Use `{typography.display-md}` for button labels. |
| Apply `{input-field-focus}` on active inputs. | Use default browser focus rings on inputs. |

## Content Style

CTA labels are written as imperative verbs in sentence case, such as "Get started" or "Learn more." This keeps the interface action-oriented and clear.

Headings are benefit-led and declarative, designed to communicate value immediately to a professional designer audience.

Copy density is kept low, favoring short, scannable paragraphs and bulleted lists to highlight features without overwhelming the reader.

## Imagery & Icons

The imagery style is a mix of high-fidelity product screenshots, 3D rendered orbs, and clean, native-style app icons. Photographic treatments are minimal, often used to provide context for testimonials or feature highlights, while 3D assets are used to add depth and visual interest to hero sections.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Sketch, a professional, minimal design toolkit. Match its clean, designer-centric tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw shadow strings.
2. Use only component variants defined under `components:`. Do not invent new button styles, badge variants, or card types beyond what the spec lists.
3. Apply the 8px-based spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, gap, and margin decisions. Match the Layout narrative for section rhythm.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, placing `{colors.primary}` on body text — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists for the product, those values override the inferred ones in this spec.

## Output contract

**Must:**
- Use token names for every color, type, radius, spacing, elevation, and motion value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` to custom focus indicators; never fall back to default browser outlines.
- Write CTA labels as imperative verbs in sentence case, per the Content Style section.

**Must NOT:**
- Introduce colors, font sizes, or radii absent from the spec.
- Use generic utility defaults such as `text-gray-500` or `rounded-md` when a named token exists.
- Apply `{colors.primary}` to text rendered on `{colors.surface}`.
- Use `{typography.display-lg}` outside a hero headline context.
- Add emoji, filler copy, or decorative shadows beyond the defined elevation scale.
- Rewrite page copy, button labels, headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary backgrounds, use `{colors.surface-dim}`.
- For unspecified breakpoints, follow mobile-first with one breakpoint at 768px.
- For ambiguous interactive color roles, use `{colors.primary}` for the headline action and `{colors.neutral}` for non-interactive secondary text.