DESIGN KIT v1.0 SYSTEM NAME YEAR

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

One sentence describing the system. Theme, accent, and corner radius all match the target.

001 / POSITIONING

The vibe, in seven words.

WORD1WORD2WORD3WORD4WORD5WORD6WORD7

One positioning statement. 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.

Black
--black#000000
Text primary.
White
--white#FFFFFF
Page ground.
Surface
--surface#F4F4F5
Cards, panels.
Accent
--accent#6ECE9D
CTAs only. Under 5% of viewport.
SURFACE BUDGET 75 WHITE / 18 SURFACE / 5 ACCENT
003 / TYPOGRAPHY

One voice, in the target's type.

DISPLAY
Family 500
clamp(44 to 80px)
Sample headline.
H1
Family 500
32 to 40px
Section title at true size.
BODY
Family 400
16px / 1.5
Body copy at supporting color, line length capped so the reader keeps the line.
DATA
Mono 400
tabular
metric  12,408  delta +3.2%
004 / LAYOUT

The signature composition.

Describe and draw the layout move this system is known for.

FIG.01 - SIGNATURE COMPOSITION (replace with the real blueprint)
Content max
1200px
Centered rail.
Columns
12
Describe the split.
Spacing base
16px
List the scale.
Section rhythm
192px
Top padding per section.
--pad-xs 16
--pad-s 32
--pad-m 64
--pad-l 128
005 / VISUAL ELEMENTS

The reusable devices.

A - CARDS / FRAMING

Describe the card system: elevation, border, radius.

B - RADIUS SCALE

Three radii, the system's real values. Or state the 0px law.

C - TEXTURE

Grid, dots, scanline, or none. Match the target.

D - STATUS / IMAGE

Status indicators and image treatment as the target uses them.

006 / COMPONENTS

The real library.

Each card is a real component. Link to its source or spec where one exists.

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.

BUTTON HOVER
Action
opacity 1 to .85
--dur-fast 100ms
--ease
REVEAL
Enter
opacity 0 to 1
--dur-slow 300ms
--ease
CARD LIFT
Hover
translateY 0 to -4px
--dur-base 200ms
--ease

HARD RULES

  • Animate opacity and transform only.
  • Hover ~100ms, reveals 200 to 300ms, nothing over the target's max.
  • 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.

x DON'T

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