DESIGN KIT v1.0 SYSTEM NAME YEAR

Hero headline in the
system's own voice,
with a measured second line.

One sentence describing the system. Near-black ground, white hairlines, one signal accent, sharp corners.

001 / POSITIONING

The vibe, in seven words.

WORD1WORD2WORD3WORD4WORD5WORD6WORD7

One positioning statement in the system's voice. Accent phrase here.

POSITIONING RULES

Rule one, grounded in this system.

Rule two.

Rule three.

002 / COLOR

Monochrome ground, one signal.

Every token shown, copyable. Click a chip for the variable, a hex for the raw value. Accent stays under 5% of any screen.

Black
--black #050505
Page ground. REPLACE with the target's real near-black.
vs WHITE 20.4:1 - AAA
Surface
--surface #0C0C0C
Cards, panels, code blocks. Always paired with a 1px hairline.
vs WHITE 19.1:1 - AAA
White
--white #FFFFFF
Primary text, frames, plus markers. 16% alpha for hairlines, 7% for texture.
vs BLACK 20.4:1 - AAA
Grey
--grey #A3A3A3
Secondary text, descriptions, inactive nav.
vs BLACK 8.3:1 - AAA
Grey Dim
--grey-dim #6B6B6B
Tertiary only: mono labels, indices, timestamps. Never body text at this value.
vs BLACK 3.9:1 - AA LARGE / LABELS ONLY
Accent
--accent #22D3EE
The one signal. CTAs, live markers, key metric. Max one per viewport.
vs BLACK 11.3:1 - AAA
SURFACE BUDGET 82 BLACK / 10 SURFACE / 5 WHITE / 3 ACCENT
003 / TYPOGRAPHY

One voice, in the target's type.

Sans for headlines and body, mono for labels and data. Use a real sentence at each size, never lorem ipsum.

HERO
Family 700
clamp(44-96px) / 1.05
tracking -0.03em
Sample headline.
H1
Family 700
clamp(32-56px) / 1.05
tracking -0.02em
Section title at true size.
H2 / STATEMENT
Family 500
clamp(24-32px) / 1.25
tracking -0.01em
A statement line set at supporting weight.
BODY
Family 400
16px / 1.6
color: secondary
Body copy at supporting color, line length capped so the reader keeps the line.
LABEL
Mono 500
12px / UPPERCASE
tracking +0.08em
003 / TYPOGRAPHY - REVISED YYYY.MM
DATA
Mono 400-700
14px / tabular
metric  12,408  delta +3.2%
++++

PAIRING RULE

State the rule that links the two families. Example: every headline gets a mono label above it.

P.03 / PROJECT - STACK / YEAR
One headline that earns the label above it.
004 / LAYOUT

The signature composition.

Draw the layout move this system is known for. The blueprint below is a 2/3 + 1/3 example: replace it with the real one.

++++
FIG.01 - SIGNATURE COMPOSITION (REPLACE) 12-COL GRID / 24PX GUTTER
COLS 1-8 - INFORMATION
→P.01
CARD ONE
STACK / DOMAIN / YEAR
→P.02
CARD TWO
STACK / DOMAIN / YEAR
→P.03
CARD THREE
STACK / DOMAIN / YEAR
Max width
1440px
Centered rail. REPLACE with the target's real width.
Columns
12 / 24px
Describe the split. Mobile collapses to one column.
Spacing base
4px
Scale: 4, 8, 16, 24, 40, 64, 96, 160. No off-scale values.
Section rhythm
96px
Every section opens with a hairline and a mono index label.
--space-1
4
--space-2
8
--space-3
16
--space-4
24
--space-5
40
--space-6
64
--space-7
96
005 / VISUAL ELEMENTS

The reusable devices.

Four example devices for the engineering family: plus-marked frames, hover lists, line texture, status squares. Swap for the target's real devices.

A - PLUS-MARKED FRAME
++++ FEATURED CONTENT

1px hairline border, mono "+" at each corner sitting on the line. Reserved for featured content.

B - HOVER LIST (NAV / INDEX)
  • Item one
  • Item two
  • Item three

Items rest dim. Hover: white, indent, bullet fades in. Dividers are 16%-alpha hairlines.

C - TEXTURE: LINES ONLY

Repeating 1px lines at 7% alpha: crosshatch, scanline, or grid. No noise PNGs, color gradients, or blur glows.

D - STATUS + IMAGE TREATMENT
LIVE ACTIVE ARCHIVED
IMG: MONOCHROME + LINE OVERLAY

Bullets are squares, never circles. Photography is monochrome with a line-based overlay.

006 / COMPONENTS

The real library.

Each card is a real component. Link to its source or spec where one exists, and replace the PREVIEW block with a real iframe or image.

PREVIEW
A - Category

Component Name

One line describing what it is and does.
PREVIEW
B - Category

Component Name

One line describing what it is and does.
PREVIEW
C - Category

Component Name

One line describing what it is and does.
007 / MOTION

Motion you feel, not notice.

FADE-UP REVEAL
Content enters.
opacity 0 to 1
translateY 12px to 0
--dur-slow 700ms
--ease-out
LINE DRAW
width 0 to 80%
--dur-slow 700ms
--ease-inout
UNDERLINE SWEEP
Read more
scaleX 0 to 1, origin left
--dur-base 300ms
--ease-out

HARD RULES

  • Animate opacity and transform only.
  • Match the target's real durations and easings in every demo above.
  • No parallax, scroll-jacking, or bounce (unless the target uses them).
  • Honor prefers-reduced-motion on everything.
008 / DO & DON'T

+ DO

  • Concrete rule grounded in this system.
  • Concrete rule grounded in this system.
  • Concrete rule grounded in this system.

× DON'T

  • The opposite rule, what this system forbids.
  • The opposite rule, what this system forbids.
  • The opposite rule, what this system forbids.
COPIED