Select Page
Brand Design System

The Ageless IQ Lab

Visual Style Guidelines & Developer Specifications

Brand Overview

The Essence

The Ageless IQ Lab represents the intersection of clinical precision and luxurious self-care. Our design language is minimal, intelligent, and calm.

Brand Voice

Tone & Mood

Keywords: Elegant, Intelligent, Calm, Minimal.

We speak with authority but without arrogance. We are the "smart friend" in the beauty industry. Avoid clutter. Use whitespace generously to convey luxury and breathability.

01. Color Palette

Brand Colors

Primary colors define the structure, while accent colors guide interaction.

Linen Cream
#F9F6F0
Backgrounds
Botanic Umber
#3E4A3B
Text & Primary UI
Brushed Gold
#CBB47A
Accents & Borders
Clay Taupe
#D7C9B3
Subtle Backgrounds
Rose Beige
#EBDDD4
Secondary Backgrounds
02. Typography

Font System

Playfair Display

Used for Headlines (H1-H5). Weights: 600, 700.


Heading 1: Ageless Intelligence

Heading 2: The Science of Beauty

Heading 3: Clinical Precision

Heading 4: Featured Products

Heading 5: Ingredients

Poppins

Used for Body, UI, and Buttons. Weights: 400, 500.


Body Text (18px/1.7): This is an example of the body paragraph style. It should be legible, with generous line height to promote a calm reading experience. The color is #3E4A3B.

Small Text (15px): Used for metadata, footnotes, or legal text.


Inline Text Link Example
03. UI Components

Buttons & Cards

Button System

Buttons feature a 14px border radius and soft shadows.

Spacing Rules

  • Section Padding: 8-10% Vertical
  • Card Padding: 30-40px
  • Global Radius: 12-16px

Card System

Product Feature

Cards use a Clay Taupe tint background (5-8% opacity) with a very subtle Brushed Gold border. This creates a "lifted" luxury feel without heavy shadows.

Learn More →
04. Visual Assets

Imagery & Iconography

Mood Direction

[Placeholder for Lifestyle Image]

Tone: Natural light, soft shadows, skin textures visible (no over-smoothing).
Composition: Minimal props. Focus on the product or the result.

Iconography

Leaf
Drop

Use thin, refined strokes (1px - 1.5px). Icons should be mono-color (#3E4A3B) and enclosed in circles or freestanding with generous padding.

05. Implementation

CSS Variables & Accessibility

Copy these variables to your global stylesheet or Divi Theme Options > Custom CSS.

:root { /* Colors */ --color-linen-cream: #F9F6F0; --color-botanic-umber: #3E4A3B; --color-clay-taupe: #D7C9B3; --color-brushed-gold: #CBB47A; --color-rose-beige: #EBDDD4; /* Typography */ --font-heading: 'Playfair Display', serif; --font-body: 'Poppins', sans-serif; /* Spacing & Radius */ --radius-primary: 14px; --radius-secondary: 12px; --padding-section: 8vh 0; } /* Accessibility Note: */ /* #3E4A3B on #F9F6F0 passes AAA standard for contrast. */ /* #F9F6F0 text on #3E4A3B buttons passes AAA standard. */ /* Ensure #CBB47A (Gold) is used for large text or borders only, not body text. */