Website Style Guide Creator

Define and visualize your brand's core design elements.

This dashboard uses injected CSS to visualize your chosen styles.

Project Website Style Guide

Version: 1.0 | Date:

I. Color Palette

II. Typography

Font Family: Helvetica, Arial, sans-serif

H1. The Quick Brown Fox (Example)

H2. Primary Section Header (Example)

This is the base paragraph text used for readability and clarity. All body copy will adhere to this size and weight for consistency. Clickable Link Example.

III. Layout & Spacing

Base Unit: 8px (Scales up by multiples)

Color Palette (Define Primary Hex Codes)

Primary Brand Color

Secondary Accent Color

Danger/Error Color

Base Text Color

Typography Hierarchy (Sizes in Pixels)

Font Family Stack (e.g., Arial, sans-serif)

H1 Size (px)

H2 Size (px)

Body Text Size (px)

H1 Weight

H2 Weight

Body Weight

Layout and Spacing Unit

Base Spacing Unit (e.g., 8, 10, 16)

Project Name

Document Version