Type Scale Configuration
Base Settings
Font size in pixels (typically 16px)
Musical interval ratio for scale
Number of heading levels (h1-h6 = 6 steps)
Round font sizes to 4px increments for design consistency
Typography
Quick presets for common font combinations
Font for body text and paragraphs
Font for headings (h1-h6)
Spacing Scale
Generate a consistent spacing scale for your design system.
The base unit determines the multiplier system. 4px is the most common choice.
Round all spacing values to the nearest 4px for consistency.
Spacing Steps
Standard steps: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96
These steps are automatically generated based on your base unit.
Shadows & Borders
Configure shadow and border radius values for your design system.
CSS box-shadow value
CSS box-shadow value
CSS box-shadow value
CSS box-shadow value
CSS box-shadow value
CSS box-shadow value
CSS box-shadow value
Accessibility Checks
Saved Configurations
0 / 3No saved configurations yet.
Save your current configuration to get started.
Live Preview
Example Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Colors
Page background color
Background Palette
Click a color to copy the hex value
Text color for body content
Body Text Palette
Click a color to copy the hex value
Text color for headings
Heading Text Palette
Click a color to copy the hex value
Color for links and accent elements
Accent Palette
Click a color to copy the hex value
Spacing Preview
Visual preview of your spacing scale values.
Example Usage
Examples with spacing-2 (8px), spacing-4 (16px), and spacing-6 (24px)
Shadows & Borders Preview
Visual preview of your shadow and border radius values.
Shadows
Border Radius
Combined Example
Export
/**
* type.ck71 Generated Theme
* Base: 16px | Ratio: 1.25 (Custom)
* Generated: 2026-01-02
*/
@import "tailwindcss";
@theme {
/* Typography Scale */
--font-size-base: 1.000rem; /* 16px */
--font-size-h1: 1.250rem; /* 20px */
--font-size-h2: 1.500rem; /* 24px */
--font-size-h3: 2.000rem; /* 32px */
--font-size-h4: 2.500rem; /* 40px */
--font-size-h5: 3.000rem; /* 48px */
--font-size-h6: 3.750rem; /* 60px */
/* Line Heights */
--line-height-normal: 1.5;
--line-height-tight: 1.2;
/* Letter Spacing */
--letter-spacing-normal: 0em;
--letter-spacing-tight: -0.02em;
/* Font Families */
--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
--font-family-heading: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
/* Font Weights */
--font-weight-body: 400;
--font-weight-heading: 700;
/* Color Palettes */
/* Background Colors */
--color-background-50: #fafafa;
--color-background-100: #f5f5f5;
--color-background-200: #e6e6e6;
--color-background-300: #d4d4d4;
--color-background-400: #b3b3b3;
--color-background-500: #ffffff;
--color-background-600: #d9d9d9;
--color-background-700: #bfbfbf;
--color-background-800: #a6a6a6;
--color-background-900: #8c8c8c;
--color-background-950: #737373;
/* Body Text Colors */
--color-body-text-50: #f9fafa;
--color-body-text-100: #f4f5f6;
--color-body-text-200: #e1e5ea;
--color-body-text-300: #ccd2db;
--color-body-text-400: #9dafc8;
--color-body-text-500: #1f2937;
--color-body-text-600: #040507;
--color-body-text-700: #000000;
--color-body-text-800: #000000;
--color-body-text-900: #000000;
--color-body-text-950: #000000;
/* Heading Text Colors */
--color-heading-text-50: #f9fafa;
--color-heading-text-100: #f4f4f6;
--color-heading-text-200: #e0e3eb;
--color-heading-text-300: #cad0de;
--color-heading-text-400: #95a8d0;
--color-heading-text-500: #111827;
--color-heading-text-600: #000000;
--color-heading-text-700: #000000;
--color-heading-text-800: #000000;
--color-heading-text-900: #000000;
--color-heading-text-950: #000000;
/* Accent Colors */
--color-accent-50: #f9fafb;
--color-accent-100: #f2f4f8;
--color-accent-200: #d8e2f3;
--color-accent-300: #bcceeb;
--color-accent-400: #6da2f8;
--color-accent-500: #3c83f6;
--color-accent-600: #0a5adb;
--color-accent-700: #0846aa;
--color-accent-800: #06327a;
--color-accent-900: #031e49;
--color-accent-950: #010a18;
/* Spacing Scale */
--spacing-0: 0rem; /* 0px */
--spacing-0.5: 0.25rem; /* 4px */
--spacing-1: 0.25rem; /* 4px */
--spacing-1.5: 0.5rem; /* 8px */
--spacing-2: 0.5rem; /* 8px */
--spacing-2.5: 0.75rem; /* 12px */
--spacing-3: 0.75rem; /* 12px */
--spacing-3.5: 1rem; /* 16px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-32: 8rem; /* 128px */
--spacing-40: 10rem; /* 160px */
--spacing-48: 12rem; /* 192px */
--spacing-56: 14rem; /* 224px */
--spacing-64: 16rem; /* 256px */
--spacing-72: 18rem; /* 288px */
--spacing-80: 20rem; /* 320px */
--spacing-96: 24rem; /* 384px */
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
/* Border Radius */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-DEFAULT: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
}
@source "../components/**/*.{vue,js,ts}";
@source "../pages/**/*.vue";