x3allamerican/design-skills - Page 3

single-accent-system

Use when defining brand accent. ONE accent color, used sparingly (1-5% of surface). Multiple accents = retail; single accent = luxury.

single-file-html-mastery

Use when shipping a single-page artifact, demo, or marketing page that doesn't need a build process. Single-file HTML = fastest delivery, smallest footprint.

slab-card-components

Use when designing card components that should feel like physical objects. Slab-card components feel like graded card holders — bordered, layered, displayed.

slow-type-loading

Use when designing first-impression brand moments. Slow loading is luxury; fast generic is template.

small-caps-and-figures

Use when adding typographic finesse. Small caps for labels, tabular figures for numbers, oldstyle vs lining figures intentionally.

stamped-and-embossed-marks

Use when adding authentication or certification visual markers. Stamps and embossed marks signal authenticity and brand authority.

subtle-parallax

Use when adding depth via parallax. Subtle parallax (20-40% movement) adds depth without disorientation.

swiss-grid-system

Use when establishing a precise layout grid. Swiss/International style uses 12-col grid with strict adherence; every element snaps to grid.

text-reveal-and-stagger

Use when entering hero text or making titles dramatic. Staggered text reveal makes titles unfold dramatically.

texture-and-paper-feel

Use when adding tactile feel to digital surfaces. Subtle paper texture, scan grain, or laid-paper pattern adds depth.

ticket-stub-ui

Use when designing redeemable items, coupons, or event-style components. Ticket-stub UI evokes physical tickets — perforated edges, dotted line, branded.

transition-easing-systems

Use when defining motion easing curves. Linear feels mechanical; spring feels playful; ease-out feels professional.

transparency-and-translucent-overlays

Use when layering type over photography or texture. Translucent overlays create legibility without flat blocks.

type-color-and-contrast

Use when establishing text color hierarchy. Use opacity on ink, not different colors. Maintains brand cohesion.

type-pair-design

Use when selecting a typography pair for a brand. Serif headline + sans body is the editorial classic; choose intentionally.

uppercase-and-all-caps-discipline

Use when adding ALL CAPS to a layout. Used sparingly — for labels, callouts, navigation, NOT for headlines.

variable-fonts-economy

Use when optimizing font loading. Variable fonts ship multiple weights in one file — faster than loading 5 separate weight files.

weight-ladder-discipline

Use when establishing typography weight system. Most brands need 3-4 weights, not 9. Use restraint.

white-space-as-luxury

Use when laying out hero, section transitions, and premium content. White space is the most expensive visual real estate.

z-axis-and-depth

Use when creating visual depth in layout. Subtle shadows, layered elements, and z-stacking define hierarchy without flat or 3D extremes.