{"id":7448,"date":"2026-09-13T18:46:08","date_gmt":"2026-09-14T01:46:08","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=7448"},"modified":"2026-09-14T07:23:07","modified_gmt":"2026-09-14T14:23:07","slug":"styles","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/styles\/","title":{"rendered":"Design System"},"content":{"rendered":"\n
\n
\n
\n

Authority is more than style.
It\u2019s a decision.<\/mark><\/h1>\n\n\n\n

Suede is a refined design system centered on authority and presence. Its visual language favors strong typography, generous space, deliberate contrast, purposeful imagery, and confident composition.<\/p>\n\n\n\n

Defined in DESIGN.md<\/mark> \u2014 the complete design system in one readable file.<\/p>\n<\/div>\n\n\n\n

\n\n\n<\/svg>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

01<\/p>\n\n\n\n

Principles<\/h2>\n<\/div>\n\n\n\n
\n
\n

01<\/p>\n<\/div>\n\n\n\n

\n

Prefer fewer, stronger ideas.<\/p>\n<\/div>\n\n\n\n

\n

Decide what deserves attention and give it scale, weight, and room. Remove anything that weakens the message.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

02<\/p>\n<\/div>\n\n\n\n

\n

Hierarchy before decoration.<\/p>\n<\/div>\n\n\n\n

\n

Establish priority through type, spacing, form, and contrast. Let those elements work before adding anything more.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

03<\/p>\n<\/div>\n\n\n\n

\n

Space makes things matter.<\/p>\n<\/div>\n\n\n\n

\n

Give content enough room to breathe. Apply it with true purpose, not just for visual effect or unnecessary decoration.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

04<\/p>\n<\/div>\n\n\n\n

\n

Repetition creates coherence.<\/p>\n<\/div>\n\n\n\n

\n

Use consistent patterns to build familiarity and rhythm. Introduce variation only when the content calls for it.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

05<\/p>\n<\/div>\n\n\n\n

\n

Restraint, not minimalism.<\/p>\n<\/div>\n\n\n\n

\n

Be selective while preserving balance, character, and depth. Compositions should always feel confident and complete.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

02<\/p>\n\n\n\n

Identity<\/h2>\n<\/div>\n\n\n\n
\n
\n
\n
\n\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n\n<\/svg>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

The mark<\/h3>\n\n\n\n

Two parallel strokes form a simple, deliberate mark. Geometric and disciplined, it reflects the principles behind Suede: strong composition, clear hierarchy, and the confidence to use less.<\/p>\n\n\n\n

Gold on black \/ white is the primary treatment. Monochrome alternatives provide flexibility where scale, contrast, or context calls for restraint.<\/p>\n\n\n\n

\n
\n

Aspect<\/p>\n\n\n\n

1 : 1<\/p>\n<\/div>\n\n\n\n

\n

Stroke<\/p>\n\n\n\n

1 unit<\/p>\n<\/div>\n\n\n\n

\n

Spacing<\/p>\n\n\n\n

2 units<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

03<\/p>\n\n\n\n

Typography<\/h2>\n<\/div>\n\n\n\n
\n

Google Sans Flex \u2014 primary<\/p>\n\n\n\n

Aa Gg Rr 24<\/p>\n<\/div>\n\n\n\n

\n
\n

85% condensed<\/p>\n\n\n\n

Presence<\/p>\n<\/div>\n\n\n\n

\n

100% normal<\/p>\n\n\n\n

Presence<\/p>\n<\/div>\n\n\n\n

\n

110% expanded<\/p>\n\n\n\n

Presence<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Variable width creates contrast while preserving typographic continuity, used selectively and with purpose. Secondary or accent widths introduce distinction when they strengthen the editorial character of the design.<\/p>\n<\/div>\n\n\n\n

\n
\n

Type scale<\/p>\n\n\n\n

\n
\n
\n

12px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xxxSmall<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

14px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xxSmall<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

16px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xSmall<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

18px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

Base<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

20px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

Small<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

24px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

Medium<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

30px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

Large<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

36px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xLarge<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

48px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xxLarge<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

60px<\/p>\n<\/div>\n\n\n\n

\n

Suede<\/p>\n<\/div>\n\n\n\n

\n

xxxLarge<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Body \u2014 18px \/ 400<\/p>\n\n\n\n

The base body text is set at 18px and 400 weight with generous line height. Headings use 500 weight with tighter spacing. Use 600 weight for strong emphasis<\/strong>, and keep text links identifiable, typically with an underline<\/a>.<\/p>\n<\/div>\n\n\n\n

\n

Eyebrow \/ Spacing \/ Meta<\/p>\n\n\n\n

Uppercase \u00b7 0.05em \u00b7 500<\/p>\n\n\n\n

Reserved for navigation, labels, metadata, and eyebrow treatments. Use selectively to establish hierarchy and distinction, never for long-form copy or prominent display typography.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

04<\/p>\n\n\n\n

Color<\/h2>\n<\/div>\n\n\n\n
\n

Black and white define the foundation. Gold is used selectively \u2014 for identity, emphasis, and interaction \u2014 adding distinction without competing for attention.<\/p>\n<\/div>\n\n\n\n

\n
\n
<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Black \u2014 authority, contrast<\/p>\n\n\n\n

#000000<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

White \u2014 restraint, balance<\/p>\n\n\n\n

#ffffff<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Gold \u2014 identity, presence<\/p>\n\n\n\n

#aa6600<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Directional gradients<\/h3>\n<\/div>\n\n\n\n
\n

Functional, not decorative. Use when imagery needs contrast for overlaid content or when a composition benefits from controlled tonal depth.
<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"Suede<\/span>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

Fade down<\/p>\n<\/div>\n\n\n\n

\n
\"Suede<\/span>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

Fade up<\/p>\n<\/div>\n\n\n\n

\n
\"Suede<\/span>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

Fade right<\/p>\n<\/div>\n\n\n\n

\n
\"Suede<\/span>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

Fade left<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

05<\/p>\n\n\n\n

Layout<\/h2>\n<\/div>\n\n\n\n
\n
\n

Dimensions<\/p>\n\n\n\n

\n
\n

640px<\/p>\n\n\n\n

Content width \u2014 Long-form text and focused reading<\/p>\n<\/div>\n\n\n\n

\n

960px<\/p>\n\n\n\n

Mid width \u2014 Text paired with supporting content<\/p>\n<\/div>\n\n\n\n

\n

1280px<\/p>\n\n\n\n

Wide width \u2014 Imagery, covers, and complex grids
<\/p>\n<\/div>\n<\/div>\n\n\n\n

Keep long-form text focused within the reading measure. Let imagery, covers, grids, and expressive compositions expand into the wider canvas.<\/p>\n<\/div>\n\n\n\n

\n

Spacing<\/p>\n\n\n\n

\n
\n

20px<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

30px<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

40px<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

60px<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

80px<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n

100px<\/p>\n\n\n\n

<\/div>\n<\/div>\n<\/div>\n\n\n\n

Smaller values connect related elements; larger values separate sections, ideas, or visual modes. Give major sections more room to breathe.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

06<\/p>\n\n\n\n

Detail<\/h2>\n<\/div>\n\n\n\n
\n
\n
\n
\n

Buttons<\/p>\n\n\n\n

On white<\/p>\n<\/div>\n\n\n\n

\n
Square<\/a><\/div>\n\n\n\n
Moderate<\/a><\/div>\n\n\n\n
Rounded<\/a><\/div>\n<\/div>\n\n\n\n
\n
Square<\/a><\/div>\n\n\n\n
Moderate<\/a><\/div>\n\n\n\n
Rounded<\/a><\/div>\n<\/div>\n\n\n\n

Accent fill, uppercase text at medium weight. Choose border radius and apply it consistently. Outlines follow the same form.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Buttons<\/p>\n\n\n\n

On black<\/p>\n<\/div>\n\n\n\n

\n
Square<\/a><\/div>\n\n\n\n
Moderate<\/a><\/div>\n\n\n\n
Rounded<\/a><\/div>\n<\/div>\n\n\n\n
\n
Square<\/a><\/div>\n\n\n\n
Moderate<\/a><\/div>\n\n\n\n
Rounded<\/a><\/div>\n<\/div>\n\n\n\n

Accent fill, uppercase text at medium weight. Choose border radius and apply it consistently. Outlines follow the same form.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Shadows<\/p>\n\n\n\n

\n
\n
<\/div>\n\n\n\n

Soft shadow<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

Solid shadow<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

Subtle shadow<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Iconography<\/p>\n\n\n\n

\n
\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n<\/svg>\n<\/div><\/div>\n\n\n\n
\n\n<\/svg>\n<\/div><\/div>\n<\/div>\n\n\n\n

Material Symbols Sharp, 200 weight, 48px optical size. Use selectively and at balanced scale to clarify intent \u2014 never just as decoration.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

07<\/p>\n\n\n\n

Motion<\/h2>\n<\/div>\n\n\n\n
\n

If you notice the animation, it\u2019s too much.<\/h3>\n\n\n\n
\n

Motion reinforces hierarchy and focus without drawing attention to itself. Meaning must never depend on it \u2014 every state remains clear without motion.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n

fadein<\/p>\n\n\n\n

opacity 0 \u2192 1 \u00b7 500ms<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Arrive without direction<\/p>\n\n\n\n

For content that appears naturally, without suggesting direction.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

fadeinup<\/p>\n\n\n\n

opacity + 30px \u00b7 500ms<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Guide attention upward<\/p>\n\n\n\n

For content that benefits from subtle movement as it enters.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Image zoom \u2014 hover state<\/p>\n\n\n\n

\"Aspen<\/figure>\n\n\n\n

Image zoom is reserved for imagery \u2014 never apply it to text or interface elements.<\/p>\n<\/div>\n\n\n\n

\n

Motion defaults<\/p>\n\n\n\n

\n
\n
\n

250<\/p>\n\n\n\n

ms<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Interface transitions<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

500<\/p>\n\n\n\n

ms<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Entrance animations<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

30<\/p>\n\n\n\n

px<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Entrance distance<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

1.05<\/p>\n\n\n\n

x<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Image zoom effect<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

08<\/p>\n\n\n\n

Application<\/h2>\n<\/div>\n\n\n\n
\n
\n
\n

One system.<\/mark>
Distinct expressions.<\/p>\n\n\n\n

Every expression starts with the same system \u2014 distinction emerges in how its design principles are interpreted and applied.<\/p>\n<\/div>\n\n\n\n

The system at work:<\/p>\n\n\n\n

\n
\n
\n
\n\n<\/svg>\n<\/div>\n\n\n

Expansive imagery<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n\n<\/svg>\n<\/div>\n\n\n

Strong contrast<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n\n<\/svg>\n<\/div>\n\n\n

Expressive type pairing<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n\n<\/svg>\n<\/div>\n\n\n

Editorial design<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n\n<\/svg>\n<\/div>\n\n\n

Restrained color<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n\n<\/svg>\n<\/div>\n\n\n

Subtle use of motion<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\"Sienna<\/figure>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Authority is more than style.It\u2019s a decision. Suede is a refined design system centered on authority and presence. Its visual language favors strong typography, generous space, deliberate contrast, purposeful imagery, and confident composition. Defined in DESIGN.md \u2014 the complete design system in one readable file. 01 Principles 01 Prefer fewer, stronger ideas. Decide what deserves attention and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-title","meta":{"simple_seo_seo_title":"Suede Design System \u2013 Brian Gardner","simple_seo_seo_description":"Explore the principles, typography, color, layout, detail, and motion behind Suede \u2014 a refined design system for WordPress.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-7448","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/7448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=7448"}],"version-history":[{"count":250,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/7448\/revisions"}],"predecessor-version":[{"id":7915,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/7448\/revisions\/7915"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=7448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}