post-ai.systems

Projects Notes Design System

About Design System

Tokens

Breakpoints Colors Gradients Textures Shadows Icons

Primitive Scale

Corner Radius Interaction States

Line Heights Music Constants

Rules

Icon-only Tooltips Prop Naming Rule Localizable Copy Rule

Media

Site Logo Favicon

Animations

Portfolio Evidence Video Animation

Portfolio Evidence Animation

Design System Video Animation

Design System Animation

Network Path Video Animation

Network Path Animation

Debug Square Video Animation

Debug Square Animation

Scaffolding Video Animation

Scaffolding Animation

SQVL Mesh Video Animation

SQVL Mesh Animation

SQVL Mesh Animation Draft

SQVL Mesh Animation Scene Setup

Components

Heading Caption Paragraph Link Floating Button Loading Spinner Search Field Card Grid Tag Article Card Project Item Icon and Label Button Stub Object

Blocks

Project Hero Carousel

Project Hero Item Carousel Arrow

Project Carousel Navigation

Project Carousel Timer Button

Project Hero Project Header Project About Agent Ready Project Brief Locale Fallback Notice

Article Hero Header Article Hero Content Article Hero Footer

Related Projects

Related Projects Header Related Projects Content Related Projects Footer

Rich Text Summary Rich Text Heading Rich Text Subheading Rich Text Paragraph Rich Text List Rich Text Quote Rich Text Image Rich Text Code Block

Header Top Part

Header Home Button Language Switcher

Header Middle Part

Header Menu Button

Header Bottom Part

Content

Collapsible Menu Item

Disclosure Icon Button

Component Detail Body

Home Page Articles Index Page Article Page Project Landing Page

Project Changelog Page

Project Changelog List

Project Changelog Entry

Project Story Page Projects Index Page

Loading

Loading Design System page

Primitive Scale

Primitive Scale Essence

Breakpoint

Primitive scale

Base distances that semantic tokens map to.

Space 1 --space-1: 0.25rem / 4px

Space 2 --space-2: 0.5rem / 8px

Space 3 --space-3: 0.75rem / 12px

Space 4 --space-4: 1rem / 16px

Space 6 --space-6: 1.5rem / 24px

Space 8 --space-8: 2rem / 32px

Space 12 --space-12: 3rem / 48px