Design system style guide documentation

Summary

Design system documentation page presenting typography, color palette, and UI component library in a clean, organized grid layout with cobalt blue as primary color.

Visual description

Light cream background with a vertical single-column layout. Top section features the heading "Style Guide" with descriptive body text. Below, a "Typography" section showcases Poppins font family in Regular, Medium, and Bold weights with specimen lines. Next, a "Color Palette" section presents a grid of color swatches including primary cobalt blue (#6B8BEA), secondary navy (#101D6C), charcoal gray (#434F87), lavender (#B7BFD3), and light periwinkle (#D4DDED), each labeled with its hex code. The "Components Library" section displays a grid of UI components including buttons (primary blue, secondary navy, outline), form inputs, date pickers, card layouts, ratings, modals, and other interface elements. All typography uses a clean, modern sans-serif (Poppins). Text is consistently black or dark gray on the light background. White space between sections is generous, emphasizing structure and legibility.

Key takeaway

A design system reference document uses systematic grid structure and clear visual hierarchy to make standards immediately legible and scannable. Showing type specimens with actual weights and sizes alongside applied examples in UI components demonstrates how to document both foundational and applied design decisions. A restrained color palette (primary, secondary, supporting neutrals) maintains visual cohesion across a dense information layout.

Reuse notes

Effective template for product design documentation, internal design guidelines, and handing off design systems to development teams. Works well for SaaS, developer tools, and digital products where systematic design matters. The clean layout is appropriate for both digital and printed documentation.