abe-skills — Design System v1.1

§00 · Core Philosophy

xy:0,0

Every pixel on the page is an opportunity to do something interesting. It doesn't have to be loud or colorful, but something should be happening everywhere. No unused real estate. The interface IS the product.

Design-first: form is as important as function

The visual language draws from Blueprint graphic design — born in workshops, labs, and architect offices. We borrow the hyper-detailed language of technical drawings and turn it into pure graphic play. Physics-based animations reinforce the math and science aesthetic.

01 Color Palette

Click any swatch to copy its hex value. The palette uses a base → hover pairing system: resting states are muted and sophisticated, hover states light up with energy.

Foundation Colors

palette:foundation

Accent Pairs · Base → Hover

palette:pairs

Elements "light up" on interaction — resting state is muted, active state pops

02 Typography

Everything should feel like it was typed, not typeset. Monospace everywhere.

Font Specimens

type:5

THE QUICK BROWN FOX

Press Start 2P

Logo / Site Name

The quick brown fox jumps over the lazy dog

VT323

Headings

The quick brown fox jumps over the lazy dog

Silkscreen

Alt Headings

The quick brown fox jumps over the lazy dog — 0123456789

JetBrains Mono

Body / UI

const x = await fetch('/api') // → ≠ ≤

Fira Code

Code / Data

All-caps + letter-spacing for labels · 0.1em–0.15em

03 Background Patterns

The background is not just a color — it's a canvas with character. Hover to inspect with crosshairs.

Pattern Library

bg:4

Square Grid20×20px

Dot Grid20×20px

Ruled Notebook28px rules

TopographicSVG

04 Spacing Scale

Compact. Tighter than typical design systems.

Space Tokens

sp:6

--space-xs

0.25rem · 4px

--space-sm

0.5rem · 8px

--space-md

0.75rem · 12px

--space-lg

1rem · 16px

--space-xl

1.5rem · 24px

--space-2xl

2rem · 32px

max 32px for most cases

05 Panels

Bordered containers with fieldset-legend labels. No drop shadows — flat, technical-drawing world.

Example Panel

ui:panel

This panel demonstrates the bordered container pattern. Label sits top-left using the fieldset legend technique. Coordinates at top-right for that obsessive technical-drawing feel.

06 Buttons & Inputs

Interactive Elements

ui:btn

Buttons

Primary uses wisteria → electric purple on hover. Coral → signal red on hover.

Terminal Input

Prompt in wisteria. Border lights up to electric purple on focus.

07 Tags & Badges

Tag System · Accent Pairs

ui:tag

Purple (Wisteria → Electric Purple)

p0 #design #frontend

Green (Pistachio → Volt)

complete @today new

Red (Coral → Signal Red)

urgent p1 breaking

Utility

#cloudflare deployed default

Hover any tag to see the accent pair light up

08 Data Display

Metrics

ui:data

Tokens

Components

Patterns

Typefaces

Activity Graph

ui:graph

Bars use the accent palette. Brighter bars = higher activity.

10 Animation

Animations teach or reveal — never just decorate. Hover the demos below.

SVG Path Drawing

anim:draw

Hover to reveal annotation lines and dimension labels

Activity Indicators

anim:indicators

Mechanical feel — not generic spinners. Beacon, crosshair (2px stroke), dot traversal.

11 Gravity Collapse

Elements detach and fall under simulated gravity. The interface obeys physical laws. Click the button to trigger, click again to reset.

y = ½gt² · g ≈ 9.8 m/s²

Gravity Stage

anim:gravity

§05

§07

tag

btn

●

§12

ground plane · y=0

cubic-bezier(0.33, 0, 1, 1) — accelerating, no ease-out. Settle squash on landing.

12 Anti-Patterns

Never do these.

Forbidden

!!:warn

✕Large empty white space or excessive spacing

✕Generic template / cookie-cutter SaaS aesthetics

✕Pure white (#FFFFFF) bg or pure black (#000000) text

✕Parallax scrolling, bouncy elastic animations

✕Proportional fonts for UI elements

✕Drop shadows — flat technical-drawing world

✕Unused screen real estate with nothing happening

✕UI kit designs without customization