Colors

A near-monochrome system anchored by a violet brand. Three accent families cover all semantic states.

Brand — Violet
50#F2E6FF
100#E5CCFF
300#B163FF
500#7F00FF
700#51158C
900#2B0057
Neutral ramp
0#FFF
100#F5F5F5
200#E3E3E3
300#D9D9D9
500#B3B3B3
600#767676
800#444444
900#2C2C2C
950#1E1E1E
Semantic families

Danger

50#FEE9E7
300#EC221F
500#C00F0C
700#900B09

Warning

50#FFFBEB
100#FFF1C2
300#BF6A02
700#522504

Success

50#E6F4EA
300#2F9E44
700#15803D
Semantic tokens
TokenValueSwatchUsage
--fg-default#1E1E1EPrimary text
--fg-secondary#757575Labels, subtitles
--fg-tertiary#B3B3B3Placeholders, hints
--bg-default#FFFFFFPage background
--bg-secondary#F5F5F5Card interiors, table rows
--border-default#D9D9D9All UI borders
--brand-500#7F00FFPrimary actions, focus rings

Typography

Inter for UI copy, Roboto Mono for code and numeric data. A 10-step scale from Hero 72 down to Caption 12.

Font families
Sans — Inter
Aa Bb Cc 01
Regular · Medium · Semi Bold · Bold · Italic
var(--font-sans)
Mono — Roboto Mono
Aa Bb 01 {}
Regular · Medium · Bold
var(--font-mono)
Type scale
HeroInter Bold · 72 / 1.2 · −3%
Design System
TitleInter Bold · 48 / 1.2 · −2.5%
Title Page
SubtitleInter Medium · 32 / 1.25
Subtitle text
HeadingInter Bold · 24 / 1.2 · −2%
Heading
SubheadingInter Regular · 20 / 1.25
Subheading
BodyInter Regular · 16 / 1.5
The quick brown fox jumps over the lazy dog.
Body StrongInter 600 · 16 / 1.5
The quick brown fox jumps over the lazy dog.
Body EmphasisInter Italic · 16 / 1.5
The quick brown fox jumps over the lazy dog.
Body LinkInter · 16 · underline
The quick brown fox jumps over the lazy dog.
Body SmallInter · 14 / 1.4
Small body — labels, meta, helper text.
CaptionInter · 12 / 1.33
Tiny label · metadata · tooltip hint.
CodeRoboto Mono · 16 / 1.4
const tokens = { brand: '#7F00FF' };

Spacing & Grid

A single unified scale used for both padding and gap. No ad-hoc values — only tokens.

Space tokens
--space-1004px
--space-2008px
--space-30012px
--space-40016px
--space-60024px
--space-80032px
--space-160064px
--space-240096px
--space-4000160px
Border radius
small · 4px
base · 8px
large · 16px
xl · 24px
full · 9999
Grid system
A 12-column fluid grid with 24px gutters. Outer padding: 32px (mobile: 16px). Max container: 1440px centered. Components span 2–12 columns.
2
4
6
12

Effects

Six drop-shadow levels, six inner-shadow levels, plus backdrop-blur utilities for overlays.

Drop shadows · 100 → 600
100
200
300
400
500
600

Buttons

Four variants × three sizes × three states. Icons optional on either side.

Variants
Default state
States
Primary
Neutral
Subtle
Sizes & icons
Sizes sm · md · lg · with icons · icon-only

Form Inputs

Text fields, selects, checkboxes and radios — all with labels, hints, error states and disabled states.

Text field states
Must be a valid email.
This field cannot be edited.
Textarea & Select
Checkbox & Radio
Controls accent-color: #7F00FF

Tags

Five semantic colour variants plus solid. Optional icon and dismiss button.

Variants
Neutral Brand Danger Warning Success Solid
Variants neutral · brand · danger · warning · success · solid
With icons & dismiss
Starred New Error Shipped Filter Label
Icons + Dismiss

Cards

Versatile containers for product info, statistics, testimonials, and content layouts.

Product Card
Short product description spanning two lines to demo layout.
$42.00
Active users
24,319
+12.4% this week

Unique visitors across all surfaces.

"The system saved us weeks. Every primitive we needed was there — and none we didn't."
JL
Jamie Liu
Design Lead · Acme
Card elevation
Flat
border only
200
hover state
400
floating
600
modal

Notifications

Four semantic types — info, success, warning, danger — each with optional title, body, and dismiss.

Heads upInformational message using neutral tones.
Changes savedYour tokens were updated successfully.
Watch outThis action can't be undone once confirmed.
Something went wrongWe couldn't reach the server. Try again.

Avatars

Five sizes, three colour variants, status indicator, and stack group.

Sizes
JL24
JL32
JL40
JL48
JL64
Variants & stack
AB CD EF GH
JL KP MN +4
Variants default · dark · brand · with status · stack

Accordion

Native <details>/<summary> — no JS required. Multiple can be open simultaneously.

What tokens are included?
Color, typography, spacing, radius, shadow, and motion tokens — all in a single colors_and_type.css file as CSS custom properties.
How do I apply the brand color?
Override three variables at :root: --brand-300, --brand-500, and --brand-700. Everything else updates automatically.
Which icon set is used?
Feather Icons via CDN. 2px stroke, 6 sizes (16/20/24/32/40/48). For offline use, run npm i feather-icons and serve the sprite locally.
Is this production-ready?
Yes. The token file and component patterns are used in production. The UI kit is a reference implementation, not a framework — copy what you need.

Tooltip

Pure CSS hover tooltips — no JS. Dark background, arrow, smooth fade.

Opens in a new window
Cmd + S
JL
Jamie Liu · Design Lead
Tooltip pure CSS · hover to show

Dialog

Modal dialog with backdrop, title, body, and action buttons.

Dialog click to preview

Confirm deletion

This will permanently delete the item and all associated data. This action cannot be undone.

Pagination

Page controls with prev/next and numbered pages. Active state uses brand violet.

Pagination numbered · prev/next

Sections

Reusable full-width marketing sections — hero, features, pricing, testimonial, CTA.

Hero
v1.0 — open source

A foundational design
system for any brand.

Neutral tokens, clear type, and a small set of well-behaved components. Swap three variables and it looks like yours.

Hero headline · sub · dual CTA
Feature grid
What's inside

Small surface area.
Large blast radius.

Primitives that cover 80% of any product UI.

Semantic tokens
Every color, spacing, and radius is a variable.
Type that behaves
10-step scale with optical letter-spacing baked in.
Unified spacing
One scale for padding and gap. No more 14 vs 16 debates.
Feature grid 3-col with icon cards
CTA section

Start shipping with it today.

Clone the repo, copy the CSS, and you're 80% of the way to a design system.

One email per release. No marketing.
CTA brand bg · email capture

Examples

Full-screen UI compositions built entirely from system primitives.

Login form

Sign in to Self

Enter your credentials to continue.

Don't have an account? Sign up

Login form real-world layout
Dashboard card strip

Overview

Users
24,319
+12.4%
Revenue
$4.2k
+8.1%
Conversion
3.2%
−0.4%
Uptime
99.9%
Healthy
Dashboard stat cards
Settings page

Account settings

Manage your profile and preferences.

JL
PNG, JPG · max 2MB
Settings sidebar + form

Changelog

Version history and release notes for the Self Design System.

Apr 2026
v1.0.0
Initial release

First public release of the Self Design System. A near-monochrome, token-first foundation built from the Figma "Simple Design System" source.

  • Full color token system — neutral ramp + brand violet + danger/warning/success families
  • 10-step typography scale — Inter (self-hosted) + Roboto Mono
  • Unified spacing scale (4–160px) for both padding and gap
  • 5-step radius tokens and 6-step drop/inner shadow scale
  • 12 components: Buttons, Inputs, Tags, Cards, Notifications, Avatars, Navigation, Accordion, Menu, Tooltip, Dialog, Pagination
  • 3 full-page examples: Login, Dashboard, Settings
  • Feather icon system (280+ icons, 6 sizes, CDN)
  • Web UI Kit — interactive marketing landing page (React/Babel)
  • colors_and_type.css — single-file token sheet, zero dependencies
  • SKILL.md — Claude Code compatible skill file