System v1.0

Patterns
Design System.

The official documentation for the Patterns design language. Brutalist, high-contrast, and tool-like. Honest materials. Hard edges. No decoration.

Typography

Two voices: The Machine (Mono) for structure and data, and The Human (Sans) for narrative and reading.

The Machine (Headers)
H1
The Quick Brown Fox
H2
The Quick Brown Fox
H3
The Quick Brown Fox
H4
The Quick Brown Fox
Data
The Quick Brown Fox
The Human (Body)
Body Lg

Patterns is a tool for thinkers to end the fragmentation of captures scattered across apps, notes, and bookmarks.

Body Base

We invite you to join the Patterns movement to reclaim your agency. The modern thinker captures constantly—but in silos. A link bookmarked in Safari. A screenshot in Photos. A post saved on X.

Palette

High contrast. Uncompromising. Signal Green pierces through the void.

#39FF14

Signal

#39FF14

Active states, cursors, emphasis

#0C0C0C

Void

#0C0C0C

Primary Background (Dark)

#FFFFFF

Paper

#FFFFFF

Primary Background (Light)

#2A2A2A

Muted

#2A2A2A

Disabled, tertiary content

Depth & Shape

Hard edges. 1px borders. Sharp shadows. No blur.

Hard Card

Standard container. 4px hard shadow. Collapses to 2px on hover.

Interactive Elements
Form Controls

Spacing

Tailwind's spacing scale. Use with gap-*, p-*, m-*.

ClassValuePixelsPreview
gap-10.25rem4px
gap-20.5rem8px
gap-41rem16px
gap-61.5rem24px
gap-82rem32px
gap-123rem48px
gap-164rem64px

Layout

Common flexbox and grid patterns. Copy the classes directly.

Flex Column

1
2
3

Flex Row

1
2
3

Grid 3 Cols

1
2
3
4
5
6

Space Between

LeftRight

Center

Centered

Wrap Tags

ReactTSTailwindVite

Z-Index

Layered stacking system. Use z-[var(--z-*)].

--z-toast800Notifications
--z-tooltip700Tooltips
--z-popover600Popovers
--z-modal500Dialogs
--z-sticky200Headers
--z-dropdown100Menus
--z-base0Default

Motion

Fast, purposeful transitions. Respects prefers-reduced-motion.

Durations
--duration-7575msInstant
--duration-150150msButtons
--duration-200200msDefault
--duration-300300msModals
--duration-500500msPages
Easing Functions
--ease-linear
--ease-in
--ease-out
--ease-in-out

Breakpoints

Responsive prefixes: sm: md: lg: xl:

PrefixMin-WidthDevice
sm:640pxPhones (landscape)
md:768pxTablets
lg:1024pxDesktops
xl:1280pxLarge screens
2xl:1536pxWide screens
Current Breakpoint:
Mobilesmmdlgxl2xl

Focus

Accessible focus indicators. Use the .focus-ring class.

Tab through these elements:
Link
.focus-ring:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

Components

Atomic elements constructed from the design tokens.

System Notice

System update completed successfully.

SignalMutedSolid
FileSize
pattern_1.json12kb
pattern_2.json12kb
pattern_3.json12kb