GET IN TOUCH

We'd Love to Hear From You

Have questions about a service or need assistance customizing your clean? Send us a message below.

tune

Theme Customizer

Theme Presets

Quick Palette Selector

Colors

primary ScaleDefault Template

expand_more

Paste CSS Code Block

Shades Preview

--color-primary-50

--color-primary-100

--color-primary-200

--color-primary-300

--color-primary-400

--color-primary-500

--color-primary-600

--color-primary-700

--color-primary-800

--color-primary-900

--color-primary-950

secondary ScaleDefault Template

expand_more

accent ScaleDefault Template

expand_more

natural ScaleDefault Template

expand_more

Typography

Preset Pairings

Heading Font

Body Font

Border Radius

Style Presets

Base Radius (DEFAULT)

LG Radius

XL Radius

Spacing & Layout

Grid Gutter

--spacing-gutter

Base Spacing Unit

--spacing-unit

Container Max Width

--spacing-container-max

Section Gap

--spacing-section-gap

Export Theme

Generated Stylesheet

/* --- CUSTOMIZED THEME VARIABLES --- */
:root {
  /* PRIMARY SCALE (primary) */
  --color-primary-50: #f0f7f7;
  --color-primary-100: #dcf0ef;
  --color-primary-200: #bee2e1;
  --color-primary-300: #a2cfce;
  --color-primary-400: #7aa5a5;
  --color-primary-500: #3b6565;
  --color-primary-600: #224d4d;
  --color-primary-700: #0b3b3b;
  --color-primary-800: #002424;
  --color-primary-900: #001818;
  --color-primary-950: #000c0c;

  /* SECONDARY SCALE (secondary) */
  --color-secondary-50: #f5f7f6;
  --color-secondary-100: #e5eae7;
  --color-secondary-200: #d8e5e1;
  --color-secondary-300: #bcc9c6;
  --color-secondary-400: #8a9996;
  --color-secondary-500: #55615e;
  --color-secondary-600: #434e4b;
  --color-secondary-700: #353e3c;
  --color-secondary-800: #282e2c;
  --color-secondary-900: #1c201f;
  --color-secondary-950: #0f1110;

  /* ACCENT SCALE (accent) */
  --color-accent-50: #fff7f5;
  --color-accent-100: #ffede6;
  --color-accent-200: #ffd3c2;
  --color-accent-300: #ffab8f;
  --color-accent-400: #ff7f50;
  --color-accent-500: #f86835;
  --color-accent-600: #e04f1c;
  --color-accent-700: #b83a10;
  --color-accent-800: #922d0d;
  --color-accent-900: #77260e;
  --color-accent-950: #421104;

  /* NATURAL SCALE (natural) */
  --color-natural-50: #f9f9f8;
  --color-natural-100: #f3f4f3;
  --color-natural-200: #edeeed;
  --color-natural-300: #e8e8e7;
  --color-natural-400: #e2e2e2;
  --color-natural-500: #d9dad9;
  --color-natural-600: #c0c8c7;
  --color-natural-700: #717978;
  --color-natural-800: #404848;
  --color-natural-900: #1a1c1c;
  --color-natural-950: #0d0e0e;

  /* SPACINGS & DIMENSIONS */
  --spacing-gutter: 24px;
  --spacing-unit: 8px;
  --spacing-container-max: 1200px;
  --spacing-section-gap: 80px;

  /* BORDER RADIUS */
  --radius-DEFAULT: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* FONTS */
  --font-h1-desktop: "Plus Jakarta Sans", sans-serif;
  --font-h1-mobile: "Plus Jakarta Sans", sans-serif;
  --font-h2: "Plus Jakarta Sans", sans-serif;
  --font-h3: "Plus Jakarta Sans", sans-serif;
  --font-body-md: "Inter", sans-serif;
  --font-body-lg: "Inter", sans-serif;
  --font-label-caps: "Inter", sans-serif;
}

We'd Love to Hear From You

Send us a Message

Theme Customizer

Theme Presets

Colors

Typography

Border Radius

Spacing & Layout

Export Theme