Design System

Knolling

Precise arrangement. 90-degree angles. Objects organized at perfect right angles on a flat surface.

Everything aligned.
Nothing at random.
Satisfying order.

01

Color Palette

A neutral surface palette inspired by photography backdrops. Kraft paper, linen, and concrete surfaces provide the canvas. One rust accent for emphasis.

White #FFFFFF
Kraft #F5F3EE
Shadow #C4C2BD
Ink #1A1918
Rust #C4572A
02

Typography

IBM Plex Sans delivers precision and clarity. The monospace variant for technical details. Clean, engineered letterforms that align with the grid.

Display

48px / 700

Aa

Heading

28px / 600

Organized

Subheading

20px / 600

Precise Alignment

Body

16px / 400

Objects arranged at 90-degree angles create visual harmony. Every element has its place in the composition.

Small

14px / 400

Secondary information and captions maintain the same precision.

Mono

13px / 500

grid: 8px | spacing: 24px | angle: 90deg

Label

11px / 600 / UC

Specification Label
03

Spacing Scale

Built on an 8-pixel grid. Precise increments ensure every element aligns. Spacing is measured, not guessed.

4px
space-1
8px
space-2
16px
space-3
24px
space-4
32px
space-5
48px
space-6
64px
space-7
96px
space-8
Base unit 8px
Grid columns 12
Alignment 90 degrees
04

Buttons

Buttons appear as small objects on the surface. Sharp corners, subtle shadows. They lift slightly on hover, like picking up a tool.

Variants

Sizes

With Icons

05

Form Inputs

Input fields as clean rectangles. No rounded corners, no decoration. The shadow grounds them on the surface like index cards or paper forms.

06

Cards

Cards are objects laid flat on the work surface. They cast subtle shadows and lift on hover. Like index cards, notes, or photographs arranged in a grid.

001

Grid System

Everything aligns to the 8px base grid. Columns, gutters, and margins follow mathematical precision.

002

Alignment

90-degree angles only. No rotation, no skew. Horizontal and vertical lines create order.

003

Negative Space

The space between objects matters as much as the objects themselves. Breathing room creates clarity.

Arrangement Display

Tool
Device
Book
Clock
Arrow
Image
Stack
Box
07

Badges

Small labels for categorization and status. Like tiny stickers or tags placed precisely in the composition.

Variants

Default Accent Dark Kraft

Usage Examples

Category New v1.0
8px grid 90 deg Aligned Organized
08

Principles

The philosophy behind knolling: organize, align, photograph. These rules guide every design decision.

Right Angles Only

Every element sits at exactly 90 degrees. No rotation, no diagonal placement. This creates visual harmony and allows the eye to scan naturally.

Parallel Edges

Objects align with each other. Edges run parallel. Groups form natural rows and columns. The grid is visible even when not drawn.

Consistent Spacing

The gap between objects is uniform. Negative space becomes a design element. Breathing room separates and organizes.

Flat Perspective

A top-down view. Objects appear as flat shapes with subtle shadows. No vanishing points, no perspective distortion. Pure geometry.

Knolling was named by Andrew Kromelow while working as a janitor at Frank Gehry's furniture fabrication shop. The term comes from Knoll, the furniture company whose products Kromelow would arrange at right angles.