{ "categories": { "color": { "title": "COLOR", "rules": [ { "id": "60-30-10", "title": "60-30-10", "category": "color", "coverImage": "assets/visuals/cover-603010.svg", "frames": [ { "image": "assets/visuals/60-30-10.svg", "caption": "60% Dominant" } ], "tldr": "60% Dominant, 30% Secondary, 10% Accent. Structures color hierarchy without visual chaos.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7584082295934569760?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DSSQ2tvjSw1/" }, "deepDive": { "rule": [ "60%: Dominant color for main surfaces, backgrounds, text areas", "30%: Secondary color for cards, sidebars, supporting UI elements", "10%: Accent color for CTAs, highlights, warnings, icons" ], "why": [ "Prevents visual fatigue. Too many equally-weighted colors compete for attention.", "Accent color only works because it is rare. At 50% of the surface it loses all signal value.", "Matches natural hierarchy perception: larger area signals lower priority." ], "whenItBreaks": [ "Monochromatic systems: use lightness variations, not hue shifts.", "Illustration and editorial contexts: different proportions are acceptable." ], "inPractice": [ "White-background app: 60% white, 30% neutral gray for cards, 10% brand blue for buttons and links." ] } }, { "id": "saturation-control", "title": "Saturation Control", "category": "color", "coverImage": "assets/visuals/cover-saturation.svg", "frames": [ { "image": "assets/visuals/colorscale-neutrals.svg", "caption": "Neutrals: 0-25%" }, { "image": "assets/visuals/colorscale-ui.svg", "caption": "UI Elements: 25-60%" }, { "image": "assets/visuals/colorscale-accents.svg", "caption": "CTAs and Signals: 60-100%" } ], "tldr": "0-25% for backgrounds, 25-60% for UI elements, 60-100% for CTAs.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7595594652166802710?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DTiN7GXDeRX/" }, "deepDive": { "rule": [ "Low (0-25%): Backgrounds, body text, layouts. Creates a calm, professional base.", "Medium (25-60%): Buttons, links, cards. Balanced attention without overwhelming.", "High (60-100%): CTAs, errors, warnings. Demands immediate attention." ], "why": [ "Saturation controls attention. Highly saturated colors trigger stronger visual processing.", "High saturation everywhere means everything is equally important, which creates no hierarchy.", "For long-term use like dashboards, low saturation reduces cognitive fatigue." ], "whenItBreaks": [ "Saturated backgrounds on short-session marketing pages can work when used intentionally.", "Saturation alone is never enough for accessibility. WCAG luminance contrast must also pass." ], "inPractice": [ "Saturated accent at 80% orange + desaturated background at 10% gray creates clear focus without visual noise." ], "keyNumbers": [ { "value": "0-25%", "label": "Backgrounds and Neutrals" }, { "value": "25-60%", "label": "UI Elements" }, { "value": "60-100%", "label": "CTAs and Signals" } ] } }, { "id": "greyscale", "title": "Greyscale First", "category": "color", "coverImage": "assets/visuals/cover-greyscale.svg", "frames": [ { "image": "assets/visuals/colorscale-neutrals.svg", "caption": "Greyscale First" }, { "image": "assets/visuals/saturation-sheet.png", "caption": "Saturation Sheet" }, { "image": "assets/visuals/cheatsheet.png", "caption": "Cheatsheet" } ], "tldr": "Structure must work in grey. Color is an enhancement, not a fix.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7589740892349566230", "instagram": "https://www.instagram.com/reel/DS6Q5tWiC6c/" }, "deepDive": { "rule": [ "Design in greyscale first. Hierarchy, contrast, and spacing must work without color.", "Use a 9-step scale (100-900): enough range, not overwhelming.", "Avoid pure grey. Add 2-10% saturation for a warm or cool neutral feel.", "Active Set: use only 4-6 steps per screen, not all 9." ], "why": [ "If the UI breaks in greyscale, the structure is broken. Color does not fix structural problems.", "Over 90% of text is lowercase. Contrast in grey determines readability.", "Darker steps (700-900) need more saturation to appear visually neutral." ], "whenItBreaks": [ "Purely decorative elements like illustrations and heroes operate under different rules.", "Pure grey at 0% saturation looks cold and lifeless. Always add a slight tint." ], "inPractice": [ "Step 1: finish the layout in greyscale. Step 2: apply brand color only to CTAs and accents." ] } }, { "id": "color-scale", "title": "Color Scale", "category": "color", "coverImage": "assets/visuals/cover-color.svg", "frames": [ { "image": "assets/visuals/colorscale-ui.svg", "caption": "Color Scale System" }, { "image": "assets/visuals/colorscale-500-start.svg", "caption": "Start at 500 (Base)" }, { "image": "assets/visuals/colorscale-define-edges.svg", "caption": "Define the Edges" }, { "image": "assets/visuals/colorscale-fill-gaps.svg", "caption": "Fill the Gaps" } ], "tldr": "100-900 scale, start at 500, define edges first, fill the gaps.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7584844219630636310?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DSYeolGiNXL/" }, "deepDive": { "rule": [ "Start at 500 (base color): neither too light nor too dark.", "Define edges: 900 for text (darkest), 100 for backgrounds (lightest).", "Fill the gaps with even steps from 100 to 900 (9 total).", "Use HSL: keep the same hue, adjust lightness and saturation per step." ], "why": [ "Random hex values may look similar but have no system. They are not predictable.", "A systematic scale creates consistent visual rhythm across the entire product.", "Hue must rotate slightly at extreme steps. Pure HSL produces greenish lights and yellowish darks." ], "whenItBreaks": [ "Hue rotation at extreme steps is required. Otherwise light blue shifts toward green.", "Always verify visually with WCAG contrast checks, not just by counting numeric steps." ], "inPractice": [ "100-300: backgrounds. 400-600: buttons and badges. 700-900: text and strong emphasis." ], "keyNumbers": [ { "value": "500", "label": "Base color starting point" }, { "value": "900", "label": "Darkest step (text)" }, { "value": "100", "label": "Lightest step (background)" } ] } }, { "id": "luminance-vs-lightness", "title": "Luminance vs. Lightness", "category": "color", "coverImage": "assets/visuals/cover-luminance-lightness.svg", "frames": [ { "image": "assets/visuals/same-lightness.svg", "caption": "same lightness, different luminance" }, { "image": "assets/visuals/lightness-graph.svg", "caption": "Lightness Graph" }, { "image": "assets/visuals/formula-lightness.svg", "caption": "Lightness Formula" }, { "image": "assets/visuals/luminance-graph.svg", "caption": "Luminance Graph" }, { "image": "assets/visuals/formula-luminance.svg", "caption": "Luminance Formula" }, { "image": "assets/visuals/different-luminance.svg", "caption": "Different Luminance" }, { "image": "assets/visuals/lightness-saturated.svg", "caption": "same calculated lightness, different perceived brightness" } ], "tldr": "HSL-L is not a contrast measure. WCAG uses luminance (Y). Yellow and blue at HSL-L 50% produce a 1.07:1 contrast ratio, which is a FAIL.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7608320055180381462?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DU6hZs7jRA1/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Luminance (Y): physical, linear. Formula: Y = 0.2126R + 0.7152G + 0.0722B.", "Lightness (L*): perceptual, non-linear. Defined by CIELAB 1976.", "HSL-L: a geometric RGB model with no physical basis. It is not a contrast measure.", "WCAG contrast uses Y (luminance), not L* or HSL-L." ], "why": [ "Weber's Law: the eye responds to relative contrast, not absolute brightness values.", "Yellow and blue at HSL-L 50% differ in actual luminance by a factor of 12.8x.", "Green dominates human brightness perception with a coefficient of 0.7152." ], "whenItBreaks": [ "Helmholtz-Kohlrausch effect: saturated colors like blue and magenta appear brighter than their Y value suggests. CIELAB does not model this.", "WCAG is a minimum standard. Perceptual uniformity requires OKLCH or CIECAM." ], "inPractice": [ "Always calculate WCAG contrast using Y. Yellow (#FFFF00) on white = 1.07:1 contrast, a fail despite HSL-L of 50%." ], "keyNumbers": [ { "value": "4.5:1", "label": "WCAG AA minimum (normal text)" }, { "value": "3:1", "label": "WCAG AA (large text and UI components)" } ], "sources": [ { "label": "WCAG 2.2 SC 1.4.3", "year": "2023" }, { "label": "CIE 1976 CIELAB Standard" }, { "label": "IEC 61966-2-1 sRGB", "year": "1999" } ] } }, { "id": "color-temperature-dominance", "title": "Color Temperature Dominance", "category": "color", "coverImage": "assets/visuals/color-temperature-cover.png", "frames": [ { "image": "assets/visuals/color-temperature-depth.png", "caption": "Primitives" }, { "image": "assets/visuals/color-temperature-background.png", "caption": "Primitives" }, { "image": "assets/visuals/color-temperature-above60.png", "caption": "Primitives" }, { "image": "assets/visuals/color-temperature-60-30-10.png", "caption": "Primitives" } ], "tldr": "Avoid equal areas of warm (red, orange, yellow) and cool (blue, green, blue-violet) hues. A balanced 50/50 split forces the viewer’s brain to resolve conflicting depth planes, which can undermine hierarchy, readability, and visual impact.", "videoUrls": { "tiktok": "https://www.instagram.com/reel/DV9TABeCs_A/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==", "instagram": "https://www.instagram.com/reel/DV9TABeCs_A/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "One temperature group must dominate by area.", "Warm hues (red, orange, yellow) signal foreground.", "Cool hues (blue, green, blue-violet) signal background.", "Equal area forces the visual system to assign both functions simultaneously.", "The 60-30-10 heuristic operationalizes this: 60% dominant temperature, 30% secondary, 10% accent.", "It is a design heuristic, not an empirically fixed threshold.", "Consistent with harmony modeling data (Lin et al., 2022)." ], "why": [ "Chromostereopsis: the occipito-parietal cortex processes warm/cool contrast using the same circuits as binocular depth.", "When isoluminant warm and cool areas are equal, neither depth plane resolves.", "This causes perceptual depth competition (Cauquil et al., 2009, N=25; Faubert, 1994).", "Albers (1963) documented that equal-area warm/cool pairings at similar luminance cause edges to oscillate visually.", "This prevents stable fixation.", "Lin et al. (2022, N=84, CIELAB) confirmed: dominance above roughly 60% area correlates with higher harmony ratings.", "Near-equal temperature distribution correlates with perceived dissonance." ], "whenItBreaks": [ "Chromostereopsis is absent or inverted in approximately 10–15% of observers (Simonet & Campbell, 1990).", "The rule describes a statistical majority, not a universal.", "Editorial and poster design sometimes exploits temperature conflict intentionally.", "Visual tension can be an expressive goal rather than a flaw." ], "inPractice": [ "CTA on a product page: warm fill (#E8471A) against a cool neutral canvas (#F0F4F8).", "Warm occupies well above 60% of the viewport.", "The CTA reads as foreground without competing depth cues.", "Equal warm/cool area collapses that hierarchy." ], "keyNumbers": [ { "value": "~60%", "label": "Area share for one temperature group — design heuristic, consistent with Lin et al. (2022)" }, { "value": "10–15%", "label": "Observers for whom chromostereopsis is absent or inverted (Simonet & Campbell, 1990)" } ], "sources": [ { "label": "Cauquil et al. Neural correlates of chromostereopsis. Neuropsychologia", "year": "2009" }, { "label": "Faubert. Seeing depth in colour. Vision Research", "year": "1994" }, { "label": "Albers. Interaction of Color. Yale University Press", "year": "1963" }, { "label": "Itten. The Art of Color", "year": "1961" }, { "label": "Lin et al. Attribute analysis and modeling of color harmony. Frontiers in Psychology", "year": "2022" }, { "label": "Nielsen Norman Group. Using Color to Enhance Your Design", "year": "2024" } ] } }, { "id": "color-psychology", "title": "Color Psychology", "category": "color", "coverImage": "assets/visuals/color-psychology.svg", "frames": [ { "image": "assets/visuals/color-psychology.svg", "caption": "Repetition beats creativity" }, { "image": "assets/visuals/color-meaning-cultural.svg", "caption": "Cultural Meanings" } ], "tldr": "Colors trigger automatic emotional responses. These are culturally shaped, not universal.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7605000518359928086", "instagram": "https://www.instagram.com/reel/DUje_dlDakf/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Red: energy, urgency, danger.", "Red measurably increases heart rate (Elliot et al. 2007).", "Blue: trust, calm, competence.", "Blue dominates finance and tech — 60%+ of Fortune 500 logos.", "Green: growth, success, confirmation.", "Green universally signals positive actions.", "Yellow: optimism, warning.", "Yellow has the highest visibility but lowest luminance contrast.", "Black and white: premium, minimalism.", "Black and white cause no emotional overload." ], "why": [ "The limbic system processes color before conscious analysis.", "Color processing happens in approximately 200ms.", "Evolutionary conditioning: red signals blood and danger.", "Green signals safe vegetation.", "Cultural layering applies: white means purity in the West.", "White signals mourning in parts of Asia." ], "whenItBreaks": [ "Cultural differences matter: green is sacred in Islamic contexts.", "Purple signals mourning in parts of Latin America.", "Color alone does not communicate meaning.", "Color blindness affects 8% of men.", "Purely color-coded signals are inaccessible to color blind users.", "Too many signal colors at once means none of them stand out." ], "inPractice": [ "Red or orange for urgency.", "Blue for trust.", "Green for confirmation.", "Yellow for warnings.", "Never use all four signal colors on one page." ], "sources": [ { "label": "Elliot et al. Color and Psychological Functioning", "year": "2007" }, { "label": "Labrecque and Milne. Exciting Red and Competent Blue", "year": "2012" } ] } }, { "id": "color-naming", "title": "Color Naming", "category": "color", "coverImage": "assets/visuals/cover-naming.svg", "frames": [ { "image": "assets/visuals/primitives.svg", "caption": "Primitives" }, { "image": "assets/visuals/semantics.svg", "caption": "Semantics" }, { "image": "assets/visuals/value-change.svg", "caption": "Primitive Value Change" } ], "tldr": "Primitives store values. Semantics define meaning. Never use raw hex in designs.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7590118285107105046?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DS8PMNeDc9f/" }, "deepDive": { "rule": [ "Primitives (100-900): store values only. Example: Primary/600, Neutral/900.", "Semantics: define meaning. Example: Text/Primary, Background/Page.", "Semantics reference primitives, never hex values directly.", "Format: [Element]/[Purpose]/[State]. Example: Text/Primary/Hover." ], "why": [ "Rebrand: change a primitive once and all semantics update automatically.", "Dark mode: semantics stay the same, they just reference different primitives.", "Using primitives directly in designs breaks dark mode because there is no automatic contrast flip." ], "whenItBreaks": [ "Too many semantic tokens create an unmanageable hierarchy and decision paralysis.", "Naming by color like DarkBlue instead of by function like Text/Primary breaks on rebrand." ], "inPractice": [ "Text/Primary = Neutral/900 in light mode and Neutral/100 in dark mode. One semantic token, two states." ] } }, { "id": "wcag-contrast", "title": "WCAG Contrast Ratio", "category": "color", "coverImage": "assets/visuals/wcag-contrast.svg", "frames": [ { "image": "assets/visuals/wcag-luminanz.png", "caption": "WCAG measures contrast using relative luminance" }, { "image": "assets/visuals/wcag-contrast-formula.png", "caption": "WCAG Contrast Formula" }, { "image": "assets/visuals/wcag-level.png", "caption": "WCAG Levels" }, { "image": "assets/visuals/wcag-level-example.png", "caption": "WCAG Level Example" }, { "image": "assets/visuals/wcag-tools.png", "caption": "Tools" } ], "tldr": "AA requires 4.5:1 for normal text, 3:1 for large text (at least 24px) and UI components. 4.5:1 is the legal floor, not the design target.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7612747532371954967?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVZPniSikfS/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative sRGB luminance and L2 is the darker.", "Range: 1:1 (identical colors) to 21:1 (black on white). No rounding. #767676 on white produces 4.48:1 and fails AA for normal text.", "WCAG 2.2 Level AA: 4.5:1 for normal text. Large text (at least 24px regular or 18.66px bold, derived from WCAG's 18pt / 14pt definition): 3:1.", "SC 1.4.11: 3:1 for UI components, form borders, and informational icons.", "WCAG 2.2 Level AAA: 7:1 for normal text, 4.5:1 for large text. No AAA equivalent exists for non-text contrast.", "Exceptions: decorative elements, inactive UI components, and logotypes carry no contrast requirement. Disabled states that still convey meaningful information are not automatically exempt." ], "why": [ "The formula does not account for font size, stroke weight, or polarity. APCA addresses these limitations but is not normatively binding as of 2026.", "Insufficient contrast increases cognitive load during reading, particularly at small sizes, thin weights, and in peripheral vision.", "Contrast failure is the most common WCAG violation: WebAIM Million 2024 found it on over 80% of tested homepages.", "Approximately 8% of men and 0.4% of women have some form of color vision deficiency.", "Maximum contrast (21:1) is not universally optimal. For some cognitive profiles (e.g. Irlen syndrome), extreme contrast causes visual stress." ], "whenItBreaks": [ "Gradient backgrounds: contrast must be measured at the worst point in the gradient, not averaged. Most automated checks miss this.", "Dark mode: inverting light-mode color pairs 1:1 frequently fails. Both schemes require independent contrast verification.", "APCA is under consideration for WCAG 3 but is not normative for WCAG 2.x. A value passing 2.x can fail APCA. Use APCA additively for insight, not as a compliance substitute." ], "inPractice": [ "Body text: `color: #333333; background: #ffffff;` yields approximately 12.6:1, passing all levels.", "Input borders: #767676 on white yields 4.48:1, passing 3:1 for non-text but failing 4.5:1 for normal-size label text. Use separate color tokens for text and border roles.", "Focus outlines: `outline: 3px solid #0066cc;` yields approximately 7:1 on white and passes AA." ], "keyNumbers": [ { "value": "4.5:1", "label": "WCAG AA minimum contrast for normal text" }, { "value": "3:1", "label": "WCAG AA minimum for large text and UI components" }, { "value": "7:1", "label": "WCAG AAA target for normal text" } ], "sources": [ { "label": "W3C. WCAG 2.2", "year": "2023" }, { "label": "WebAIM. The WebAIM Million", "year": "2024" }, { "label": "Waller. Does the contrast ratio predict legibility of website text", "year": "2022" } ] } }, { "id": "rgb-vs-cmyk", "title": "RGB vs. CMYK", "category": "color", "coverImage": "assets/visuals/rgb-cmyk-cover.svg", "frames": [ { "image": "assets/visuals/rgb-cmyk.png", "caption": "rgb to cmyk conversion" }, { "image": "assets/visuals/rgb.png", "caption": "rgb" }, { "image": "assets/visuals/cmyk.png", "caption": "cmyk" }, { "image": "assets/visuals/rgb-cmyk-gamut.png", "caption": "sRGB vs. CMYK gamut" } ], "tldr": "RGB emits light and adds toward white. CMYK absorbs light and subtracts from white. A significant portion of the sRGB gamut (often estimated around 30-40%) cannot be reproduced in typical CMYK offset profiles such as FOGRA39.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7613807515763019030?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVglxsBiqbW/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "RGB (additive): red, green, and blue light combine toward white. Used on all self-emitting displays.", "CMYK (subtractive): cyan, magenta, yellow, and black inks absorb light from reflected white. Used in offset and digital print.", "The two models have incompatible gamuts. A significant portion of the sRGB gamut (often estimated around 30-40%) cannot be reproduced in typical CMYK offset profiles such as FOGRA39.", "Out-of-gamut colors concentrate in saturated cyans, greens, and blue-violets.", "Without ICC color management, the RIP performs a default device conversion rather than a controlled perceptual gamut mapping.", "CMYK is not a single color space. ISO Coated v2 (FOGRA39), PSO Coated v3 (FOGRA51), and newspaper profiles have entirely different gamuts. Specifying CMYK without a named profile is undefined." ], "why": [ "Displays typically operate between 80-500 cd/m² (HDR specifications allow peaks up to 10,000 cd/m²). Printed surfaces reflect roughly 60-100 cd/m² under ISO 3664 viewing conditions.", "This luminance difference increases perceived brightness and contrast on self-emitting displays (Stevens effect) in a way print cannot replicate (Fairchild 2013).", "Chromatic adaptation of vision at D65 (monitor standard) and D50 (print viewing standard) produces different color perception for physically identical stimuli. No cognitive learning effect compensates (Fairchild 2013, CIECAM02).", "Modern iOS and macOS devices use Display-P3, which covers roughly 25% more color volume than sRGB. Colors vivid on P3 may be entirely outside CMYK gamut.", "Gamut-mapping algorithms (Perceptual, Relative Colorimetric, Saturation) are compromise solutions. No algorithm is optimal for all image types (Morovic 2008)." ], "whenItBreaks": [ "Spot colors (Pantone PMS) exist outside both sRGB and CMYK gamuts. The conversion chain PMS to CMYK to RGB to display is lossy at every step.", "Pantone Color Bridge conversion values are substrate-specific and not normatively guaranteed.", "A valid softproof requires a monitor calibrated for softproofing (D50 simulation, 80-120 cd/m², neutral grey surround per ISO 3664:2009) with Simulate Paper Color and Simulate Black Ink enabled.", "WCAG contrast ratios are defined for digital content using the sRGB luminance formula and do not translate to print output." ], "inPractice": [ "Screen workflow: set document color mode to RGB. Embed ICC profile sRGB IEC61966-2-1.", "Print (coated offset): convert to CMYK with ISO Coated v2 300% (FOGRA39). For coated papers with optical brighteners: use PSO Coated v3 (FOGRA51).", "Export as PDF/X-4 with the profile embedded. Small text under 12pt: use 0/0/0/100 (K-only) to avoid registration errors.", "Visually acceptable tolerance for proof vs. print: ΔE00 ≤ 3.0 (ISO 12647-2:2013; Vik et al. 2017, N=20)." ], "keyNumbers": [ { "value": "~30-40%", "label": "Approximate portion of sRGB colors outside typical CMYK offset gamuts" }, { "value": "ΔE00 ≤ 3.0", "label": "Typical acceptable proof-to-print color tolerance (ISO 12647-2)" }, { "value": "D50 / D65", "label": "Standard whitepoints for print viewing vs display color spaces" } ], "sources": [ { "label": "Morovic. Color Gamut Mapping. Wiley-IS&T", "year": "2008" }, { "label": "Fairchild. Color Appearance Models, 3rd Ed. Wiley-IS&T", "year": "2013" }, { "label": "Hunt and Pointer. Measuring Colour, 4th Ed. Wiley-IS&T", "year": "2011" }, { "label": "ISO 12647-2. Offset lithographic printing", "year": "2013" }, { "label": "ISO 3664. Viewing conditions for graphic technology and photography", "year": "2009" }, { "label": "IEC 61966-2-1. sRGB colour space", "year": "1999" }, { "label": "ICC Profile Specification v4.4", "year": "2022" }, { "label": "Vik, Lund, Nussbaum. Color Research and Application 42(1)", "year": "2017" } ] } } ] }, "typography": { "title": "TYPOGRAPHY", "rules": [ { "id": "line-height", "title": "Line Height", "category": "typography", "coverImage": "assets/visuals/line-height.svg", "frames": [ { "image": "assets/visuals/line-height.svg", "caption": "Line Height Rules" }, { "image": "assets/visuals/line-height-calculation.svg", "caption": "Calculation" } ], "tldr": "Body: 1.5-1.6. Headings: 1.1-1.3. Inverse relationship: larger text needs tighter line height.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7585669280163712278?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DSdb2loDfCN/" }, "deepDive": { "rule": [ "Headings (H1-H3): 1.1-1.3. Less breathing room because visual weight carries the hierarchy.", "Body text (16-18px): 1.5-1.6. WCAG minimum is 1.5.", "Small text (12-14px): 1.5-1.7. More space compensates for the reduced size.", "Inverse relationship: larger text requires tighter line height." ], "why": [ "Browser default of 1.2 is too tight for body text. Lines merge visually.", "Return sweep: eyes need clear vertical separation to land on the next line.", "WCAG SC 1.4.12 requires line height to be scalable to at least 1.5." ], "whenItBreaks": [ "Narrow columns under 40 CPL: 1.3-1.45 is sufficient because fewer return sweeps are needed.", "On mobile, desktop line heights are often too large. Values of 1.4-1.5 are usually better." ], "inPractice": [ "Set line-height as a unitless number like 1.5, not 1.5em. This scales correctly with child elements." ], "keyNumbers": [ { "value": "1.1-1.3", "label": "Headings" }, { "value": "1.5-1.6", "label": "Body text" }, { "value": "1.5", "label": "WCAG minimum" } ] } }, { "id": "line-length", "title": "Line Length", "category": "typography", "coverImage": "assets/visuals/line-length-right.svg", "frames": [ { "image": "assets/visuals/line-length-wrong.svg", "caption": "line length too long" }, { "image": "assets/visuals/line-length-right.svg", "caption": "line length optimal" } ], "tldr": "50-75 CPL for body text. Max 80 CPL per WCAG. Use max-width: 65ch in CSS.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7606406598478564630?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DUtPYGCjdbv/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Optimal: 50-75 characters per line (CPL) for body text.", "Sweet spot: approximately 66 CPL, per Bringhurst (1992) and Baymard (2024).", "WCAG 2.2 SC 1.4.8: max 80 CPL for non-CJK, max 40 CPL for CJK scripts.", "Mobile: 30-50 CPL is typical due to narrower viewports." ], "why": [ "Return sweep: long lines cause the eye to land on the wrong line.", "Too short (under 45 CPL): fragmented meaning, more eye sweeps, slower reading.", "Sentence endings fall into short-term semantic forgetting at over 80 CPL." ], "whenItBreaks": [ "UI microcopy like buttons and navigation: CPL rules do not apply.", "Editorial display text often uses 30-45 CPL intentionally for visual rhythm." ], "inPractice": [ "Apply max-width: 65ch to the article container. It adapts automatically to any font size." ], "keyNumbers": [ { "value": "50-75", "label": "CPL optimal (body)" }, { "value": "66", "label": "CPL sweet spot" }, { "value": "80", "label": "CPL WCAG AAA max" }, { "value": "65ch", "label": "CSS max-width recommendation" } ], "sources": [ { "label": "WCAG 2.2 SC 1.4.8", "year": "2023" }, { "label": "Baymard Institute", "year": "2024" }, { "label": "Bringhurst. The Elements of Typographic Style", "year": "2004" } ] } }, { "id": "x-height", "title": "X-Height", "category": "typography", "coverImage": "assets/visuals/x-height.svg", "frames": [ { "image": "assets/visuals/x-height-comparison.svg", "caption": "X-Height Comparison" } ], "tldr": "X-height determines perceived size. Over 90% of text is lowercase.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7592729990379195670?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DTOWZeljUhF/" }, "deepDive": { "rule": [ "X-height: the distance from baseline to the top of lowercase letters like x, v, w, z.", "Optimal ratio: approximately 50% of cap height for body text.", "Small text under 14px: choose high x-height fonts like Verdana or Arial for better legibility.", "Low x-height fonts like Garamond look elegant but need a larger font size to compensate." ], "why": [ "Over 90% of text is lowercase. X-height determines the perceived size of type.", "Two fonts at the same point size look different in size due to x-height variation.", "Research shows larger x-height produces faster reading at small sizes." ], "whenItBreaks": [ "Very high x-height above 67%: reduces the difference between ascenders and descenders. Letters like h and n become harder to distinguish.", "Pairing fonts with very different x-heights creates visual disharmony." ], "inPractice": [ "In UI at sizes below 14px, use Inter or Verdana (high x-height) instead of Garamond (low). Legibility can improve by up to 2x." ] } }, { "id": "all-caps-fatigue", "title": "All Caps Fatigue", "category": "typography", "coverImage": "assets/visuals/all-caps.svg", "frames": [ { "image": "assets/visuals/all-caps.svg", "caption": "All Caps vs Mixed Case" }, { "image": "assets/visuals/reading-time.svg", "caption": "Reading Time Comparison" } ], "tldr": "All caps is 9.5-19% slower to read (Tinker 1955). It removes word shape recognition.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7592338757697785110", "instagram": "https://www.instagram.com/p/DTLoF7GjT2V/" }, "deepDive": { "rule": [ "All caps reads 9.5-19% slower (Tinker 1955, 20-minute reading study).", "Requires approximately 35% more horizontal space than mixed case.", "No ascenders or descenders means no word shape recognition, forcing letter-by-letter reading.", "Acceptable uses: short labels, tags, logos, and single-line headings only." ], "why": [ "Mixed case creates unique word silhouettes through ascenders like h and d and descenders like g and y.", "All caps gives every word the same uniform height. The brain cannot use word-shape heuristics.", "The result is serial letter processing instead of parallel word recognition." ], "whenItBreaks": [ "Never use all caps for paragraphs, body text, or long passages. Recall is 13% worse.", "Screen readers may spell out ALL CAPS letter by letter as if it were an acronym. Use CSS text-transform: uppercase instead of typing capitals manually." ], "inPractice": [ "Use CSS text-transform: uppercase instead of typing capitals manually. Screen readers will read it as a word, not letter by letter." ], "keyNumbers": [ { "value": "9.5-19%", "label": "Slower reading speed (Tinker 1955)" }, { "value": "35%", "label": "Extra horizontal space required" } ] } }, { "id": "font-pairing", "title": "Font Pairing", "category": "typography", "coverImage": "assets/visuals/cover-fontpairing.svg", "frames": [ { "image": "assets/visuals/font-harmony.svg", "caption": "Font Harmony" }, { "image": "assets/visuals/sans-sansserif.svg", "caption": "Sans vs. Sans Serif" }, { "image": "assets/visuals/sansserif-sansserif.svg", "caption": "Sans Serif vs. Sans Serif" }, { "image": "assets/visuals/display-neutral.svg", "caption": "Display vs. Neutral" }, { "image": "assets/visuals/script-sansserif.svg", "caption": "Script vs. Sans Serif" }, { "image": "assets/visuals/superfamilies.svg", "caption": "Superfamilies" } ], "tldr": "Matching proportions (x-height, stroke) + clear functional contrast (headline vs. body).", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7599774458437504278?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DT_OIgPDMEc/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Serif + sans: the classic pairing. Proportional basis must match.", "Sans + sans: one neutral, one expressive. Without contrast there is no hierarchy.", "Display + neutral: display only for short accents, never for body text.", "Superfamilies like IBM Plex and Source: shared metrics by design, the safest approach." ], "why": [ "Matching x-heights create harmonious running text even when type styles differ.", "Fonts that are too similar produce no hierarchy contrast and look indecisive.", "Fonts that are too different create a visual break and destroy system coherence." ], "whenItBreaks": [ "Very different x-heights create visual chaos when text is set side by side.", "Display fonts in body text destroy readability after about three lines." ], "inPractice": [ "Playfair Display for H1 and H2 paired with Source Sans for body. Similar x-height, clear stylistic contrast." ] } }, { "id": "type-hierarchy", "title": "Type Hierarchy", "category": "typography", "coverImage": "assets/visuals/cover-type-hierarchy.svg", "frames": [ { "image": "assets/visuals/type-hierarchy.svg", "caption": "linear vs. logarithmic" }, { "image": "assets/visuals/type-hierarchy-graph.svg", "caption": "hierarchy graph" }, { "image": "assets/visuals/ratio-scales.svg", "caption": "ratio scales" }, { "image": "assets/visuals/formula-hierarchy.svg", "caption": "formula hierarchy" }, { "image": "assets/visuals/major-third-scale.svg", "caption": "major third scale" }, { "image": "assets/visuals/type-hierarchy-example.svg", "caption": "type hierarchy example" } ], "tldr": "Minimum 1.25x ratio between adjacent heading levels. Body at 16px. H1 at approximately 49px.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7609037820056947990?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DU_f4IeCix7/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Use a modular scale with a constant ratio. Major Third (1.25x) is the web standard.", "16px body scales up: 20, 25, 31, 39, 49px for H1.", "WCAG SC 2.4.6: headings must be sequential. No skipping levels.", "Use rem or clamp(), never px for headings. This allows user scaling." ], "why": [ "Weber's Law: size perception is logarithmic. Adding 2px does not create a category break.", "A ratio of at least 1.20 is required to produce a distinct hierarchy category.", "Two CSS custom properties handle the whole scale: --base: 1rem and --ratio: 1.25." ], "whenItBreaks": [ "On mobile, Major Third (1.25x) is too aggressive. Use Minor Third (1.20x) and limit to 3 heading levels.", "For H5 and H6, differentiate through weight and color, not further size reduction." ], "inPractice": [ "Set --base: 1rem and --ratio: 1.25 as CSS variables. A brand change becomes a single variable edit." ], "keyNumbers": [ { "value": "1.25x", "label": "Major Third (web standard)" }, { "value": "1.20x", "label": "Minor Third (mobile)" }, { "value": "16px", "label": "Body baseline" } ], "sources": [ { "label": "WCAG 2.2 SC 2.4.6 and 1.4.4", "year": "2023" }, { "label": "Material Design 3", "year": "2024" } ] } }, { "id": "text-alignment", "title": "Text Alignment", "category": "typography", "coverImage": "assets/visuals/align-justify.svg", "frames": [ { "image": "assets/visuals/align-justify.svg", "caption": "Justified text" }, { "image": "assets/visuals/justify-gap.svg", "caption": "Excessive word spacing in justified text" }, { "image": "assets/visuals/responsive-justify.svg", "caption": "Justified text in a responsive container" }, { "image": "assets/visuals/align-left.svg", "caption": "Left-aligned text" } ], "tldr": "Left-align body text.\nJustified text can constitute a failure under WCAG SC 1.4.8 (AAA) on the web.\nCentered text: max 1-3 lines. Numbers in tables: right-aligned.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7611204591891270934?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVOiVYpivR6/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Left-align body text in LTR interfaces. Fixed left edge for return sweeps.", "Justified text (text-align: justify) can fail WCAG 2.2 F88 / SC 1.4.8 (AAA) on the web.", "Responsive containers make justified word gaps unpredictable across breakpoints.", "Centered text: max 1–3 lines. Headings, captions, short CTAs only. No multi-line body text.", "Numeric table columns: right-aligned. Enables place-value comparison.", "RTL (Arabic, Hebrew): right-align via dir='rtl' in HTML, not manually in CSS." ], "why": [ "Saccadic return sweeps need a predictable left anchor. Left-alignment provides one on every line.", "Justified text: variable word spacing disrupts reading rhythm, adds no right anchor.", "Ling & van Schaik (2007, n=65): left-alignment produced better accuracy and response time than justified text.", "Same study: participants preferred justified text subjectively. Preference diverges from performance.", "Rivers of white: irregular vertical gaps from stretched word spacing. Worsen above 200% zoom." ], "whenItBreaks": [ "Print with hyphenation: justified acceptable with professional algorithms and fixed column widths. Web lacks this control.", "Centered headlines: legitimate for short display text, up to ~3 lines.", "Numeric data: right-align integers and decimals in table cells. Left-aligning numbers breaks place-value comparison." ], "inPractice": [ "Body: text-align: left. max-width: 80ch.", "WCAG SC 1.4.8: add line-height: 1.5 and margin-bottom: 1.5em alongside alignment.", "Justified print: wrap in @media print, add hyphens: auto. Never apply justify outside that scope.", "Numeric columns: .numeric { text-align: right } on all value cells and headers." ], "keyNumbers": [ { "value": "80ch", "label": "Max line length (WCAG SC 1.4.8)" }, { "value": "1.5", "label": "Min line-height for body text (WCAG AAA)" }, { "value": "1–3 lines", "label": "Max length for centered text (WCAG Low Vision)" } ], "sources": [ { "label": "WCAG 2.2 SC 1.4.8, Failure F88", "year": "2023" }, { "label": "Ling and van Schaik. Displays Journal", "year": "2007" }, { "label": "W3C Low Vision Accessibility Task Force — Text Justification", "year": "2023" } ] } }, { "id": "typeface-vs-font", "title": "Typeface vs. Font", "category": "typography", "coverImage": "assets/visuals/cover-typeface.svg", "frames": [ { "image": "assets/visuals/typeface.svg", "caption": "Typeface" }, { "image": "assets/visuals/font.svg", "caption": "Font" }, { "image": "assets/visuals/font-family.svg", "caption": "Font family" }, { "image": "assets/visuals/font-files.svg", "caption": "Font files" } ], "tldr": "A typeface is the design system (e.g. Helvetica). A font is one fully parametrized instance within it (e.g. Helvetica Neue Bold 700). CSS font-family matches a family name registered in @font-face, which typically maps to one typeface. Two properties, two levels of the hierarchy.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7611659784151960855?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVRr80kCkYA/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Typeface: visual design system — stroke character, proportions, axis, serif treatment. Font: one parametrized instance — axis values, metrics, glyph set, feature tables.", "Hierarchical: one typeface contains one or more fonts. One font implements exactly one design system. Exception: superfamilies (serif + sans, shared brand) can form one extended typeface system.", "CSS font-family: string-matching against @font-face family name. Typically 1:1 with a typeface. font-weight, font-style, font-stretch select the instance via the font-matching algorithm.", "Fallback stack: comma-separated, resolved left to right. Generic keywords (sans-serif, serif, monospace) are classification categories, not typefaces. No design system, no defined metrics, no glyph guarantees.", "Variable Fonts (OpenType 1.8, 2016): one file, full design continuum across 5 registered axes (wght, wdth, ital, slnt, opsz) plus unlimited custom axes. One file contains many instances. Instance is not identical to file." ], "why": [ "Conflation originates from Apple and Microsoft 1980s DTP APIs. font-family named for end-users, not typographers. W3C preserved the naming in CSS Fonts Level 4 and Level 5.", "Consumer UIs (Word, Photoshop, Canva) label typeface pickers 'Font'. A brief specifying only a typeface name leaves the font instance undefined across potentially dozens of cuts.", "Optical sizing predates Variable Fonts. Classical families had distinct cuts per size range (caption, text, display). Variable Fonts formalize this as the opsz axis.", "Consistent font parameters within one typeface argued to reduce extraneous cognitive load (Sweller, 1988). Theoretical transfer, not a direct typographic research finding." ], "whenItBreaks": [ "Variable Fonts: no discrete cuts, only continuous axis ranges. One file, many instances plus full interpolation space. Conceptual hierarchy holds, file boundaries no longer map onto it.", "No explicit Bold or Italic file: font-matching falls back to nearest weight, then synthesizes via stroke thickening or slanting. Synthesis is inferior, differs from drawn italics at glyph level. Every font-family + font-weight + font-style needs a corresponding @font-face declaration.", "Superfamilies (grotesque + slab-serif as one system): distinct design systems under one brand. One typeface or two is a foundry decision, not a technical fact." ], "inPractice": [ "Variable Font: one @font-face block, font-weight: 100 900. Body: 400. Headings: 700. font-optical-sizing: auto. Fallback: 'Inter Variable', system-ui, sans-serif. Tabular data: font-variant-numeric: tabular-nums. Legacy: @supports not (font-variation-settings: normal). Check axis availability before font-variation-settings — missing axis fails silently." ], "keyNumbers": [ { "value": "5", "label": "Registered OpenType axes: wght, wdth, ital, slnt, opsz" }, { "value": "unlimited", "label": "Custom axes per OpenType 1.8 spec" }, { "value": "88%", "label": "File size reduction: 48 static files vs. 1 Variable Font (Monotype, web.dev)" }, { "value": "> 94%", "label": "Global browser support for Variable Fonts (Can I Use, 2026)" }, { "value": "3", "label": "Min weight variants for Variable Font to outperform static files on transfer size" }, { "value": "100–900", "label": "font-weight in CSS; 1–1000 per OpenType spec" }, { "value": "50%–200%", "label": "font-stretch per CSS Fonts Level 4; wdth axis 100 = normal" } ], "sources": [ { "label": "OpenType 1.8 Specification. Microsoft, Adobe, Google, Apple", "year": "2016" }, { "label": "W3C. CSS Fonts Module Level 4", "year": "2021" }, { "label": "W3C. CSS Fonts Module Level 5 (Working Draft)", "year": "2026" }, { "label": "ISO/IEC 14496-22. Open Font Format", "year": "2019" }, { "label": "McNeil, P. The Visual History of Type. Laurence King Publishing", "year": "2017" }, { "label": "TypeType Type Foundry. Typeface vs Font", "year": "2025" }, { "label": "Sweller, J. Cognitive Load During Problem Solving", "year": "1988" } ] } } ] }, "spacing": { "title": "SPACING", "rules": [ { "id": "8pt-grid", "title": "8pt Grid System", "category": "spacing", "coverImage": "assets/visuals/8pt-system.svg", "frames": [ { "image": "assets/visuals/8pt-system.svg", "caption": "8pt Grid" }, { "image": "assets/visuals/8pt-example.svg", "caption": "Example Usage" } ], "tldr": "Spacing in multiples of 8: 8, 16, 24, 32, 40, 48. Pixel-perfect on all display densities.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7596838167811067158?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DTq2LqNjdSJ/" }, "deepDive": { "rule": [ "Apply spacing in multiples of 8: 8, 16, 24, 32, 40, 48, 56, 64.", "Use on margins, padding, component heights, and widths.", "Use 4pt as a half-step for icons, small gaps, and fine adjustments.", "Font sizes do not need to be multiples of 8." ], "why": [ "Retina scaling: 8px at @2x becomes 16px, at @3x becomes 24px. Always a whole number.", "Produces visually distinct spacing without too many variables compared to 4pt or 6pt bases.", "Most screen resolutions are divisible by 4 or 8." ], "whenItBreaks": [ "Line heights should be multiples of 4, not 8. Incrementing by 8 produces spacing that is too wide.", "Not a rigid rule. A 6px border-radius is fine. The system is a scale, not a prison." ], "inPractice": [ "15px font size with 24px line height (a multiple of 4) is a correct combination." ], "keyNumbers": [ { "value": "8px", "label": "Base unit" }, { "value": "4px", "label": "Half-step for icons and fine adjustments" } ] } }, { "id": "4pt-system", "title": "4pt System", "category": "spacing", "coverImage": "assets/visuals/4pt-system.svg", "frames": [ { "image": "assets/visuals/4pt-system.svg", "caption": "4pt System" } ], "tldr": "Half-step of the 8pt grid. For typography and icons. Not a replacement for 8pt.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7596838167811067158?is_from_webapp=1&sender_device=pc&web_id=7517983817683764759", "instagram": "https://www.instagram.com/p/DTq2LqNjdSJ/" }, "deepDive": { "rule": [ "4pt half-steps: 4, 8, 12, 16, 20, 24. Complements 8pt, does not replace it.", "Use for typography line heights, icon padding, and dense interfaces.", "8pt handles component sizing and margins between major elements.", "4pt handles line heights, icon gaps, and secondary text spacing." ], "why": [ "Line height in 8pt increments is often too wide. 4pt gives more options: 20, 24, 28px.", "Material Design uses 8pt for elements and a 4pt baseline for typography.", "Finer control without introducing too many variables." ], "whenItBreaks": [ "Using 4pt everywhere introduces too many variables and defeats the purpose of the system.", "Odd numbers like 5, 7, and 9 produce sub-pixel blur at 1.5x display scaling." ], "inPractice": [ "15px font size, 24px line height (4pt multiple), 8px icon gap (4pt), 16px padding (8pt)." ] } }, { "id": "proximity", "title": "Proximity", "category": "spacing", "coverImage": "assets/visuals/proximity-bind-content.svg", "frames": [ { "image": "assets/visuals/proximity-bind-content.svg", "caption": "Binds Content" }, { "image": "assets/visuals/proximity-bind.svg", "caption": "Proximity Bind" }, { "image": "assets/visuals/proximity-no-hierachy.svg", "caption": "No Hierarchy" }, { "image": "assets/visuals/proximity-hierachy.svg", "caption": "Clear Hierarchy" } ], "tldr": "Closeness signals relationship. Equal spacing everywhere means no hierarchy.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7593032381389376790", "instagram": "https://www.instagram.com/p/DTQcm3EDUSP/" }, "deepDive": { "rule": [ "Related elements: 4-8px. Use between labels and inputs, icons and text.", "Elements within a section: 16-24px.", "Separate sections: 32-48px or more.", "Proximity overrides similarity. It is stronger than color, shape, or size." ], "why": [ "The brain groups elements automatically before conscious analysis begins.", "Equal spacing everywhere flattens the hierarchy and eliminates scan paths.", "Whitespace is not empty space. It is a grouping tool." ], "whenItBreaks": [ "Labels more than 16px from their input appear disconnected and visually misattributed.", "Sections closer than 24px apart look like a single undivided block." ], "inPractice": [ "Squint test: blur your eyes at the design. Groups should be immediately obvious." ], "keyNumbers": [ { "value": "4-8px", "label": "Related elements" }, { "value": "16-24px", "label": "Within a section" }, { "value": "32-48px", "label": "Between sections" } ] } }, { "id": "column-grid", "title": "Column Grid", "category": "spacing", "coverImage": "assets/visuals/column-grid.svg", "frames": [ { "image": "assets/visuals/column-grid.svg", "caption": "12-Column Grid" } ], "tldr": "12 columns (divisible by 2, 3, 4, 6). 24px gutters on desktop, 16px on mobile.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446", "instagram": "https://www.instagram.com/p/DSm--D1DWfo/" }, "deepDive": { "rule": [ "12-column standard: divisible by 2, 3, 4, and 6 for maximum layout flexibility.", "Gutters: 16px mobile, 20-32px desktop.", "Container max-width: approximately 1200px (Bootstrap) or 1600px for larger designs.", "Responsive breakpoints: 12 col, 8 col, 4 col, 1 col." ], "why": [ "12 columns support layouts of 4-4-4, 3-3-3-3, 6-6, 3-6-3, and 2-8-2 without fractions.", "It is the framework standard in Bootstrap and Material Design, reducing developer friction.", "Columns control width only. Content flows vertically." ], "whenItBreaks": [ "Using all 12 columns for a single content block produces text lines over 80 CPL, which is unreadable.", "Ignoring max-width causes text to spread endlessly on ultra-wide screens." ], "inPractice": [ "A text block spanning 8 of 12 columns (66%) produces approximately 65 CPL on desktop. Optimal for reading." ] } }, { "id": "modular-grid", "title": "Modular Grid", "category": "spacing", "coverImage": "assets/visuals/modular-grid.svg", "frames": [ { "image": "assets/visuals/modular-grid.svg", "caption": "Modular Grid" } ], "tldr": "Columns + rows create a matrix. Best for dashboards, editorials, and product grids.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446", "instagram": "https://www.instagram.com/p/DSm--D1DWfo/" }, "deepDive": { "rule": [ "Columns + rows form a module matrix. Each module can hold content or combine with adjacent modules.", "Gutters between modules: typically 16-24px.", "Best suited for dashboards, editorial layouts, and e-commerce product grids." ], "why": [ "Provides simultaneous vertical and horizontal control.", "Equal-sized modules make intentional rule-breaking easier to execute." ], "whenItBreaks": [ "In web and mobile contexts, strict row heights are rarely needed. A column grid is often sufficient.", "Modules that are too small produce decision paralysis from too many placement options." ], "inPractice": [ "Dashboard with a 4x4 module grid: 1 module for a small KPI card, 2x2 for a chart, 4x2 for a data table." ] } }, { "id": "baseline-grid", "title": "Baseline Grid", "category": "spacing", "coverImage": "assets/visuals/baseline-grid.svg", "frames": [ { "image": "assets/visuals/baseline-grid.svg", "caption": "Baseline Grid" } ], "tldr": "4px base for typographic rhythm. Line heights must be multiples of 4.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7587058135047687446", "instagram": "https://www.instagram.com/p/DSm--D1DWfo/" }, "deepDive": { "rule": [ "Horizontal lines in a 4px grid. All text baselines sit on a grid line.", "Line heights must be multiples of 4: 16, 20, 24, 28, 32px.", "Combine 8pt UI grid with 4pt baseline grid. This is the Material Design standard." ], "why": [ "An 8px baseline is too wide for typography. The 4pt baseline gives better options.", "Material Design uses a 4pt baseline specifically for typography.", "The most comfortable line heights (20, 24, 28px) are all multiples of 4." ], "whenItBreaks": [ "Font sizes do not need to be multiples of 4. Only line heights do.", "Pixel-perfect baseline alignment across browsers is difficult in responsive web contexts." ], "inPractice": [ "16px font size + 24px line height (a multiple of 4) is a correct and comfortable combination." ] } } ] }, "shadows": { "title": "SHADOWS AND DEPTH", "rules": [ { "id": "shadow-fundamentals", "title": "Shadow Fundamentals", "category": "shadows", "coverImage": "assets/visuals/raised-light-direction.svg", "frames": [ { "image": "assets/visuals/button-raised.svg", "caption": "Light From Above" }, { "image": "assets/visuals/raised-light-direction.svg", "caption": "Light Direction" }, { "image": "assets/visuals/shadow-edge-depth.svg", "caption": "Edge-Based Depth" } ], "tldr": "Single light source from above. Shadows always point down. Depth starts with edges, not shadows.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7597574236005289238", "instagram": "https://www.instagram.com/p/DTv9DGRjafS/" }, "deepDive": { "rule": [ "UI simulates a single light source from above, like daylight or overhead lighting.", "Shadows always point downward. Never upward.", "Top edges are lighter (facing the light). Bottom edges are darker (facing away).", "Depth through edge contrast comes first. Shadows reinforce depth, they do not compensate for its absence." ], "why": [ "Matches evolutionarily ingrained depth perception from sunlight above.", "Inconsistent light direction causes an immediate break in perceived realism.", "Edge contrast alone allows the brain to infer spatial position without shadows." ], "whenItBreaks": [ "Multiple light sources produce inconsistent depth cues and visual chaos.", "Using shadows to hide poor geometry does not work. Fix the shape first." ], "inPractice": [ "Never use pure black. Use rgba(0,0,0,0.1-0.3) so shadows blend into the background color." ] } }, { "id": "elevation-system", "title": "Elevation System", "category": "shadows", "coverImage": "assets/visuals/cover-elevation-system.svg", "frames": [ { "image": "assets/visuals/elevation-front-side.svg", "caption": "Front vs. Side View" }, { "image": "assets/visuals/elevation-usage.svg", "caption": "Elevation Usage" }, { "image": "assets/visuals/elevation-twolayer.png", "caption": "Two-Shadow Technique" } ], "tldr": "5-7 elevation levels. Higher elevation means larger blur and offset. Use tokens.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7598230800563211542", "instagram": "https://www.instagram.com/p/DT0gnIsjSnp/" }, "deepDive": { "rule": [ "Define a maximum of 5-6 levels. Material Design uses: 0, 1, 2, 4, 6, 8, 16, 24dp.", "Level 0-1: buttons and cards. Small blur, subtle offset.", "Level 2-3: dropdowns and menus. Moderate blur and offset.", "Level 4-5: modals and dialogs. Large blur and offset." ], "why": [ "Higher elevation means the shadow is farther from the object, making it larger, softer, and lighter.", "Too many levels cause decision paralysis and inconsistent application across the product.", "Consistency matters more than realism. Apply the same levels everywhere." ], "whenItBreaks": [ "Pure black shadows are too harsh. Always use rgba(0,0,0,0.1-0.3).", "Shadows on colored backgrounds must be tinted to match the background hue." ], "inPractice": [ "Use tokens: shadow/low, shadow/medium, shadow/high. Never hardcode CSS shadow values inside components." ] } }, { "id": "raised-vs-inset", "title": "Raised vs. Inset", "category": "shadows", "coverImage": "assets/visuals/raised-inset.svg", "frames": [ { "image": "assets/visuals/button-states.svg", "caption": "Button States" }, { "image": "assets/visuals/button-flat.svg", "caption": "Flat" }, { "image": "assets/visuals/flat-light-angle.svg", "caption": "Flat Light Direction" }, { "image": "assets/visuals/button-raised.svg", "caption": "Raised" }, { "image": "assets/visuals/raised-light-direction.svg", "caption": "Raised Light Direction" }, { "image": "assets/visuals/button-inset.svg", "caption": "Inset" }, { "image": "assets/visuals/inset-light-angle.svg", "caption": "Inset Light Direction" } ], "tldr": "Raised: shadow below + light top edge. Inset: shadow above + dark top edge.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7598687398247009558", "instagram": "https://www.instagram.com/p/DT3rY5ajS4U/" }, "deepDive": { "rule": [ "Raised (buttons): drop shadow below + light top edge using inset 0 1px rgba(255,255,255,0.2).", "Inset (inputs, wells): shadow above using inset 0 1px 2px rgba(0,0,0,0.3) + light bottom edge.", "Pressed state: remove the drop shadow and add a darker inset shadow.", "Hover state: increase shadow size and blur to simulate the element lifting." ], "why": [ "Raised: the element sits above the surface. Light hits the top edge, shadow falls below.", "Inset: the element is recessed. The upper lip blocks light, so the shadow appears at the top.", "Interaction is Z-axis movement, not decoration." ], "whenItBreaks": [ "Inconsistent light direction between raised and inset elements breaks perceived realism.", "Excessive realism creates visual noise. Clarity always outweighs physical accuracy." ], "inPractice": [ "Button active state: transform: translateY(1px) combined with a reduced shadow simulates a physical press." ] } } ] }, "ux-laws": { "title": "UX LAWS", "rules": [ { "id": "millers-law", "title": "Miller's Law", "category": "ux-laws", "coverImage": "assets/visuals/cover-millers-law.svg", "frames": [ { "image": "assets/visuals/millers-law-wrong.png", "caption": "Too Many Items" }, { "image": "assets/visuals/millers-law-right.png", "caption": "Chunking Strategy" } ], "tldr": "7 +/- 2 chunks in working memory. Modern estimate is around 4 (Cowan 2001). Structure beats count.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7591270763643063574", "instagram": "https://www.instagram.com/p/DTENv8nDVxp/" }, "deepDive": { "rule": [ "The average person holds approximately 7 +/- 2 chunks in working memory (Miller 1956).", "Modern research suggests closer to 4 distinct items (Cowan 2001).", "Chunking: group related items into meaningful units to reduce load.", "Applies only to short-term memory. Fades in 20-30 seconds without rehearsal." ], "why": [ "What counts as a chunk depends on expertise. FBI is 1 chunk for an agent, 3 letters for everyone else.", "10 well-structured items beat 5 chaotic ones. Structure beats count.", "(555) 123-4567 is 3 chunks. 5551234567 is 10 digits." ], "whenItBreaks": [ "There is no hard limit. 'Must have exactly 7 items' is a misreading. Miller himself said the number was coincidental.", "Familiar stimuli: experts process more than 7 items comfortably." ], "inPractice": [ "Navigation: 5-7 top-level items, dropdowns for the rest. Forms: group into sections like Personal, Address, Payment." ], "keyNumbers": [ { "value": "7 +/- 2", "label": "Miller 1956. Working memory chunks" }, { "value": "~4", "label": "Cowan 2001. Updated estimate" } ] } }, { "id": "hicks-law", "title": "Hick's Law", "category": "ux-laws", "coverImage": "assets/visuals/hicks-law.png", "frames": [ { "image": "assets/visuals/hicks-law.png", "caption": "Decision Time vs. Number of Options" } ], "tldr": "Decision time increases logarithmically with options: RT = a + b x log2(n).", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7586812915014012182", "instagram": "https://www.instagram.com/p/DSlSHpzjT6j/" }, "deepDive": { "rule": [ "RT = a + b x log2(n). Doubling the options adds a constant amount of time, not double.", "Going from 2 to 4 options adds the same time as going from 4 to 8.", "Applies only when all options are equally probable and the user does not yet know their goal." ], "why": [ "More options require more cognitive processing capacity, which slows the decision.", "Critical for short lists like navigation and action buttons. Less relevant for long searchable lists like contacts." ], "whenItBreaks": [ "Alphabetical lists: the user knows the target, so Hick's Law does not apply.", "Familiar stimuli: well-known options do not increase decision time." ], "inPractice": [ "Checkout: a single CTA instead of five payment option buttons on the main page. Use progressive disclosure for the rest." ], "sources": [ { "label": "Hick (1952) and Hyman (1953)", "year": "1952-1953" } ] } }, { "id": "jakobs-law", "title": "Jakob's Law", "category": "ux-laws", "coverImage": "assets/visuals/jakobs-law.svg", "frames": [ { "image": "assets/visuals/jakobs-law.svg", "caption": "Expectation Transfer" }, { "image": "assets/visuals/millers-law-right.png", "caption": "Using Familiar Patterns" } ], "tldr": "Users spend most of their time on other sites. They expect yours to work the same way.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7588649092583099671", "instagram": "https://www.instagram.com/p/DSyBpx9jeCH/" }, "deepDive": { "rule": [ "Users transfer expectations from familiar sites onto new ones.", "Standard patterns: logo top-left, navigation top or side, cart top-right.", "Deviating from conventions creates a learning curve and increases cognitive load." ], "why": [ "Conventional design produces approximately 20-30% higher user retention.", "A design that is 10% better can still fail if it causes 20% more frustration during the learning phase.", "Users abandon sites that work differently than they expect." ], "whenItBreaks": [ "Only innovate when the improvement is substantial, not just 10%, and only after the new pattern becomes an established standard.", "Always check platform conventions. iOS and Android guidelines override general web patterns." ], "inPractice": [ "E-commerce: cart always top-right, checkout button always on the right. Do not get creative with placement." ], "sources": [ { "label": "Nielsen Norman Group", "year": "2000" } ] } }, { "id": "center-bias", "title": "Center Bias", "category": "ux-laws", "coverImage": "assets/visuals/cover-center-bias.svg", "frames": [ { "image": "assets/visuals/center-eyetracker.png", "caption": "Eyetracker Heatmap" }, { "image": "assets/visuals/center-bias-wrong.svg", "caption": "Wrong Example" }, { "image": "assets/visuals/center-bias-right.svg", "caption": "Right Example" } ], "tldr": "Attention gravitates toward the center. The optical center sits approximately 10% above the geometric center.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7605322323612290326?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DUlt_3gDV9X/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Users fixate on the center of the screen first, especially on the initial scan.", "Optical center: approximately 10% above the geometric midpoint.", "F-pattern for text-heavy pages. Z-pattern for simple visual pages. Center-first for landing pages." ], "why": [ "Eye-tracking shows first fixation lands at approximately 50-60% of page width and 40% of page height.", "Evolutionary tendency: the center of the visual field has the highest cone density (fovea).", "The geometric center looks visually low. A slight upward offset is needed to appear balanced." ], "whenItBreaks": [ "Text-dense interfaces: F-pattern dominates and center-bias weakens.", "On mobile: center-bias is stronger due to the narrower visual field." ], "inPractice": [ "Primary CTA: position vertically at 45-48% instead of 50%. It reads as better balanced." ], "keyNumbers": [ { "value": "~10%", "label": "Optical center above geometric center" } ] } }, { "id": "banner-blindness", "title": "Banner Blindness", "category": "ux-laws", "coverImage": "assets/visuals/banner-scan-pattern.svg", "frames": [ { "image": "assets/visuals/banner-scan-pattern.svg", "caption": "scan pattern" }, { "image": "assets/visuals/banner-ignore.svg", "caption": "ignored banner" }, { "image": "assets/visuals/banner-integrate.svg", "caption": "integrated banner" }, { "image": "assets/visuals/banner-match-design.svg", "caption": "matching design banner" } ], "tldr": "Users ignore anything that looks like an ad, regardless of actual content.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7606070598590106902?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DUq6b_ADWMz/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Users ignore elements that look like ads: rectangles at the top or right, flashing or colorful boxes.", "This also applies to genuine UI elements that have ad-like aesthetics.", "Notification banners, hero rotators, and ribbons are heavily affected by banner blindness." ], "why": [ "Cognitive filtering: web experience trains the brain to ignore ad patterns.", "Eye-tracking consistently shows the right column and top horizontal bars are systematically skipped.", "Conditioned suppression is involuntary and cannot be overridden by the user." ], "whenItBreaks": [ "Empty pages with no surrounding context: banner-like elements receive more attention.", "First session: new users show significantly less banner blindness." ], "inPractice": [ "Critical notices like cookie consent: place them in flowing UI elements, not classic banner styles. Avoid rectangles in top-left or top-right for important information." ], "sources": [ { "label": "Benway and Lane. Banner Blindness", "year": "1998" }, { "label": "Nielsen Norman Group Eye-Tracking Studies", "year": "2010" } ] } }, { "id": "inattentional-blindness", "title": "Inattentional Blindness", "category": "ux-laws", "coverImage": "assets/visuals/inattentional-blindness-cover.png", "frames": [ { "image": "assets/visuals/inattentional-blindness-funnel.png", "caption": "perception is filtered" }, { "image": "assets/visuals/inattentional-blindness-graph.png", "caption": "feature matches increase the odds" }, { "image": "assets/visuals/inattentional-blindness-visual.png", "caption": "proximity to focus" } ], "tldr": "46-56% of observers miss a fully visible, salient object when engaged in a demanding primary task. Feature-match to the primary task raises detection odds by 5x.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7613432532129860886?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVd_sDyCqck/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Inattentional Blindness (IB) is the complete failure to consciously perceive a fully visible object when attention is directed elsewhere. No visual impairment is involved.", "IB is distinct from Change Blindness (requires a scene interruption) and Attentional Blink (a 200-500ms temporal gap after a first target).", "The effect is situational, not a stable individual trait. Cognitive ability and personality scores do not reliably predict who will miss an unexpected object (Simons, Hults, Ding, 2024, 74 samples, 38 studies)." ], "why": [ "Attention-Set theory: the visual system filters inputs by the current task's feature set. Feature-match odds ratio: 5.02 (Bredemeier and Simons, Psychological Bulletin, 2022).", "Perceptual Load theory: a high-load primary task exhausts perceptual capacity, leaving none for unexpected stimuli.", "Expert miss rates are not reliably lower than novice rates. A meta-analysis of 14 studies (N=1,153) found an expert-vs-novice odds ratio of 1.33, not statistically significant (Ekelund et al., 2022).", "Expert radiologists missed a gorilla 48x the size of a target nodule in 83% of cases, most having fixated its location (Drew et al., 2013).", "Under forced-choice conditions, observers who report missing an object still score above chance for its location, color, and shape. Perception is gradual, not binary (Feldman et al., eLife, 2025, reviewed preprint)." ], "whenItBreaks": [ "Salience alone does not prevent IB. In Most et al. (2001), approximately 30% missed a bright red cross that was the only colored element on screen. High contrast is necessary but not sufficient.", "Laboratory evidence (basketball-counting videos, CT-scan tasks) does not map directly onto web UI contexts. No peer-reviewed study has measured IB rates for specific UI layout patterns under real task conditions." ], "inPractice": [ "Encode critical alerts using features that match the primary task. If active form fields use a blue border, inline validation errors at the field are more likely to be noticed than a red toast in a corner.", "For system-critical state changes (connection loss, session timeout), place the alert inline rather than relying on a peripheral status bar alone. Add an assertive aria-live region: `
Session expiring. Save your work.
`" ], "keyNumbers": [ { "value": "46-56%", "label": "Observers missing a visible object during demanding tasks" }, { "value": "5x", "label": "Higher detection odds when the unexpected object matches task features" }, { "value": "83%", "label": "Radiologists missing a large unexpected object in CT scans" } ], "sources": [ { "label": "Simons and Chabris. Perception 28(9)", "year": "1999" }, { "label": "Drew, Vo, Wolfe. Psychological Science 24(9)", "year": "2013" }, { "label": "Bredemeier and Simons. Psychological Bulletin 148(5-6)", "year": "2022" }, { "label": "Ekelund et al. Perception 51(2)", "year": "2022" }, { "label": "Simons, Hults, Ding. Psychonomic Bulletin and Review 31(4)", "year": "2024" } ] } }, { "id": "default-effect", "title": "Default Effect", "category": "ux-laws", "coverImage": "assets/visuals/pre-selection-skip.png", "frames": [ { "image": "assets/visuals/pre-selection-not-intentional.png", "caption": "Pre-selection is not a signal of intent" }, { "image": "assets/visuals/pre-selection-uncheck.png", "caption": "Defaults follow the path of least resistance" }, { "image": "assets/visuals/pre-selection-skip.png", "caption": "defaults inflate passive acceptance" } ], "tldr": "Users tend to keep pre-selected options (d = 0.68, 58 studies, 73,675 participants). This status-quo bias, which makes defaults effective nudges, also renders pre-checked consent checkboxes legally invalid under GDPR.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7617944669833465110?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVtihFXCrK1/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Users retain a pre-set option at a rate significantly above chance.", "Meta-analytic effect size: d = 0.68 (95% CI [0.53–0.83]).", "Based on Jachimowicz et al., 2019 — k=58 studies, N=73,675 participants.", "The effect is strongest when users have no clear prior preference.", "Three separable mechanisms drive retention.", "First: physical effort of the opt-out action.", "Second: cognitive effort when no preference exists.", "Third: implied endorsement — the user interprets the default as the system's recommended choice (Dinner et al., 2011).", "All three mechanisms are additive.", "Pre-checked consent checkboxes for cookies, data sharing, and marketing opt-ins are legally void under GDPR Recital 32.", "Confirmed by CJEU Planet49 (C-673/17, 2019).", "The element is structurally identical to a legitimate nudge.", "Legal status depends on context, not visual form." ], "why": [ "Status quo bias: deviation from the current state is coded as a potential loss (Samuelson & Zeckhauser, 1988).", "Defaults create the status quo by design.", "This activates loss aversion before any active choice is made.", "Organ donation provides the largest real-world signal.", "Opt-out countries show at least 60 percentage points higher donation rates than opt-in countries.", "Controlling for infrastructure and public education (Johnson & Goldstein, 2003, Science; 11 European countries)." ], "whenItBreaks": [ "Reactance occurs when users recognize the default as serving the provider rather than themselves.", "Approximately 15% of studies in Jachimowicz et al. (2019) found null or negative effects.", "Null effects occurred most often in high-involvement decisions with strong prior preferences.", "Publication bias inflates reported effect sizes.", "Mertens et al. (2022, PNAS; N=2,148,439) estimate the bias-adjusted true effect at d = 0.08–0.31.", "The widely cited figure of 85% retention has no primary source.", "It is not a valid benchmark." ], "inPractice": [ "SaaS onboarding: notifications default to OFF.", "Billing interval defaults to monthly only if usage data confirms it as modal.", "Minimum N=100 required before setting a data-driven default.", "Every consent checkbox ships unchecked.", "The data source and date for each default are documented in the design system." ], "keyNumbers": [ { "value": "d = 0.68", "label": "Meta-analytic effect size, 95% CI [0.53–0.83] (Jachimowicz et al., 2019; k=58; N=73,675)" }, { "value": "≥60pp", "label": "Donation rate gap, opt-out vs. opt-in countries (Johnson & Goldstein, 2003)" }, { "value": "d = 0.08–0.31", "label": "Bias-adjusted effect size estimate (Mertens et al., 2022)" } ], "sources": [ { "label": "Jachimowicz, Duncan, Weber & Johnson. Behavioural Public Policy", "year": "2019" }, { "label": "Madrian & Shea. The Quarterly Journal of Economics", "year": "2001" }, { "label": "Johnson & Goldstein. Science", "year": "2003" }, { "label": "Dinner, Johnson, Goldstein & Liu. Journal of Experimental Psychology: Applied", "year": "2011" }, { "label": "Mertens et al. PNAS", "year": "2022" }, { "label": "GDPR (EU) 2016/679, Recital 32 and Art. 4(11)", "year": "2016" }, { "label": "CJEU C-673/17. Planet49 GmbH", "year": "2019" } ] } } ] }, "interaction": { "title": "INTERACTION", "rules": [ { "id": "touch-target", "title": "Touch Target Size", "category": "interaction", "coverImage": "assets/visuals/cover-touch-target.svg", "frames": [ { "image": "assets/visuals/cover-touch-target.svg", "caption": "Target Sizes" } ], "tldr": "WCAG 2.2 AA minimum: 24×24px. Recommended: 44×44px (Apple/WCAG AAA) or 48×48dp (Material). 8px spacing between targets.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7591690656339201302", "instagram": "https://www.instagram.com/p/DTHIOQLCM3W/" }, "deepDive": { "rule": [ "WCAG 2.2 AA (SC 2.5.8): 24×24px minimum — or 24px of spacing around it if the target is smaller.", "WCAG 2.2 AAA (SC 2.5.5): 44×44px. This is the enhanced standard, same as Apple HIG.", "Material Design (Android): 48×48dp minimum — not 44. iOS: 44×44pt minimum.", "Minimum 8px spacing between adjacent targets per WCAG. Spacing can substitute for size.", "Padding counts as target area. A 24px icon with 10px padding on all sides = 44px hit zone." ], "why": [ "Average finger pad: 10-14mm, approximately 28-40px at standard DPI.", "Targets below 44px have a 3x higher error rate.", "Touch precision decreases approximately 15% per decade after age 40." ], "whenItBreaks": [ "Driving and motion contexts: 76x76dp minimum per Google Design for Driving.", "The Instagram like button works at a small size because of its large surrounding spacing buffer, not its pixel dimensions." ], "inPractice": [ "Icon button: 24px icon with 10px padding on all sides produces a 44px hit zone. The correct approach." ], "keyNumbers": [ { "value": "24×24px", "label": "WCAG 2.2 AA minimum (SC 2.5.8)" }, { "value": "44×44px", "label": "WCAG 2.2 AAA + Apple HIG minimum" }, { "value": "48×48dp", "label": "Material Design (Android) minimum" }, { "value": "8px", "label": "Minimum spacing between adjacent targets" } ] } }, { "id": "button-design", "title": "Button Design", "category": "interaction", "coverImage": "assets/visuals/button-design.svg", "frames": [ { "image": "assets/visuals/button-design.svg", "caption": "Button Design" }, { "image": "assets/visuals/button-action.svg", "caption": "Button Alternative and Main Action" }, { "image": "assets/visuals/button-position.svg", "caption": "Button Positioning" }, { "image": "assets/visuals/button-normal.svg", "caption": "Button Normal State" }, { "image": "assets/visuals/button-active.svg", "caption": "Button Active State" }, { "image": "assets/visuals/button-focus.svg", "caption": "Button Focus State" }, { "image": "assets/visuals/button-hover.svg", "caption": "Button Hover State" }, { "image": "assets/visuals/button-disabled.svg", "caption": "Button Disabled State" } ], "tldr": "5 states: normal, hover, focus, active, disabled. Each has a specific color treatment. Max 1 primary per screen. Never rely on color alone.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7594923095039757590?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DTdj46ojXaO/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Hierarchy: max 1 primary + 1 secondary per section. Never two equally weighted CTAs.", "Normal: solid fill with 4.5:1 contrast ratio on label. This is the baseline all other states derive from.", "Hover: darken background 10-15% (dark surfaces: lighten). Add cursor:pointer. Subtle transition 150ms.", "Focus: 2px solid outline, 2px offset from the element edge. Color must contrast 3:1 against adjacent background (WCAG 2.4.11). Never remove outline — only style it.", "Active/Pressed: darken 20-30% from normal. Optional: 1px inset shadow, 1px downward translate. Signals physical press.", "Disabled: 40% opacity on the entire button. cursor:not-allowed. aria-disabled='true'. Never change only color to signal disabled — opacity is the universal signal." ], "why": [ "Focus rings exist for keyboard and switch users. Removing outline:none without a replacement locks out ~7% of users who don't use a mouse.", "Hover darkening by 10-15% is perceptually significant enough to signal interactivity without looking broken.", "Disabled at 40% opacity reads as 'unavailable' universally across cultures — color-blind users included.", "Active/pressed state at 20-30% darker closes the feedback loop: the user knows their input registered.", "Loading state (spinner + disabled) prevents double-submit race conditions on async actions." ], "whenItBreaks": [ "Dark mode: hover darkening becomes lightening. Define both explicitly — don't assume one style works for both.", "Destructive actions like Delete: always two-step. Red color + a confirmation dialog. Never a single irreversible button.", "Icon-only buttons: tooltip required (aria-label). Touch target minimum 44×44px even if the icon is 24px.", "Ghost buttons on images: outline can disappear. Always check contrast of border against the background behind it." ], "inPractice": [ "Primary: solid fill, high-contrast label, full opacity. One per screen section.", "Secondary: outlined or ghost. Same size as primary, lower visual weight.", "Tertiary: text-only, no background or border. For least-important actions.", "Focus ring color: use brand color or system blue (#0066CC). Offset 2px so it doesn't touch the element.", "Disabled formula: take normal state → set opacity to 0.4. Do not change the color or shape." ], "keyNumbers": [ { "value": "4.5:1", "label": "Minimum contrast ratio for button label (normal state)" }, { "value": "3:1", "label": "Minimum contrast ratio for focus ring against background (WCAG 2.4.11)" }, { "value": "10-15%", "label": "Hover: darken background by this amount" }, { "value": "20-30%", "label": "Active/pressed: darken background by this amount" }, { "value": "40%", "label": "Disabled: opacity applied to full button" }, { "value": "2px / 2px", "label": "Focus ring: outline width / offset from element" } ] } }, { "id": "button-padding", "title": "Button Padding", "category": "interaction", "coverImage": "assets/visuals/button-compare.svg", "frames": [ { "image": "assets/visuals/button-padding.svg", "caption": "symmetric padding" }, { "image": "assets/visuals/button-shift-center.svg", "caption": "Icon + gap shifts perceived center" }, { "image": "assets/visuals/button-compare.svg", "caption": "symmetric vs. compensated padding" } ], "tldr": "Text button: symmetric padding.\nIcon + label: many design systems reduce icon-side padding by the gap value.\nIcon-only: padding = (target − icon) ÷ 2.\nAll values are approximations. Fine-tune visually.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7610145870046104834?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVHLrdDipEl/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Text-only button: symmetric padding. Web standard: 8–12px vertical, 16–24px horizontal.", "Leading icon button: many design systems apply a gap-based compensation, reducing icon-side padding by the gap value. MD3 example: 24dp text-side, 8dp gap, 16dp icon-side.", "Trailing icon button: the same logic in reverse. Right padding is reduced by the gap value instead.", "Icon-only button: padding = (target size − icon size) ÷ 2. For a 48px target with a 24px icon, that is 12px on all sides.", "All values are approximations. With larger icons or tight layouts, adjust by ±2–4px based on visual judgment." ], "why": [ "Symmetric padding centers geometry, not visual weight. The icon adds mass on one side and the perceived center shifts, even when the numbers are equal.", "The icon-to-label gap inflates the icon side further. Reducing padding on that side compensates.", "This is a Gestalt effect, not a normative rule. MD3 applies gap-based compensation consistently, but neither Apple HIG nor WCAG define it as a requirement." ], "whenItBreaks": [ "Large icons (20–24px) with full gap compensation often over-correct. Reduce by 2–4px instead.", "Filled icons have more optical weight than outline icons. They may need slightly more correction.", "RTL layouts: flip the asymmetry. Use padding-inline-start and padding-inline-end to handle it automatically.", "Touch target size is a separate concern. See the touch-target rule." ], "inPractice": [ "Text button: padding: 8px 16px (desktop), 10px 24px (touch).", "Leading icon (MD3 convention): padding: 10px 24px 10px 16px. Icon 18dp, gap 8dp.", "Icon-only (48px target): padding: 12px. Check in DevTools that the hit area reaches at least 44px." ], "keyNumbers": [ { "value": "16 / 24dp", "label": "MD3 icon-side / text-side (leading icon)" }, { "value": "8dp", "label": "Icon-to-label gap (MD3 standard)" }, { "value": "±2–4px", "label": "Visual fine-tune range" } ], "sources": [ { "label": "Material Design 3 — Button specs", "year": "2024" }, { "label": "Apple Human Interface Guidelines", "year": "2024" } ] } }, { "id": "link-design", "title": "Link Design", "category": "interaction", "coverImage": "assets/visuals/cover-link-design.svg", "frames": [ { "image": "assets/visuals/link-button-difference.svg", "caption": "Link goes somewhere, Button does something" }, { "image": "assets/visuals/link-normal.svg", "caption": "Link Normal State" }, { "image": "assets/visuals/link-active.svg", "caption": "Link Active State" }, { "image": "assets/visuals/link-focus.svg", "caption": "Link Focus State" }, { "image": "assets/visuals/link-hover.svg", "caption": "Link Hover State" }, { "image": "assets/visuals/link-visited.svg", "caption": "Link Visited State" }, { "image": "assets/visuals/links-self-explanatory.png", "caption": "Link text must be self-explanatory" } ], "tldr": "Underline is the universal affordance. Visited state is required. Inline links are not the same as standalone links.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7595329775829372182?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DTgbgtsDWtG/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Inline links: always underlined. Color alone is not sufficient for accessibility.", "Standalone and nav links: color + hover underline is acceptable.", "Visited state: use a distinct color for links the user has already visited.", "External links: add an icon marker + target=_blank with a tooltip warning." ], "why": [ "WCAG SC 1.4.1: color alone is not sufficient for distinguishing links. An underline or other non-color differentiator is required.", "Visited state provides spatial orientation. Users know where they have already been.", "Links must be distinguishable from surrounding text at a 3:1 ratio without relying on color." ], "whenItBreaks": [ "Button vs. link: actions use buttons, navigation uses links. These are semantically distinct and not interchangeable.", "Too many inline links create visual noise and eliminate clear scan paths." ], "inPractice": [ "Set text-decoration: underline in body copy. Removing it on hover is wrong. The underline is the primary affordance and must be preserved." ], "sources": [ { "label": "WCAG 2.2 SC 1.4.1 Use of Color", "year": "2023" } ] } } ] }, "icons": { "title": "ICONS", "rules": [ { "id": "icon-bounding-box", "title": "Icon Bounding Box", "category": "icons", "coverImage": "assets/visuals/boundingbox-icon.svg", "frames": [ { "image": "assets/visuals/boundingbox-icon.svg", "caption": "With Bounding Box" }, { "image": "assets/visuals/no-boundingbox.svg", "caption": "Without Bounding Box" }, { "image": "assets/visuals/square-heavier.svg", "caption": "Square Appears Heavier" }, { "image": "assets/visuals/blur-test.svg", "caption": "Blur Test" }, { "image": "assets/visuals/trim.svg", "caption": "Padding Varies by Shape" }, { "image": "assets/visuals/icon-scale.svg", "caption": "Icon Scale" } ], "tldr": "Consistent bounding box across all icons. Padding varies by optical weight (circle needs more than square).", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7602385832653131030?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DURV7BBDUBj/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Fixed bounding box (frame) for all icons in the set: 16, 20, 24, 32, or 48px.", "Standard padding: 16px frame = 1px, 24px frame = 2px, 48px frame = 4px.", "Live area = frame - padding on all sides." ], "why": [ "Without a fixed frame, spacing between icons becomes inconsistent across different contexts.", "Optical weight: circles require more area than squares because they have more negative space.", "Blur test: verify optical balance by checking that all icons appear equally heavy when blurred." ], "whenItBreaks": [ "Mathematically equal does not mean optically equal. Visual adjustment is always required.", "Strict keyline constraints ignore necessary optical corrections." ], "inPractice": [ "Blur test: apply a 2px blur to all icons. Equal visual mass confirms correct optical balance." ] } }, { "id": "icon-alignment", "title": "Icon Alignment", "category": "icons", "coverImage": "assets/visuals/icon-align-offset.svg", "frames": [ { "image": "assets/visuals/icon-align-offset.svg", "caption": "Icons need vertical offset" }, { "image": "assets/visuals/align-capheight.svg", "caption": "Align to Cap-Height, Not Baseline" }, { "image": "assets/visuals/flexbox.svg", "caption": "Flexbox Align-Items" } ], "tldr": "Optical alignment is not mathematical alignment. Circular icons need a slight upward offset.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7603843091379883286?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DUbdEXgjRc5/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Align icons to the baseline of adjacent text, not the cap height.", "Circular icons need a slight upward offset of approximately 1-2px for optical balance.", "When inline with text, vertical-align: middle is often insufficient. Manual optical adjustment is needed.", "Icon size relative to text: match the x-height or cap height of the typeface." ], "why": [ "Optical center does not equal geometric center in asymmetrical shapes.", "A circle in the same bounding box as a square appears visually lower.", "Text baseline and icon bottom edge have different visual centers of gravity." ], "whenItBreaks": [ "Very complex icon shapes: testing is the only method. No formula applies.", "Different icon sizes next to the same text size: each combination must be tested separately." ], "inPractice": [ "Button with icon: use display:flex + align-items:center + a manual 1px upward offset for circular icons." ] } } ] }, "visual": { "title": "VISUAL PERCEPTION", "rules": [ { "id": "visual-weight", "title": "Visual Weight", "category": "visual", "coverImage": "assets/visuals/weight-size.svg", "frames": [ { "image": "assets/visuals/weight-size.svg", "caption": "size" }, { "image": "assets/visuals/weight-saturation.svg", "caption": "saturation" }, { "image": "assets/visuals/weight-color.svg", "caption": "color" }, { "image": "assets/visuals/weight-isolation.svg", "caption": "isolation" }, { "image": "assets/visuals/weight-shape.svg", "caption": "shape" }, { "image": "assets/visuals/weight-lightness.svg", "caption": "lightness" } ], "tldr": "Six factors determine visual weight: size, saturation, luminance contrast, position, isolation, and shape.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7607920218022661398?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DU3vm-UjR-B/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Six factors: size, saturation, luminance contrast, position (vertical beats horizontal), isolation (whitespace), shape (compact beats irregular).", "Factors are cumulative. Stack all six in one direction to create an unambiguous focal point.", "Pre-attentive processing (under 200ms): color, size, and luminance are processed in parallel." ], "why": [ "Eye-tracking (MDPI 2026, n=30, 120Hz): background color alone shifts the first fixation by a factor of 2.7x.", "Post-attentive: semantic weight like a face attracts the eye regardless of pixel size.", "Arnheim's claim that right is heavier was empirically disproved by Winner et al. in 1987." ], "whenItBreaks": [ "Helmholtz-Kohlrausch effect: saturated colors like blue and magenta appear brighter than their luminance value suggests. Pure luminance calculation is insufficient.", "Cultural variation: left-right weight distribution varies with reading direction." ], "inPractice": [ "CTA: large, saturated, high contrast, top-center, isolated, compact shape. All six factors point in the same direction. Unambiguous focal point." ], "keyNumbers": [ { "value": "< 200ms", "label": "Pre-attentive processing window" } ], "sources": [ { "label": "Arnheim. Art and Visual Perception", "year": "1954" }, { "label": "MDPI Symmetry (n=30, 120Hz eye-tracking)", "year": "2026" }, { "label": "Winner et al.", "year": "1987" } ] } }, { "id": "rule-of-thirds", "title": "Rule of Thirds", "category": "visual", "coverImage": "assets/visuals/rule-of-thirds.svg", "frames": [ { "image": "assets/visuals/rule-of-thirds.svg", "caption": "3x3 grid: 4 power points at 33% / 67%" }, { "image": "assets/visuals/rule-of-thirds-weight.svg", "caption": "Power points are not equally strong" }, { "image": "assets/visuals/rule-of-thirds-example.png", "caption": "Single objects: centered often outperforms RoT" } ], "tldr": "Divide the frame into thirds horizontally and vertically. Place key elements on the four intersections.\nThe rule prevents weak centered compositions. It does not guarantee strong ones.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7610500582872190230?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVJpP8eipki/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "Two horizontal and two vertical lines divide the frame at 33.33% and 66.67%. Their four intersections are the power points.", "Place focal elements (CTAs, subjects, headlines) on or near a power point, not dead center.", "The rule is a heuristic, not a law. It has no normative backing in WCAG, ISO, or any accessibility standard.", "RoT is an approximation of the golden ratio (33.3% vs. 38.2%). The two are related in spirit but mathematically distinct." ], "why": [ "Centered placement creates visual stasis. Off-center placement introduces tension and implied movement, which increases engagement.", "In LTR text-heavy layouts, top-left often receives initial attention. This is not universal and does not apply equally to all content types or formats.", "Amirshahi et al. (2014) found only a weak correlation between RoT score and aesthetic quality. A low RoT score reliably produces weak images, but a high score does not guarantee quality." ], "whenItBreaks": [ "Single isolated objects: Hoh et al. (SIGGRAPH Asia 2023) showed users overwhelmingly preferred centered placement over RoT placement for simple single-object compositions.", "Vertical video (9:16): eye-tracking data suggests central vertical placement outperforms RoT-based off-center placement for mobile portrait formats.", "Data UIs (dashboards, tables, forms): the rule does not apply. Readability and alignment take priority over compositional asymmetry.", "Symmetrical and formal subjects (logos, frontal portraits, product shots): centering is often the stronger choice." ], "inPractice": [ "Hero sections: align the primary headline to the top-left power point. Place the CTA near the bottom-left point. Leave the right two-thirds as negative space or image.", "CSS: left: 33.33% and top: 33.33% for absolute-positioned focal elements. For grid layouts, use grid-template-columns: 1fr 1fr 1fr and target column 1 or 2 for the primary element." ], "keyNumbers": [ { "value": "33.33% / 66.67%", "label": "Grid line positions (H and V)" }, { "value": "4", "label": "Power points (intersections)" }, { "value": "~38.2%", "label": "Golden ratio equivalent for comparison" } ], "sources": [ { "label": "Smith. Remarks on Rural Scenery", "year": "1797" }, { "label": "Amirshahi et al. Art and Perception", "year": "2014" }, { "label": "Hoh, Zhang, Dodgson. SIGGRAPH Asia 2023", "year": "2023" }, { "label": "Tatler. Journal of Vision — Central Fixation Bias", "year": "2007" } ] } }, { "id": "optical-center", "title": "Optical Center", "category": "visual", "coverImage": "assets/visuals/optical-center-cover.png", "frames": [ { "image": "assets/visuals/optical-center2.png", "caption": "offset 2-6%" }, { "image": "assets/visuals/optical-center-formula.png", "caption": "formula" } ], "tldr": "The visual center of a rectangle sits roughly 2-6% above its geometric midpoint. CSS `align-items: center` positions at 50%; the eye reads that as below center.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7613432532129860886?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVqxz6GigrQ/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "The optical center is where a viewer's gaze settles in a rectangular frame in the absence of salient stimuli. It sits above the geometric center.", "Print-framing convention places the optical center at approximately 44-47% from the top. This is a craft tradition, not a peer-reviewed constant for digital screens.", "The effect applies to single focal elements. Luminance contrast, motion, and faces override the optical anchor when multiple salient elements compete." ], "why": [ "The visual system overestimates vertical distances in the upper field (horizontal-vertical illusion, Stacey 1969). A geometrically centered element appears to sag downward.", "Locher, Stappers and Overbeeke (1999): lay observers (55%) and design professionals (64%) detected compositional correctness at above-chance rates. The effect is perceptual, not learned.", "Apple HIG, Material Design, IBM Carbon, and a 2023 Displays study all document that asymmetric icons require optical, not geometric, centering." ], "whenItBreaks": [ "High-salience elements override the optical anchor. A high-contrast image, face, or animated element captures initial fixation regardless of position.", "The 44% value derives from print-framing, not screen research. Mobile portrait orientation may shift the effective anchor. No controlled study has measured this." ], "inPractice": [ "Hero sections: use `transform: translateY(-4%)` to shift a centered element toward the optical center. CSS percentage margins reference container width, not height, making them unreliable for vertical offsets. Tune per layout.", "Icon buttons: play-triangle icons need a `translateX` offset (typically 1-3px) because the triangle's centroid sits at one-third of its height from the base. `transform: translateX(2px); /* verify per icon size */`" ], "keyNumbers": [ { "value": "~44%", "label": "Approximate optical center position from the top of a rectangle" }, { "value": "2-6%", "label": "Typical upward offset from geometric center in UI layouts" } ], "sources": [ { "label": "Arnheim. Art and Visual Perception", "year": "1974" }, { "label": "Locher, Stappers, Overbeeke. Acta Psychologica 102", "year": "1999" }, { "label": "Stacey. Horizontal-vertical illusion. Life Sciences 8(22)", "year": "1969" }, { "label": "Research on visual size and alignment of icon sets. Displays (ScienceDirect)", "year": "2023" } ] } } ] }, "print": { "title": "PRINT AND PRODUCTION", "rules": [ { "id": "dieline-bleed", "title": "Dieline and Bleed", "category": "print", "coverImage": "assets/visuals/packaging-bleed-bleed.png", "frames": [ { "image": "assets/visuals/packaging-bleed-no-bleed.png", "caption": "no bleed" }, { "image": "assets/visuals/packaging-bleed-bleed.png", "caption": "bleed zone" }, { "image": "assets/visuals/packaging-bleed-bleed-value.png", "caption": "bleed value" }, { "image": "assets/visuals/packaging-bleed-cut.png", "caption": "cut off" } ], "tldr": "A dieline is the flat 2D document defining every cut, crease, and glue line of a package. Extend all background artwork 3mm (EU) or 3.175mm / 0.125in (US) past the cut line. Errors propagate irreversibly into the physical form.", "videoUrls": { "tiktok": "https://www.tiktok.com/@designparser/video/7616399946681437462?is_from_webapp=1&sender_device=pc&web_id=7605204772584801814", "instagram": "https://www.instagram.com/reel/DVtihFXCrK1/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==" }, "deepDive": { "rule": [ "A dieline is a vector-based 2D document.", "It defines cut, crease, perforation, and glue lines in their flat-unfolded state.", "It is not a mockup or a 3D rendering.", "Errors in the dieline cannot be corrected after the cutting die has been manufactured.", "All construction lines must be placed on named spot-color layers.", "The overprint flag must be active on all construction layers.", "If not separated and overprint-flagged, the RIP interprets them as printable elements.", "They will then appear as visible marks on the finished product.", "Caliper correction is mandatory for rigid boards.", "Add twice the material thickness to each fold dimension in the flat dieline.", "A 2mm greyboard lid requires +4mm in the dieline.", "Online templates do not include this correction." ], "why": [ "Press drift displaces the substrate during printing.", "Without bleed, any drift exposes unprinted substrate after trimming.", "This appears as a visible white edge on the finished product.", "This is the most frequently reported single error in packaging prepress.", "The dieline demands continuous 2D-to-3D mental rotation.", "Shepard & Metzler (1971) established that mental rotation time scales linearly with structural complexity.", "This explains why fold orientation errors persist even among experienced packaging designers." ], "whenItBreaks": [ "Unprinted or flexo-printed corrugated transport packaging operates at lower graphic precision.", "These use FEFCO codes.", "Applying consumer-packaging bleed rules to unbranded corrugated adds prepress effort without production benefit.", "Short-run digital printing has no reusable cutting die.", "Per-unit correction cost is lower in short-run digital.", "The absence of a tooling proof means no physical verification exists before the full run completes." ], "inPractice": [ "Folding carton in Adobe Illustrator: use a layered structure.", "Layer 1 = Dieline_Cut — spot color, overprint ON, non-printing.", "Layer 2 = Dieline_Crease — same settings as Dieline_Cut.", "Layer 3 = Artwork_CMYK.", "Extend all background fills 3mm past the cut path on every side.", "Place no text or barcodes within 5mm of any cut or crease line." ], "keyNumbers": [ { "value": "3mm", "label": "EU standard bleed for folding carton and labels" }, { "value": "3.175mm / 0.125in", "label": "US standard bleed" }, { "value": "3–5mm", "label": "Safe zone inset from cut line — 5mm at crease lines" }, { "value": "300 dpi", "label": "Minimum raster artwork resolution at 1:1 final size" }, { "value": "0.25pt", "label": "Minimum stroke weight — thinner lines drop out in production" } ], "sources": [ { "label": "FEFCO International Fibreboard Case Code, 12th edition", "year": "2022" }, { "label": "ECMA Code, European Carton Makers Association", "year": "current" }, { "label": "ISO 3394:2012. Packaging, Dimensions of rigid rectangular packages", "year": "2012" }, { "label": "Soroka. Fundamentals of Packaging Technology, 5th ed. IoPP", "year": "2014" }, { "label": "Shepard & Metzler. Mental rotation of three-dimensional objects. Science", "year": "1971" } ] } } ] } } }