Brushwork Design System

Product: Brushwork — Professional image editor for Mac

Owner: Apple (acquired 2024) | Platform: macOS native (AppKit)

Date: 2026-03-08

Brushwork is a macOS-native image editor known for its clean, dark editor UI, vibrant tool icons, ML-powered editing features, and single-window interface. The marketing website uses Apple's design language with a dark theme, while the app follows macOS HIG with custom touches for creative tool workflows.

Font note: The website and app use SF Pro (Apple's system font). This reference uses -apple-system / BlinkMacSystemFont which resolve to SF Pro on macOS and fall back to system defaults on other platforms.

Website Colors

Dark-themed marketing site following Apple design conventions. Deep blacks with blue and purple accents.

Primary Blue

#0066CC

blue-600

#0077ED

blue-500

#2997FF

blue-400

#64B5F6

blue-300

Accent Purple / Pink

#6E2CF5

purple-600

#8B5CF6

purple-500

#BF5AF2

magenta-500

#FF375F

pink-500

Neutrals (Apple Gray Scale)

#000000

Black

#1c1c1e

900

#2c2c2e

800

#3a3a3c

700

#48484a

600

#636366

500

#8e8e93

400

#aeaeb2

300

#c7c7cc

200

#e5e5ea

#f2f2f7

#ffffff

White

Gradients

Hero BG

top-to-bottom

CTA Gradient

blue-to-purple

Hero Glow

radial

Website Typography

SF Pro Display for headings, SF Pro Text for body. Apple's standard type system.

Image editing,
reimagined.

Style	Hero / H1
Size	56-80px
Weight	700
Tracking	-0.015em

ML-Powered Tools

Style	H2
Size	48px
Weight	600
Tracking	-0.01em

Professional Color Adjustments

Style	H3
Size	32px
Weight	600

Brushwork features a collection of tools designed to let you bring out the best in your photos and create stunning compositions.

Style	Body Large
Size	21px
Line-height	31px
Weight	400

Every detail in Brushwork is designed to take full advantage of macOS and Apple hardware.

Style	Body
Size	17px
Line-height	27px

NEW IN Brushwork

Style	Caption / Overline
Size	12px
Transform	uppercase
Tracking	0.06em

Website Components

Navigation Bar

Frosted-glass nav with blur backdrop, Apple style. Fixed to viewport top.

Brushwork

Features What's New Resources Tech Specs

height: 52px, bg: rgba(0,0,0,0.8), backdrop-filter: saturate(180%) blur(20px)

Buttons

See all features

Variant	Background	Color	Radius	Padding
Primary	#0077ED	#ffffff	100px (pill)	10px 24px
Secondary	transparent	#2997FF	100px (pill)	10px 24px
Ghost / Link	transparent	#2997FF	none	0

Feature Cards

🎨

Color Adjustments

Non-destructive, ML-enhanced color grading with over 30 presets and fine-tuned manual controls.

✨

ML Super Resolution

Upscale images up to 6x their original resolution using machine learning trained on millions of photos.

🖌

Painting Tools

Nostalgia-perfect brushes with dual-texture engine, dynamic painting, and full Apple Pencil support.

bg: #1c1c1e, radius: 20px, padding: 40px, border: 1px solid rgba(255,255,255,0.06)

Website Layout

Container Widths

1120px — Container

980px — Content

680px — Narrow

Breakpoints

Mobile375px

Tablet768px

Desktop1024px

Wide1440px

App Colors

Brushwork uses a dark macOS-native theme. The editor chrome is built on warm dark grays with blue accent controls.

Chrome / Window

#1a1a1a

Canvas BG

#2a2a2a

Window BG

#2e2e2e

Inspector

#323232

Toolbar

#3a3a3a

Title Bar

#4a4a4a

Tooltip

Controls

#0A84FF

Accent

#409CFF

Accent Hover

#34C759

Toggle On

rgba(10,132,255,0.3)

Selection

Tool Icon Colors — vibrant, distinct per tool category

#FF9500

Selection

#FF375F

Paint

#FFD60A

Eraser

#BF5AF2

Gradient

#30D158

Shape

#64D2FF

Text

#0A84FF

Color Adj

#5E5CE6

Clone

#34C759

Heal

Status Colors

#34C759

Success

#FF9F0A

Warning

#FF453A

Error

#0A84FF

Info

App Typography

All app UI text uses SF Pro (via -apple-system). Small sizes throughout, matching macOS HIG.

Element	Size	Weight	Color
Window Title	13px	600	#e0e0e0
Inspector Heading	13px	600	#ffffff
Inspector Label	11px	400	#999999
Inspector Value	11px	400	#e0e0e0
Toolbar Label	11px	400	#ababab
Layer Name	12px	400	#ffffff
Menu Item	13px	400	#ffffff
Menu Shortcut	12px	400	#808080
Status Bar	11px	400	#999999
Tooltip	11px	500	#ffffff

App Window & Layout

Single-window interface: Layers panel (left), Canvas (center), Inspector (right), Toolbar (top).

Untitled.pxd — Brushwork

✚

□

✎

✂

◈

○

⌖

✦

⚐

Layers

+ …

Background Photo 👁

Shape Layer 👁

Title Text 👁

Hidden Layer 👁

Adjustment

0 100 200 300 400

1920 × 1080

Arrange

X Y

W H

↻

Style

Fill

Opacity

Blend Mode

Normal ▼

100% | 1920 × 1080 px | 72 DPI RGB Color | 8-bit

Element	Dimension	Background
Title Bar	28px height	#3a3a3a
Toolbar	38px height	#323232
Tool Brushwork	36px width	#323232
Layers Panel	260px width	#2a2a2a
Inspector Panel	260px width	#2e2e2e
Canvas Area	flexible	#1a1a1a
Status Bar	22px height	#2a2a2a
Layer Row	32px height	transparent
Window Radius	10px	—

Tool Brushwork

Vertical strip on the left edge. 36px wide, each tool icon 28×28px with 6px radius. Tools are color-coded by category.

Selection & Transform

✚

□

⌖

Paint & Draw

✎

✂

◈

Shape & Text

○

Retouch

✦

⚐

Inspector Panel

Right-side panel, 260px wide. Collapsible sections with disclosure triangles. Contains Arrange, Style, Format, Color Adjustments, Effects.

Color Adjustments

Brightness

Contrast

Saturation

Temperature

Levels

Inspector Specs

Property	Value
Width	260px
Background	#2e2e2e
Border Left	1px solid #1e1e1e
Section Padding	10px 12px
Section Divider	1px solid rgba(255,255,255,0.06)
Input Height	22px
Input BG	rgba(255,255,255,0.06)
Input Border	1px solid rgba(255,255,255,0.12)
Input Focus	1px solid #0A84FF
Slider Height	4px
Slider Track	#4a4a4a
Slider Fill	#0A84FF
Slider Thumb	14px, #fff, shadow

Layers Panel

Left-side panel showing layer stack with thumbnails. Supports grouping, drag-reorder, visibility toggles, blend modes.

Layers

+ …

Background 👁

Circle Shape 👁

Headline Text 👁

Group 1

Color Fill 👁

Mask 👁

Property	Value
Panel Width	260px
Background	#2a2a2a
Row Height	32px
Row Padding	4px 8px
Thumbnail	24px, radius 4px
Selected BG	rgba(10,132,255,0.25)
Hover BG	rgba(255,255,255,0.04)
Group Indent	16px
Divider	1px rgba(255,255,255,0.06)

Canvas & Selection

Central editing area with optional rulers, guides, and checkerboard transparency pattern.

Selection Handles

border: 1px dashed #0A84FF, handles: 8px white, 1px #0A84FF border

Transparency Checkerboard

#cccccc / #999999 checkerboard, 8px squares

Guide Lines

guides: 1px solid #FF9500

Color Picker

Custom color picker popover with inkwell, hue/opacity bars, hex/RGB inputs, and saved swatches.

HEX

Property	Value
Width	240px
Background	#3a3a3a
Border Radius	8px
Padding	12px
Inkwell Height	140px
Bar Height	12px
Swatch Size	20px
Swatch Gap	4px
Swatch Radius	4px
Shadow	0 4px 16px rgba(0,0,0,0.4)

Menus & Dialogs

Context Menu

Dialog / Sheet

Export Image

Choose a format and quality for export.

PNG

JPEG

TIFF

HEIF

Quality

80%

Tooltip

bg: #4a4a4a, radius: 6px, padding: 4px 8px, font: 500 11px, shadow

Controls

App Buttons

Segmented Control

Nostalgias

Inches

RGB

HSB

Lab

Toggle / Switch

Enabled

Disabled

Progress Bar

Applying ML Super Resolution... 65%

Inputs

Width

Height

DPI

Focused

Dropdown / Select

Normal ▼

ML-Powered Features

Machine learning features use a distinctive pink-to-purple gradient badge to differentiate them from standard tools.

ML Super Resolution

Upscale images up to 6x using neural networks.

ML Denoise

Remove noise while preserving detail using ML.

ML Auto Enhance

One-click ML color and exposure optimization.

ML Remove Background

Instantly remove backgrounds with subject detection.

ML Match Colors

Match color brushwork between two images via ML.

ML badge: gradient(135deg, #FF375F, #BF5AF2), radius: 100px, padding: 3px 10px, font: 600 11px

Spacing Scale

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

120px

160px

Borders & Shadows

Border Radius

4px

6px

8px

10px

12px

16px

20px

100px (pill)

Shadows

Tooltip2px 8px

Popover4px 16px

Menu4px 24px

Card4px 32px

Window20px 60px

Glow Effects (Website)

Blue Glow0 0 60px

Purple Glow0 0 60px

Motion & Interaction

Website Transitions

Element	Property	Duration	Easing
Default	all	0.3s	ease
Fast (controls)	all	0.15s	ease
Smooth (page)	all	0.5s	cubic-bezier(0.4, 0, 0.2, 1)
Button hover	filter	0.3s	ease
Card hover	transform	0.3s	ease

App Transitions

Element	Duration	Easing
Panel reveal/hide	0.25s	ease-in-out
Inspector collapse	0.2s	ease
Tooltip fade	0.15s	ease
Menu open	0.1s	ease-out
Canvas zoom	0.3s	ease-out
Layer reorder	0.2s	ease
Tooltip delay	500ms	—
Selection marquee	2s linear infinite	animated dashes

Interactive Demo

Hover: Lift

Hover: Lighten

App Icon

Shape: macOS rounded rectangle (squircle), 28px radius at 128px

Gradient: Light blue (#4FC3F7) to deep blue (#01579B), top-to-bottom

Motif: Stylized bullion / light refraction in white

Shadow: 0 8px 32px rgba(2,136,209,0.4)

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`100px`	`—`	`{'max': '375px'}`
App / Portal	`—`	`-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif`	`6px`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-button bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-button border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.