Building a Design System: Typography, Spacing, and Color Foundations with Free Tools
Learn how to build a complete design system from scratch using free tools and calculators. Covers typography scales, spacing systems, color palettes, and design tokens with practical examples.
A design system is the single source of truth for how a product looks and feels. It defines typography scales, spacing rules, color palettes, and component patterns so that every screen in your product feels consistent. Without one, every new page becomes a one-off design decision, and your product accumulates visual debt. With one, a team of 20 designers and developers can ship screens that look like they came from the same hand. This guide covers how to build the three core foundations of a design system: typography, spacing, and color. Every tool and calculator referenced here is free and runs in your browser.
Typography: The Type Scale
Typography is the first foundation because text is the primary content of most interfaces. A type scale is a set of font sizes that work together harmoniously. Instead of picking random pixel values, you generate sizes using a mathematical ratio.
Modular Scale Math
A modular scale multiplies a base size by a ratio to produce each successive size. The most common ratios are:
| Ratio Name | Value | Example (base: 16px) |
|---|---|---|
| Minor second | 1.067 | 16, 17, 18, 19, 21 |
| Major second | 1.125 | 16, 18, 20, 22.5, 25 |
| Major third | 1.250 | 16, 20, 25, 31.25, 39 |
| Perfect fourth | 1.333 | 16, 21.3, 28.4, 37.9, 50.5 |
| Golden ratio | 1.618 | 16, 25.9, 41.9, 67.8, 109.7 |
Google's Material Design 3 type system uses a scale based on 16px body text with defined roles (display, headline, title, body, label). Tailwind CSS uses a fixed scale where each step is a specific rem value, as documented in the Tailwind spacing guide.
Converting Units for Your Scale
Design systems use rem (root em) units for accessibility. One rem equals the root font size, typically 16px. If a user changes their browser's default font size, rem-based sizes scale proportionally. Use the px to rem converter to translate pixel values to rem. The rem to px converter does the reverse when you need to verify visual sizes.
For em units (relative to the parent element's font size), the px to em converter handles the calculation. For viewport-relative sizing, the px to viewport converter converts pixels to vw/vh units for responsive typography.
Line Height and Letter Spacing
Font size is only one part of the type system. Line height (the vertical space between lines of text) and letter spacing (the horizontal space between characters) affect readability significantly.
- Body text line height: 1.4 to 1.6 for paragraphs, 1.2 to 1.3 for headings
- Letter spacing: 0 for body text, -0.01em to -0.02em for large headings, 0.05em to 0.1em for uppercase labels
Use the line height calculator to compute the exact pixel height of text blocks. The letter spacing calculator converts tracking values between em, px, and percentage. For word spacing, the word spacing calculator handles the same conversions for the space between words.
Font Size Conversion
Different design tools use different units. Figma uses pixels. CSS uses rem, em, px, pt, and percent. The font size converter translates between all of these. For modular scale generation, the modular scale calculator generates a complete type scale from a base size and ratio.
Spacing: The Grid System
Spacing systems bring rhythm to a layout. Instead of using arbitrary pixel values (13px here, 17px there), you define a spacing scale and use only those values. The most common approach is a base-4 or base-8 grid.
The 8px Grid
The 8px grid is the most widely adopted spacing system in web design. Every spacing value is a multiple of 8:
| Token | Value | Use Case |
|---|---|---|
| space-0 | 0px | No spacing |
| space-1 | 4px | Tight spacing (icon to label) |
| space-2 | 8px | Small spacing (related elements) |
| space-3 | 12px | Medium-small (form field padding) |
| space-4 | 16px | Default (paragraph spacing) |
| space-5 | 24px | Medium (section internal) |
| space-6 | 32px | Large (between sections) |
| space-7 | 48px | Extra large (section padding) |
| space-8 | 64px | Hero spacing (page sections) |
Some systems use 4px as the base unit, which gives finer control. The spacing calculator generates a complete spacing scale from any base unit and converts between px, rem, and em.
Converting Spacing to Rem
Like typography, spacing should use rem units for accessibility. A 16px gap in rem is 1rem. The px to rem converter handles this conversion for every spacing token. When a user increases their browser font size, rem-based spacing scales proportionally, maintaining the visual rhythm of your layout.
Color: The Palette System
A design system's color palette needs to be systematic, accessible, and consistent. Random hex values do not scale. You need a structured approach with primary, secondary, neutral, and semantic colors, each with a range of shades.
Generating Color Schemes
The color scheme generator creates harmonious color palettes from a single base color. It supports common harmony types: complementary, analogous, triadic, split-complementary, and tetradic. Pick a base color that represents your brand, and the tool generates the rest.
For extracting colors from an existing image (a logo, a photo, a brand asset), the palette from image tool pulls the dominant colors using median-cut quantization. This is useful when you need to build a palette that matches an existing visual identity.
Color Format Conversion
Design tools and code use different color formats. Figma uses HEX. CSS supports HEX, RGB, HSL, and named colors. The HEX to RGB converter and its reverse, RGB to HEX converter, handle the most common conversion. For HSL-based adjustments (useful for generating tints and shades), the HEX to HSL converter and HSL to HEX converter go both directions. The color converter handles all formats in one tool.
Accessibility: Contrast Checking
Color is not just about aesthetics. Text must be readable against its background. The contrast checker calculates the contrast ratio between two colors and tells you if it meets WCAG 2.2 AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1 for normal text, 4.5:1 for large text) standards.
For users with color vision deficiencies, the color blindness simulator shows how your palette looks to people with protanopia, deuteranopia, tritanopia, and other conditions. This is critical for ensuring your color system is not relying on color alone to convey information.
Gradients and Visual Assets
Design systems often include gradient definitions for buttons, backgrounds, and decorative elements. The gradient generator creates CSS gradients with a visual preview. You can export the CSS directly or download a PNG of the gradient.
For icon and asset generation, the SVG to PNG converter rasterizes vector icons at any resolution. The PNG to ICO converter generates favicon files. Use the image compressor to optimize all visual assets, and the batch resize tool to generate multiple sizes of each asset.
Putting It All Together: Design Tokens
Design tokens are the machine-readable representation of your design system. They encode every decision (font sizes, spacing values, colors, border radii) as named variables. Here is a simplified example in JSON:
{
"type": {
"fontSize": {
"body": "1rem",
"h1": "2.5rem",
"h2": "2rem",
"h3": "1.5rem",
"label": "0.875rem"
},
"lineHeight": {
"body": "1.5",
"heading": "1.2"
}
},
"spacing": {
"xs": "0.25rem",
"sm": "0.5rem",
"md": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"3xl": "4rem"
},
"color": {
"primary": {
"50": "#eef2ff",
"500": "#6366f1",
"900": "#312e81"
},
"neutral": {
"100": "#f5f5f5",
"500": "#737373",
"900": "#171717"
}
}
}
Every value in this token file was calculated using the tools above. The rem values came from the px-to-rem converter. The color shades came from the color scheme generator. The contrast ratios were verified with the contrast checker.
Real-World Examples
A startup building their first design system started with a 16px base and a perfect fourth ratio (1.333). Their type scale came out to 16, 21, 28, 38, 50, 66px. Converting to rem with the px to rem converter gave them 1, 1.313, 1.75, 2.375, 3.125, 4.125rem. They defined five spacing tokens (4, 8, 16, 24, 32px) and converted those to rem as well. The entire foundation took one afternoon to define and document.
A freelance designer creating a design system for a client used the palette from image tool to extract colors from the client's existing logo. The tool returned 6 dominant colors. She used the color scheme generator to expand those into a full palette with tints and shades, then verified all text-to-background combinations with the contrast checker. Two combinations failed WCAG AA, so she darkened the text color until the ratio passed 4.5:1.
An agency standardizing their component library used the modular scale calculator with a golden ratio (1.618) for their display typography and a major third (1.250) for body text. This gave them two scales: one for marketing pages with dramatic headlines, and one for the application UI with moderate hierarchy. The line height calculator helped them set consistent vertical rhythm across both scales.
Tips for Best Results
-
Start with one ratio and stick with it. Mixing ratios across a type scale creates visual inconsistency. Pick one ratio (major third is a safe default) and use it for all sizes.
-
Use rem, not px, for everything scalable. Font sizes, spacing, and even border radii should use rem. This ensures your design scales with the user's font size preference.
-
Document every token. A design system without documentation is just a folder of variables. Write down what each token is for, when to use it, and when not to.
-
Test your color palette for accessibility early. Finding out your primary color fails contrast checks after you have built 50 components is painful. Run the contrast checker on every color pair before you start building.
-
Generate assets at multiple sizes. Icons, logos, and favicons need to exist at several resolutions. Use the batch resize tool and batch converter to generate all variants from a single source file.
FAQ
What is a design token?
A design token is a named variable that stores a design decision, like a font size, spacing value, or color. Tokens replace hard-coded values in code and design files. Instead of writing font-size: 16px, you write font-size: var(--type-body). This makes the design system maintainable because changing the token updates every instance.
Should I use px or rem for my design system?
Use rem for anything that should scale with the user's font size preference: font sizes, spacing, and sometimes border radii. Use px for things that should not scale: border widths, shadows, and fixed dimensions like icon sizes. The px to rem converter handles the conversion.
What is the best modular scale ratio?
It depends on your design. Major third (1.250) is a safe default for application UI. Perfect fourth (1.333) works well for content-heavy sites with more dramatic hierarchy. Golden ratio (1.618) is dramatic and suits marketing pages. The Type Scale visual calculator lets you preview different ratios.
How many colors should a design system have?
A practical starting point is one primary color with 5 to 9 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900), one neutral palette with the same range, and 2 to 3 semantic colors (success, warning, error). That gives you roughly 30 to 40 color tokens, which is enough for most products without being overwhelming.
How do I check if my colors are accessible?
Use the contrast checker to test every text-to-background combination. WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For AAA compliance, the ratios are 7:1 and 4.5:1 respectively. The W3C WCAG 2.2 specification defines the exact requirements.
Related Tools
- Color Scheme Generator - Generate harmonious color palettes
- Gradient Generator - Create CSS gradients with live preview
- Palette from Image - Extract colors from any image
- Color Blindness Simulator - Test palette accessibility
- SVG to PNG - Convert vector icons to raster format
Conclusion
A design system built on mathematical foundations is more consistent, more accessible, and easier to maintain than one built on intuition. Define your type scale with a modular ratio, convert every value to rem, build your spacing on an 8px grid, generate your color palette systematically, and verify every contrast ratio. The calculators and tools on this site handle the math and conversion work so you can focus on the design decisions. Start with the px to rem converter and the color scheme generator, and you will have your foundations defined in an afternoon.
Images Tool Box Team
Writing about image tools, optimization, and web performance.
