Neo Design System · v1.0

Every decision,
documented.

A 3-tier token architecture — primitives, semantics, and components — built for a bold, minimalistic portfolio. Every value is intentional. Nothing is ad hoc.

01

Brand

Wordmark

anderson w..

Product Designer · Est. 2015

Monogram

aw.
primary
aw.
paper
aw.
accent

Voice — plainspoken, specific, no filler

YesTen years shipping for 1M+ users.
YesI distill the complex into systems.
NoPassionate about crafting delightful, human-centered experiences.
NoUnlocking next-generation design paradigms.

Iconography — Lucide, stroke-width 1.5

arrow-up-right
circle-dot
layers
pen-line
mail
git-fork
component
play
02

Color

Brand Palette

amethyst

amethyst-200

#B8A8ED

amethyst-400

#7A5DD9

amethyst-500

#5835B0

amethyst-700

#321E68

amethyst-dark

#8B6AFF

lilac

lilac-200

#E8D5FA

lilac-400

#CF9FF5

lilac-500

#BF92F0

lilac-700

#8A50C8

rose

rose-200

#F2CECE

rose-400

#E3AAAA

rose-500

#D78F8D

rose-700

#B05F5D

gold

gold-200

#F5DFC0

gold-400

#E8C08A

gold-500

#DBA166

gold-700

#B07030

peridot

peridot-200

#D0E4BC

peridot-400

#A8C882

peridot-500

#87AA61

peridot-700

#567A35

Neutral Palette

neutral-0

#FFFFFF

neutral-50

#FAF8F4

neutral-100

#F0EDE8

neutral-200

#E0DDD8

neutral-300

#C8C5C0

neutral-400

#9A9690

neutral-500

#737068

neutral-600

#4A4740

neutral-700

#2E2C28

neutral-800

#1A1918

neutral-900

#0F0E0D

neutral-950

#0A0A0A

Semantic — Light Mode

bg-page
bg-surface
bg-raised
accent
text-primary
text-secondary
text-muted
status-error
status-success
status-warning
status-info
03

Typography

Typefaces

display

Aa

Roboto Serif

body

Aa

Satoshi

mono

Aa

Azeret Mono

Type Scale

Display

display2xl

w300 · lh0.95

Neo

displayXl

w300 · lh1

Bold. Considered.

displayLg

w400 · lh1.05

Senior Product Designer

Heading

headingXl

w500 · lh1.15

Design Systems at Scale

headingLg

w500 · lh1.2

Component Architecture

headingMd

w600 · lh1.25

Token Hierarchy

headingSm

w600 · lh1.3

Section label

Body

bodyLg

w400 · lh1.65

Every decision documented — from raw primitives to living components.

bodyMd

w400 · lh1.6

Crafting interfaces that balance craft, clarity, and user intent.

bodySm

w400 · lh1.55

Hover states, micro-interactions, and details that reward attention.

Label

labelLg

w500 · lh1.4

Product Design

labelMd

w500 · lh1.4

Case Study

labelSm

w600 · lh1.4

2024

Mono

monoMd

w500 · lh1.7

semantic.color.accent.default

monoSm

w500 · lh1.6

cubic-bezier(0.22, 1, 0.36, 1)

Editorial

quoteLg

w300 · lh1.4

Design is the silent ambassador of your brand.

quoteMd

w300 · lh1.5

Great interfaces are invisible.

Utility Classes

.type-displayNeoRoboto Serif · weight 300 · hero only
.type-ledeI distill the complex into systems.Satoshi · 22px · max 62ch
.type-quoteDesign is the silent ambassador.Roboto Serif · italic · weight 300
.type-metaProduct DesignAzeret Mono · uppercase · tracked
.type-eyebrowCase StudyAzeret Mono · uppercase · tracked
.type-index01Azeret Mono · not uppercase
04

Motion

Easing Curves — tap to preview

default

tap to preview

cubic-bezier(0.22, 1, 0.36, 1)

smooth

tap to preview

cubic-bezier(0.4, 0, 0.2, 1)

spring

tap to preview

cubic-bezier(0.34, 1.56, 0.64, 1)

snappy

tap to preview

cubic-bezier(0.25, 0.1, 0.25, 1)

linear

tap to preview

linear

Duration Scale

instant0ms
micro100ms
fast200ms
base300ms
slow500ms
deliberate800ms
cinematic1200ms

STAGGER SYSTEM

tight: 50ms  ·  normal: 100ms  ·  loose: 200ms
Used for lists, grids, and staggered hero reveals respectively.

05

Components

Button

Variants

Sizes

States

Tag

Brand Colors · md

amethystlilacrosegoldperidotneutral

Brand Colors · sm

amethystlilacrosegoldperidotneutral

Card

project thumbnail
UX DesignDesign System

Neo Design System

A scalable 3-tier token architecture for a bold, minimalistic portfolio.

View case study →

06

Effects

Border Radius

none

0

xs

0.125rem

sm

0.25rem

md

0.5rem

lg

0.75rem

xl

1rem

2xl

1.5rem

3xl

2rem

full

9999px

Shadow Scale

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-glow

Blur Values

blur-sm4px
blur-md8px
blur-lg16px
blur-xl24px
blur-2xl40px

Changelog

What changed, and why.

Every significant update to the Neo Design System — tokens, components, and audit findings — documented with rationale, not just a diff.

First-visit experience was fixed to light mode regardless of the user's OS setting. Dark-mode users had to manually toggle every visit — a friction point that conflicted with respecting user preferences.

ThemeProvider now reads prefers-color-scheme on first visit. Manual toggle still overrides and persists to localStorage.

Changed

ThemeProvider: defaultTheme 'light' → 'system', enableSystem false → true

First-time visitors now land in the theme that matches their OS. Returning visitors with a saved localStorage preference are unaffected.