Supermemory Design System

Design System · 2026

Supermemory's product dashboard had grown without a unified visual foundation. Components and patterns existed but weren't named, tokenized, or structured for reuse. I worked from the existing dashboard to define a shared vocabulary the team could build from.

Design System

Supermemory · Design system

A shared vocabulary for the system

Color

brand

neutral

success

error

Typography

display 2xl

72 / 90

The memory layer

display lg

48 / 60

Built for AI agents

display sm

30 / 38

Connect your tools and remember everything

text lg

18 / 28

Persistent memory across every session and surface.

text md

16 / 24

Six display sizes, five text sizes — sized on a modular scale.

text xs

12 / 18

Caption · Metadata · Timestamps

Spacing scale

none

xxs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

10xl

128

11xl

160

Components

Search memories...

apistrategy

Context

Supermemory's dashboard had been built fast. Buttons, cards, inputs, and colors had accumulated across the product, working visually but never named or structured.

I was brought in to create a design system for it — tokens, components, and patterns extracted from what existed and structured for reuse.

Approach

I started by auditing the dashboard. Every button, input, card, and color in active use across the product. From there I worked backwards — naming what was already there, defining the underlying logic, and structuring it into a system the team could extend.

The goal wasn't to redesign the dashboard. It was to make the existing decisions repeatable.

Foundations

Color, typography, and spacing — the three layers everything else is built on. Each ramp has full alpha scales for dark and light surfaces. Type runs on a modular scale with six display sizes and five text sizes. Spacing is built on a 4px base unit and governs every layout decision.

Supermemory · Color

Six ramps with full alpha scales

brand · light mode

100950

neutral alpha · light

1000

secondary alpha · light

1000

success · light mode

100950

error · light mode

100950

base surfaces

Background

#e5eaf0

Secondary

#f5f7fa

Muted

#e4eef5

Input

#ffffff

Black

#000000

Dark bg

#222426

Supermemory · Typography

Display and text scales

display scale

display-2xl

72 / 90

The memory layer

display-xl

60 / 72

Built for AI agents

display-lg

48 / 60

Connect your tools

display-md

36 / 44

Remember everything

display-sm

30 / 38

Across every session and surface

display-xs

24 / 32

Persistent memory for every AI agent

text scale

text-xl

20 / 30

Memory that persists across every AI session and surface.

text-lg

18 / 28

Six display sizes, five text sizes, modular scale.

text-md

16 / 24

Sized consistently from Display 2xl down to Text xs.

text-sm

14 / 20

Supporting copy, body text, secondary information.

text-xs

12 / 18

Captions, timestamps, metadata, labels.

weights

Regular400

Medium500

Semibold600

Bold700

Components

Built on the foundations — buttons, tabs, toggles, checkboxes, form fields, data tables, status badges, and the icon library. Each component has defined states, variants, and tokens, so the team can drop them into any new surface without making fresh decisions.

Supermemory · Icons

Organized into 19 categories

General

193

Arrows

Charts

Users

Alerts & feedback

Shapes

Layout

Development

Files

Finance & eCommerce

Maps & travel

Communication

Media & devices

108

Security

Editor

104

Images

Time

Weather

Education

All categories —GeneralArrowsChartsUsersAlerts & feedbackShapesLayoutDevelopmentFilesFinance & eCommerceMaps & travelCommunicationMedia & devicesSecurityEditorImagesTimeWeatherEducation

Supermemory · Components

Interactive controls

Buttons

Create API key

DefaultHoverFocusDisabled

Status badges

Done

Tabs

Content

Memories[237]

Toggles

Input

Label

This is the helper description

Label

This is the field description

Label

This is the helper description

Label

This is the field description

Metrics

+100%

−100%

+100%

−100%

Tokens processed

+100%

16,321

Charts

The source

The existing dashboard the system was extracted from — the buttons, status badges, layout, and type that became the named, tokenized vocabulary.

Handoff

The system was handed off as a documented foundation — tokens, components, and patterns extracted from the existing dashboard and structured so the team can build from them going forward.