Complete catalog of reusable typography and text patterns for SGDS applications. Use this skill whenever the user needs to style text, create typography hierarchies, format headings, style lists, or needs consistent text layouts. Also use when the user mentions headings, page titles, body text, lists, paragraphs, display text, content headers, or any typography styling — even if they just say "make a nice heading" or "style my text". Current patterns include headings (H1-H6), display typography (large prominent text), content headers, lists (ordered and unordered), and paragraphs. Each pattern links directly to the raw HTML template for implementation.
Complete catalog of reusable typography and text patterns for SGDS applications. Use this skill whenever the user needs to style text, create typography hierarchies, format headings, style lists, or needs consistent text layouts. Also use when the user mentions headings, page titles, body text, lists, paragraphs, display text, content headers, or any typography styling — even if they just say "make a nice heading" or "style my text". Current patterns include headings (H1-H6), display typography (large prominent text), content headers, lists (ordered and unordered), and paragraphs. Each pattern links directly to the raw HTML template for implementation.
compatibility
Requires sgds-utilities and sgds-components skills for prerequisite setup
SGDS Patterns
This skill catalogs all reusable UI patterns available in SGDS. Patterns are production-ready templates that combine SGDS components and utilities to solve common UI needs.
When to Use This Skill
Use this skill whenever you need to:
Implement a typography pattern (page headings, content headers, lists, paragraphs with specific sizing/weight)
Build a form pattern (multi-field forms, validation patterns, input groupings)
sgds-components: Knowledge of SGDS web components used within patterns
Refer to these skills before asking how to implement a pattern.
Current Patterns: Typography
Typography patterns define semantic, reusable layouts for text content. All patterns use SGDS utilities for consistent styling and respect the design token hierarchy.
Use the category links below to find specific patterns:
Heading - Page and section headings with optional overlines (6 patterns)
Weight: -light suffix for light font-weight variants
Alignment: -center suffix for center-aligned variants
Size: Built into the name (e.g., display-sm, body-md)
Integration Example
Here's a quick example of how to use a typography pattern:
<!-- Import SGDS foundation styles and components --><linkrel="stylesheet"href="@govtechsg/sgds-web-component/lib/index.css" /><scripttype="module"src="@govtechsg/sgds-web-component/lib/index.js"></script><!-- Use the H1 pattern template --><divclass="sgds:flex sgds:flex-col sgds:items-start sgds:text-left"style="max-width: var(--sgds-text-max-width);"><divclass="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
Overline Label
</div><h1class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
Page Heading Goes Here
</h1><pclass="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
Supporting body text that provides context and detail for the page or section above.
</p></div>
Copy the template, substitute your content, and the pattern is ready to use.
Accessing Pattern Files
All patterns are stored in the repository at stories/patterns/ and available on GitHub. Use the typography category links above to find the exact URL for any pattern:
