{"id":6713,"date":"2026-07-12T12:38:13","date_gmt":"2026-07-12T19:38:13","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6713"},"modified":"2026-08-10T08:26:56","modified_gmt":"2026-08-10T15:26:56","slug":"styles","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/styles\/","title":{"rendered":"Theme Styles"},"content":{"rendered":"\n

A visual guide to styles in the Suede WordPress theme.<\/p>\n\n\n\n

\n

Colors<\/h2>\n\n\n\n

Suede features a refined color palette of Black<\/strong>, White<\/strong>, and Accent<\/strong>.<\/p>\n\n\n\n

Rather than providing an overwhelming collection of presets, the palette is intentionally restrained to promote consistency, strengthen visual hierarchy, and make thoughtful design decisions easier throughout your website.<\/p>\n\n\n\n

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

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

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

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

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

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

The color palette is registered in the theme\u2019s theme.json<\/strong> file, ensuring consistent defaults across Global Styles and easy to extend and customize.<\/p>\n\n\n\n

Each core color is also available in a series of refined opacity variants, ranging from 10% to 80%. These presets make it easy to introduce depth, emphasis, and subtle visual hierarchy without expanding the palette, making them ideal for borders, backgrounds, overlays, and other supporting interface elements<\/p>\n<\/div>\n\n\n\n

\n

Images<\/h2>\n\n\n\n

Images help bring visual interest and personality to your content. Choose from Zoom, which adds subtle motion on hover, or Corners, which adds a distinctive accent treatment around the image.<\/p>\n\n\n\n

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

Image with the Zoom block style<\/p>\n\n\n\n

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

Image with the Corners block style<\/p>\n<\/div>\n\n\n\n

\n

Buttons<\/h2>\n\n\n\n

The Button block makes it simple to add buttons to your website. Buttons have two styles (Fill, Outline), five widths (Auto, 25%, 50%, 75%, 100%), and three alignments (Left, Center, Right).<\/p>\n\n\n\n

Default<\/h3>\n\n\n\n
\n
\n
Fill Button<\/a><\/div>\n\n\n\n
Fill Button<\/a><\/div>\n\n\n\n
Fill Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Fill Button<\/a><\/div>\n\n\n\n
Fill Button<\/a><\/div>\n\n\n\n
Fill Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Outline Button<\/a><\/div>\n\n\n\n
Outline Button<\/a><\/div>\n\n\n\n
Outline Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Outline Button<\/a><\/div>\n\n\n\n
Outline Button<\/a><\/div>\n\n\n\n
Outline Button<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n

Widths<\/h3>\n\n\n\n
\n
\n
Auto Width<\/a><\/div>\n<\/div>\n\n\n\n
\n
25% Width<\/a><\/div>\n<\/div>\n\n\n\n
\n
50% Width<\/a><\/div>\n<\/div>\n\n\n\n
\n
75% Width<\/a><\/div>\n<\/div>\n\n\n\n
\n
100% Width<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n

Alignments<\/h3>\n\n\n\n
\n
\n
Left Justify<\/a><\/div>\n\n\n\n
Left Justify<\/a><\/div>\n<\/div>\n\n\n\n
\n
Center Justify<\/a><\/div>\n\n\n\n
Center Justify<\/a><\/div>\n<\/div>\n\n\n\n
\n
Right Justify<\/a><\/div>\n\n\n\n
Right Justify<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Code<\/h2>\n\n\n\n

The Code block allows you to add formatted code for others to view. Display HTML, JSON, PHP, JavaScript, or CSS rules and properties.<\/p>\n\n\n\n

{\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#000000\",\n\t\t\t\t\t\"name\": \"Black\",\n\t\t\t\t\t\"slug\": \"black\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffffff\",\n\t\t\t\t\t\"name\": \"White\",\n\t\t\t\t\t\"slug\": \"white\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#aa6600\",\n\t\t\t\t\t\"name\": \"Accent\",\n\t\t\t\t\t\"slug\": \"accent\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<\/div>\n\n\n\n
\n
Headings<\/h2>\n\n\n\n
Headings can help structure your page and make your content more readable by humans as well as search engines. Choose from any of the six headings, ranging from 16px (xSmall) to 36px (xLarge) in size.<\/p>\n\n\n\n
H1 Heading<\/h1>\n\n\n\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae lorem a neque imperdiet sagittis. Vivamus et enim velit. Pellentesque dictum enim ut commodo pulvinar. Nam pulvinar ex sit amet vehicula.<\/p>\n\n\n\n
H2 Heading<\/h2>\n\n\n\n
Quisque ullamcorper nulla eu nisi elementum, at consectetur ex iaculis quis. Vestibulum et faucibus. Quisque vitae mi arcu. Pellentesque massa enim fermentum, dignissim velit vitae, malesuada neque condimentum.<\/p>\n\n\n\n
H3 Heading<\/h3>\n\n\n\n
Mauris sit amet augue sollicitudin, sodales sapien, ultricies erat. Quisque aliquam nisl quis metus iaculis feugiat. Nunc eget odio ornare, laoreet nibh, posuere lorem. Donec nec elementum est, evermora laoreet tortor.<\/p>\n\n\n\n
H4 Heading<\/h4>\n\n\n\n
Maecenas sagittis bibendum condiment. Aliquam ornare condimentum, venenatis in aliquam purus elementum. Aliquam erat volutpat. Duis vel ipsum sollicitudin, volutpat ligula ullamcorper, taylora molestie justo.<\/p>\n\n\n\n
H5 Heading<\/h5>\n\n\n\n
Cras posuere viverra, molestie neque aliquet convallis. Fusce tristique augue, et interdum nibh gravida. Etiam mi gravida, viverra elementum, porttitor. Nunc ut auctor lorem, sed imperdiet vitae congue consequat.<\/p>\n\n\n\n
H6 Heading<\/h6>\n\n\n\n
Morbi sapien turpis, luctus quis gravida, hendrerit amet nibh. Consequat efficitur sagittis. Vivamus tempusora justo amet sapien blandit placerat. Curabitur vestibulum dolor accumsan, finibus nulla semper etal lectus.<\/p>\n<\/div>\n\n\n\n
\n
Social Icons<\/h2>\n\n\n\n
The Social Icons block allows you to add social media icons to any page or post and direct people to your social media profiles. Social Icons have four styles (Logos Only, Default, Outline, Square) with optional labels.<\/p>\n\n\n\n
\n
Logos Only<\/h3>\n\n\n\n