x3allamerican/design-skills - Page 2

hanging-punctuation

Use when designing optical alignment of typography. Hanging punctuation pushes commas, quotes, and bullets outside the column line for better optical balance.

hero-image-composition

Use when composing or selecting a hero image. Hero image is the largest brand signal on a marketing page.

hero-section-anatomy

Use when designing the opening hero of a marketing page. The hero communicates brand + value + action in the first scroll.

hover-state-systems

Use when designing hover states for interactive elements. Hover states confirm clickability and guide interaction.

illustration-system

Use when adding illustrations to brand surfaces. Illustration style must be brand-aligned and consistent.

infographic-and-data-visualization

Use when visualizing data or process. Infographics communicate complex information efficiently when well-designed.

italic-and-emphasis

Use when emphasizing text. Italic > bold for emphasis (less disruptive). Use bold for keywords, italic for context.

justified-vs-ragged

Use when deciding on column alignment for editorial content. Both have place; choose intentionally.

language-and-multilingual-typography

Use when shipping content in multiple languages. Languages have different typographic conventions; account for them.

leading-and-line-height-discipline

Use when setting line-height for body and display type. Default 1.5 is too tight for editorial body; too loose for display.

line-draw-animation

Use when revealing illustrative content. Line-draw animations make SVG lines appear as if being drawn live.

lint-and-pre-commit-checks

Use when establishing code quality automation. Lint = automatic style/error checking. Pre-commit = checks before commit.

loading-state-design

Use when designing loading indicators. Loading states tell users 'we're working' without being annoying.

mask-cutouts-and-edge-treatment

Use when removing photo backgrounds or treating image edges. Mask cutouts isolate subjects; edge treatment integrates with layout.

masthead-and-byline

Use when adding editorial credits to articles. Masthead and byline establish authorship credibility.

metallic-and-foil-treatments

Use when adding metallic accents to luxury brand surfaces. Foil and metallic touches signal premium but need restraint.

micro-interaction-design

Use when adding small interactive feedback (button press, form submit, success confirmation). Micro-interactions communicate state changes.

micro-typography-discipline

Use when polishing typography to publication quality. Micro-details (smart quotes, em-dashes, ellipses, ligatures) separate editorial from default web.

modular-scale

Use when creating consistent size hierarchies. Modular scale = all sizes derived from one base × ratio. Eliminates arbitrary sizes.

monochromatic-dominance

Use when establishing brand color hierarchy. Luxury brands rely on 1 dominant color with restrained accents.

motion-budget-discipline

Use when adding animation to a layout. Motion budget = total animation 'weight' on page. Over-budget = laggy and annoying.

no-build-css-systems

Use when avoiding build complexity. Vanilla CSS or Tailwind via CDN — no build step, deploys anywhere.

og-image-and-screenshot-patterns

Use when creating Open Graph images for social sharing. OG images appear in Twitter, Slack, LinkedIn previews.

optical-kerning-and-pairs

Use when crafting display-size typography. Default browser kerning is mechanical; optical kerning adjusts pair-by-pair for visual balance.

page-number-sigils

Use when designing editorial pages. '01 / 06' page indicators add catalog gravitas and orient readers in long scrolls.

page-transition-language

Use when transitioning between pages or screens. Consistent transitions = brand polish. Inconsistent transitions = patched-together.

paper-edge-dividers

Use when separating sections with editorial flair. Paper-edge dividers (subtle torn-edge, dotted line, gradient fade) replace boring solid rules.

paragraph-rhythm-and-indent

Use when setting paragraph styles for editorial content. Indent vs space-between is a deliberate choice with different aesthetics.

photo-color-grading

Use when establishing a brand-wide color story across photography. Color grading = systematic color treatment across all photos.

photography-aesthetic-control

Use when curating or generating photographs for a luxury brand. Hidden aesthetic markers (color cast, depth, framing) signal brand.

photography-attribution-and-rights

Use when sourcing photography for marketing or editorial use. Always verify rights and attribute correctly.

polaroid-frame-treatment

Use when displaying user-generated photos, testimonials, or 'real moment' imagery. Polaroid frame adds personality and authenticity.

readable-line-length

Use when setting body text column width. 45-65 characters per line is optimal; 75+ causes reading fatigue.

restrained-iconography

Use when adding icons to a layout. Luxury brands use minimal, custom-feeling iconography. Avoid generic icon-set look.

scan-and-paper-textures

Use when adding hand-made or scanned feel to digital surfaces. Scan textures (dust, grain, fold lines) add tactile authenticity.

scroll-driven-animations

Use when adding scroll-revealed content or parallax. Modern browsers support scroll-driven animations natively.

section-breaks-and-transitions

Use when transitioning between sections. Smooth transitions feel curated; harsh transitions feel patched-together.

semantic-color-system

Use when designing alert, error, success, warning, and info states. Semantic colors are NOT brand colors.

signature-flourishes

Use when adding brand signatures to a layout. Flourishes are small marks (em-dash sign-off, scribed initials, custom rule lines) that distinguish.

silent-partner-restraint

Use when designing brand-facing surfaces where the OWNER should not appear. Silent-partner principle removes founder/personal references from customer-facing UI.