Design Standards

Ignacek WordPress Foundation

Design Standards

Reusable Gutenberg and Kadence baseline for small and medium business websites. The system favors calm spacing, accessible contrast, simple components and client-replaceable semantic tokens.

View ButtonsCopy Patterns

Configuration Summary

Containers

Main 1240 px, narrow 760 px, medium 960 px, wide media 1440 px. Default content should not be full width.

Spacing

Standard section: 112 desktop, 80 tablet, 64 mobile. Grid gaps: 32, 24, 20.

Radius

Small 6 px, standard 12 px, large 20 px, pill 999 px. Buttons and fields use 8 px.

01

Color Palette

Colors are semantic roles. Primary, text, surface, border and status roles stay structurally consistent, while brand values can change per client.

Primary
#1f4f46
Secondary
#e7b35a
Accent
#4d6fb3
Background
#f7f5f0
Surface
#ffffff
Text
#1f2428

02

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Lead text uses 20-22 px and should introduce the section.

Body text uses 18 px on desktop and 17 px on mobile with about 1.6 line height. Long reading text should stay inside the 760 px narrow container.

Small text is 14-15 px and reserved for hints, captions and metadata.

03

Containers and Spacing

MainGeneral pages, sections and grids1240 px
NarrowArticles, descriptions, text-heavy content760 px
MediumForms, FAQ, compact content960 px
WideGalleries and intentional media sections1440 px

Spacing Scale

XS
8 px
S
16 px
M
24 px
L
32 px
XL
48 px
2XL-5XL64, 80, 112, 144 px for sections and large layout rhythmscale

04

Button System

Variants

Primary ActionSecondary ActionText Link ->Large CTA

States

HoverFocusActiveDisabled

Labels should usually contain 2-5 words. Avoid all-uppercase labels and decorative shadows.

05

Form Standards

Labels stay visible above fields.

Success state uses border plus text.

Error example: message is too short.

Contact preference
Success message: the form was submitted.

06

Card Standards

Standard Content Card

32 px padding, 12 px radius, subtle border, no heavy shadow.

Read More ->
4:3 image

Image Card

Consistent ratio, useful crop and clear CTA.

View Detail
AB

Testimonial Card

„Clear, calm and easy to maintain.“

Alex Becker
Example Company

07

Image Standards

Hero 21:9

Hero: 16:9 or 21:9

Content 3:2

Content image: 3:2

Portrait 4:5

Portrait: 4:5

Square 1:1

Avatar/gallery: 1:1

Card 4:3

Card image: 4:3

Large media

Use radius intentionally.

08

Alerts and Status

Success. Positive confirmation.
Info. Neutral guidance.
Warning. Needs attention.
Error. Needs correction.

09

Reusable Patterns

Pattern Set

  • Standard Hero
  • Text and Image
  • Services Grid
  • Feature Cards
  • Gallery Section
  • Testimonials
  • FAQ
  • Contact Form
  • CTA Section
  • Standard Footer CTA

Rules

Patterns should inherit global colors, typography, radius and spacing. Override only when a client project has a documented reason.

Use neutral placeholder content. Replace images in the Media Library and add descriptive alt text.

Ready Baseline

Use this page as the first visual QA stop for every new WordPress project.

Duplicate sections into client pages, then adjust semantic tokens instead of redesigning components from scratch.

Review Patterns