Development reference
Wakefield Theme Style Guide
This reference pattern previews the current Wakefield design tokens, typography, buttons, forms, and reusable section background classes. It is intended for development review and should not be used as production page content.
Color Tokens
Carbon
#1a1a1c
Wakefield Green
#63a243
Olive Green
#789a3a
Wakefield Yellow
#ffcc0b
Paper
#f6f6f9
Gray 100
#eaeaec
Gray 700
#626a73
Retail Blue
#1998ff
Additional palette tokens available in theme.json: Carbon 2, Carbon 3, Ink, White, Paper 2, Gray 300, Gray 500, Bright Green, Yellow Hover, and Legacy Teal.
Typography
Body text uses Mukta. This paragraph includes bold text, a sample text link, and enough length to preview rhythm, line-height, and readable measure for content-heavy educational pages.
H1 Roboto Slab 700
H2 Roboto Slab 600
H3 Bitter 700
H4 Bitter 600
H5 Bitter 600
H6 Bitter 500
- Reusable patterns should stay modular.
- Native blocks should carry most layout work.
- Texture and dark sections should be used intentionally.
Renewable carbon, clean hierarchy, and restrained visual systems should do the heavy lifting.
Buttons, Search, And Dark Sections
The dark section class previews carbon surfaces, light text, yellow text links, native button styles, and the current search block treatment.
Header And Reusable Section Notes
When viewed through the style guide page template, the live header and footer frame this pattern. Use this pattern to review the current logo, primary navigation, header search, and WHERE TO BUY CTA without adding a production navigation item.
Section Classes
wf-section wf-section--lightwf-section wf-section--darkwf-section--grunge-texture
Transition Classes
wf-grunge-transition--light-to-darkwf-grunge-transition--dark-to-light
Development reference
Wakefield Theme Style Guide
This reference pattern previews the current Wakefield design tokens, typography, buttons, forms, and reusable section background classes. It is intended for development review and should not be used as production page content.
Color Tokens
Carbon
#1a1a1c
Wakefield Green
#63a243
Olive Green
#789a3a
Wakefield Yellow
#ffcc0b
Paper
#f6f6f9
Gray 100
#eaeaec
Gray 700
#626a73
Retail Blue
#1998ff
Additional palette tokens available in theme.json: Carbon 2, Carbon 3, Ink, White, Paper 2, Gray 300, Gray 500, Bright Green, Yellow Hover, and Legacy Teal.
Typography
Body text uses Mukta. This paragraph includes bold text, a sample text link, and enough length to preview rhythm, line-height, and readable measure for content-heavy educational pages.
H1 Roboto Slab 700
H2 Roboto Slab 600
H3 Bitter 700
H4 Bitter 600
H5 Bitter 600
H6 Bitter 500
- Reusable patterns should stay modular.
- Native blocks should carry most layout work.
- Texture and dark sections should be used intentionally.
Renewable carbon, clean hierarchy, and restrained visual systems should do the heavy lifting.
Buttons, Search, And Dark Sections
The dark section class previews carbon surfaces, light text, yellow text links, native button styles, and the current search block treatment.
Header And Reusable Section Notes
When viewed through the style guide page template, the live header and footer frame this pattern. Use this pattern to review the current logo, primary navigation, header search, and WHERE TO BUY CTA without adding a production navigation item.
Section Classes
wf-section wf-section--lightwf-section wf-section--darkwf-section--grunge-texture
Transition Classes
wf-grunge-transition--light-to-darkwf-grunge-transition--dark-to-light
Development reference
Wakefield Theme Style Guide
This reference pattern previews the current Wakefield design tokens, typography, buttons, forms, and reusable section background classes. It is intended for development review and should not be used as production page content.
Color Tokens
Carbon
#1a1a1c
Wakefield Green
#63a243
Olive Green
#789a3a
Wakefield Yellow
#ffcc0b
Paper
#f6f6f9
Gray 100
#eaeaec
Gray 700
#626a73
Retail Blue
#1998ff
Additional palette tokens available in theme.json: Carbon 2, Carbon 3, Ink, White, Paper 2, Gray 300, Gray 500, Bright Green, Yellow Hover, and Legacy Teal.
Typography
Body text uses Mukta. This paragraph includes bold text, a sample text link, and enough length to preview rhythm, line-height, and readable measure for content-heavy educational pages.
H1 Roboto Slab 700
H2 Roboto Slab 600
H3 Bitter 700
H4 Bitter 600
H5 Bitter 600
H6 Bitter 500
- Reusable patterns should stay modular.
- Native blocks should carry most layout work.
- Texture and dark sections should be used intentionally.
Renewable carbon, clean hierarchy, and restrained visual systems should do the heavy lifting.
Buttons, Search, And Dark Sections
The dark section class previews carbon surfaces, light text, yellow text links, native button styles, and the current search block treatment.
Header And Reusable Section Notes
When viewed through the style guide page template, the live header and footer frame this pattern. Use this pattern to review the current logo, primary navigation, header search, and WHERE TO BUY CTA without adding a production navigation item.
Section Classes
wf-section wf-section--lightwf-section wf-section--darkwf-section--grunge-texture
Transition Classes
wf-grunge-transition--light-to-darkwf-grunge-transition--dark-to-light
Development reference
Wakefield Theme Style Guide
This reference pattern previews the current Wakefield design tokens, typography, buttons, forms, and reusable section background classes. It is intended for development review and should not be used as production page content.
Color Tokens
Carbon
#1a1a1c
Wakefield Green
#63a243
Olive Green
#789a3a
Wakefield Yellow
#ffcc0b
Paper
#f6f6f9
Gray 100
#eaeaec
Gray 700
#626a73
Retail Blue
#1998ff
Additional palette tokens available in theme.json: Carbon 2, Carbon 3, Ink, White, Paper 2, Gray 300, Gray 500, Bright Green, Yellow Hover, and Legacy Teal.
Typography
Body text uses Mukta. This paragraph includes bold text, a sample text link, and enough length to preview rhythm, line-height, and readable measure for content-heavy educational pages.
H1 Roboto Slab 700
H2 Roboto Slab 600
H3 Bitter 700
H4 Bitter 600
H5 Bitter 600
H6 Bitter 500
- Reusable patterns should stay modular.
- Native blocks should carry most layout work.
- Texture and dark sections should be used intentionally.
Renewable carbon, clean hierarchy, and restrained visual systems should do the heavy lifting.
Buttons, Search, And Dark Sections
The dark section class previews carbon surfaces, light text, yellow text links, native button styles, and the current search block treatment.
Header And Reusable Section Notes
When viewed through the style guide page template, the live header and footer frame this pattern. Use this pattern to review the current logo, primary navigation, header search, and WHERE TO BUY CTA without adding a production navigation item.
Section Classes
wf-section wf-section--lightwf-section wf-section--darkwf-section--grunge-texture
Transition Classes
wf-grunge-transition--light-to-darkwf-grunge-transition--dark-to-light