Skip to content
roguelite labsAnthony Spezzano ↗

Craft

Design engineering notes about UI details. Each entry pairs one subject with specs, rules, and an interactive example.

typography▾
Type Scale
"Use a modular scale, not arbitrary sizes"
Input: the values shown in this study. Result: a visual comparison of type scale. Apply the rule to your own layout and verify it at the target viewport.
Ag12px
Ag16px
A20px
A24px
A32px
A48px
12 / 14 / 16 / 20 / 24 / 32 / 48 / 64pxratio: 1.25
typography▾
Line Height
"Match line-height to content purpose"
Input: the values shown in this study. Result: a visual comparison of line height. Apply the rule to your own layout and verify it at the target viewport.
heading 1.15

The quick brown fox jumped over the lazy dog.

body 1.6

The quick brown fox jumped over the lazy dog.

body: 1.5–1.6headings: 1.1–1.2
typography▾
Font Weight
"Use weight for hierarchy, not just size"
Input: the values shown in this study. Result: a visual comparison of font weight. Apply the rule to your own layout and verify it at the target viewport.
400Design Engineering — body
500Design Engineering — emphasis
600Design Engineering — label
700Design Engineering — heading
400 = body500 = emphasis
typography▾
Letter Spacing
"Tight for large text, loose for small"
Input: the values shown in this study. Result: a visual comparison of letter spacing. Apply the rule to your own layout and verify it at the target viewport.
displayCRAFT
bodyCRAFT
capsCRAFT
display: −0.03emheading: −0.01em
spacing▾
4pt Grid
"Every spacing value divisible by 4"
Input: the values shown in this study. Result: a visual comparison of 4pt grid. Apply the rule to your own layout and verify it at the target viewport.
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96pxnever: 7, 10, 15, 22...
spacing▾
Padding Conventions
"Padding defines comfort, not decoration"
Input: the values shown in this study. Result: a visual comparison of padding conventions. Apply the rule to your own layout and verify it at the target viewport.
btn sm: 6×12pxbtn md: 8×16px
spacing▾
Component Heights
"Consistent touch targets across density levels"
Input: the values shown in this study. Result: a visual comparison of component heights. Apply the rule to your own layout and verify it at the target viewport.
32
36
40
44px
compact: 32pxdefault: 36px
spacing▾
Gap Rhythm
"Inner gaps smaller than outer gaps"
Input: the values shown in this study. Result: a visual comparison of gap rhythm. Apply the rule to your own layout and verify it at the target viewport.
Icon → Label: 6px
List items: 8px
Form fields: 12px
icon–label: 6pxlist items: 8px
color▾
Contrast Ratios
"WCAG AA minimum everywhere, AAA for body text"
Input: the values shown in this study. Result: a visual comparison of contrast ratios. Apply the rule to your own layout and verify it at the target viewport.
11.4:1AAA ✓
body text: ≥4.5:1large text: ≥3:1
color▾
Semantic Color
"Name colors by role, not by value"
Input: the values shown in this study. Result: a visual comparison of semantic color. Apply the rule to your own layout and verify it at the target viewport.
bg
fg
muted
accent
error
ok
foregroundbackground
color▾
Opacity Patterns
"Use opacity for hierarchy — not extra colors"
Input: the values shown in this study. Result: a visual comparison of opacity patterns. Apply the rule to your own layout and verify it at the target viewport.
0.95Design Engineering
0.65Design Engineering
0.35Design Engineering
0.25Design Engineering
primary: 0.95secondary: 0.65
color▾
Dark Mode
"Don't just invert — rethink surface depth"
Input: the values shown in this study. Result: a visual comparison of dark mode. Apply the rule to your own layout and verify it at the target viewport.
Title
Body text
Title
Body text
bg: 8–12% lightness (not #000)text: 90–95% (not #fff)
motion▾
Duration Scale
"Match duration to spatial distance traveled"
Input: the values shown in this study. Result: a visual comparison of duration scale. Apply the rule to your own layout and verify it at the target viewport.
micro
element
page
micro (tooltip): 100–150mselement (modal): 200–300ms
motion▾
Easing Palette
"Never use linear for UI — only for spinners"
Input: the values shown in this study. Result: a visual comparison of easing palette. Apply the rule to your own layout and verify it at the target viewport.
ease-out
ease-in
linear
enter: ease-outexit: ease-in
motion▾
Reduce Motion
"Respect prefers-reduced-motion unconditionally"
Input: the values shown in this study. Result: a visual comparison of reduce motion. Apply the rule to your own layout and verify it at the target viewport.
prefers-reduced-motion
fallback: fade pulse
wrap all animations in @media (prefers-reduced-motion: no-preference)fallback: instant transitions