x3allamerican/design-skills

accessibility-tier-checklist

Use when shipping a page. Accessibility tier (A, AA, AAA) sets minimum requirements; AA is the legal default in most jurisdictions.

aspect-ratio-discipline

Use when sizing images and embedded media. Consistent aspect ratios (16:9, 4:3, 1:1, 3:4) signal designed layout.

asymmetric-grid-systems

Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS.

background-tone-variations

Use when creating visual hierarchy between sections. Background variations (cream, cream-dim, cream-hint) define sections without color.

baseline-rhythm

Use when establishing vertical rhythm. Baseline rhythm aligns text to invisible horizontal grid; gives consistency.

brand-system-badge-components

Use when adding brand identifier badges (verified, certified, premium, beta). Badges communicate trust signals and feature status.

brand-system-cohesion

Use when reviewing a brand system for cohesion. Look for: consistent type, consistent color, consistent spacing, consistent voice across every surface.

brand-system-living-document

Use when documenting brand decisions. Brand system docs evolve with the product; treat as living, not frozen.

brand-voice-microcopy

Use when writing buttons, form labels, error messages, and tooltip text. Microcopy carries 60% of brand voice perception.

breadcrumb-and-orientation-ui

Use when helping users navigate deep hierarchies. Breadcrumbs orient users and signal page depth.

broken-grid-and-intentional-disruption

Use when breaking the grid for emphasis. Intentional disruption draws the eye; accidental breaks read as messy.

card-stock-button-treatment

Use when designing primary buttons for editorial brands. Card-stock feel (subtle texture, thick border, slight depth) signals premium without being skeuomorphic.

cloudflare-pages-deploy-patterns

Use when deploying to Cloudflare Pages. Pages is the editorial-friendly hosting choice — static-first, instant global edge.

code-and-design-version-control

Use when managing code + design in git. Git is the source of truth for code; design files reference git commits.

colophon-design

Use when adding a colophon (production credits) to editorial sites. Colophon credits typeface, tools, hosting — print tradition that signals brand maturity.

color-contrast-and-accessibility

Use when checking color contrast for WCAG AA or AAA compliance. Contrast is not optional.

color-temperature-and-mood

Use when fine-tuning color palette for mood. Warm vs cool, saturated vs muted — each communicates differently.

composition-and-visual-flow

Use when arranging elements on a page. Strong composition guides the eye through intentional flow. Z-pattern and F-pattern are useful starting points.

contents-page-design

Use when designing a table of contents for long-form articles or documentation. Contents page orients reader and signals editorial seriousness.

cream-on-ink-palette

Use when establishing the dominant color palette for a luxury brand. Cream backgrounds with ink type signal editorial gravitas.

custom-photography-direction

Use when hiring a photographer or directing shoots. Specifying the brand aesthetic upfront prevents inconsistent results.

custom-rule-lines

Use when adding decorative rules to layouts. Custom rule lines (gradient, dotted with brand color, multi-line) replace boring 1px solid lines.

dark-mode-discipline

Use when implementing dark mode. Don't just invert — design a separate dark palette with intentional choices.

design-handoff-to-engineering

Use when handing design to engineering. Handoff includes: tokens, component specs, edge cases, asset exports.

design-tokens-in-css

Use when establishing brand tokens for code reuse. CSS custom properties = native tokens. No build step needed.

drop-cap-typography

Use when opening long-form articles or section content. Drop caps signal editorial gravitas.

duotone-treatment

Use when stylizing photography for graphic posters or editorial covers. Duotone (two-color mapping) creates striking brand-aligned imagery.

editorial-archives-and-back-catalog

Use when surfacing past content. Archives let readers explore the back catalog and signal long-term brand investment.

editorial-article-anatomy

Use when designing long-form editorial articles. Article anatomy: byline, hero, lede, body, pull-quotes, callouts, footnotes, end mark.

editorial-cta-language

Use when writing CTAs for editorial-style brands. Bold, restrained, action-first. Avoid SaaS-template language.

editorial-newsletter-design

Use when designing an editorial newsletter (vs marketing newsletter). Editorial = essays + curation; marketing = promotion.

editorial-photo-treatment

Use when treating photography for editorial brand aesthetic. Treatment includes color grading, contrast, and subtle effects.

editorial-print-and-pdf-design

Use when adapting digital content for print or PDF. Print has different typographic conventions and color realities.

editorial-share-and-social-cards

Use when promoting editorial content on social. Share cards (OG images + Twitter cards) carry brand identity into social platforms.

editorial-sidenotes

Use when adding context, callouts, or footnotes to article-style pages. Sidenotes elevate above template SaaS without becoming busy.

error-and-404-craft

Use when designing error pages. Error pages are brand moments — handle them with editorial craft, not generic apology.

first-screen-discipline

Use when designing what fits above the fold. First-screen is where visitors decide. Headline + supporting + CTA must fit.

fluid-typography-system

Use when designing responsive typography. Fluid type (calc + viewport units) scales smoothly between breakpoints.

footnote-and-citation-system

Use when adding citations or footnotes to editorial content. Citations signal seriousness; footnotes add depth without breaking flow.

hand-drawn-arrows-and-marks

Use when adding personality to layouts. Hand-drawn arrows, circles, and marks add wit and direction without being childish.