BRAND GUIDELINES

Atomik Brand Book

Our visual identity system designed to maintain consistency across all touchpoints.

Logo

The Atomik logo represents energy, precision, and transformation. We have two logo variations: the short form "Atomik" and the full form "Atomik Growth".

Full Logo

Atomik IconAtomik Growth

Full Logo (Dark Background)

Atomik IconAtomik Growth

Full Logo (Light Background)

Short Logo

Atomik IconAtomik

Short Logo (Dark Background)

Atomik IconAtomik

Short Logo (Light Background)

Icon Mark

Icon White

Icon (White)

Icon Black

Icon (Black)

Icon on Gold

Icon on Gold

Icon on Blue

Icon on Blue

Clear Space

Maintain a minimum clear space around the logo equal to the height of the icon mark. This ensures the logo maintains its visual impact.

AtomikAtomik Growth
1x
1x
1x
1x

Logo Usage

Do
  • •Use the full logo "Atomik Growth" when space permits
  • •Use the short logo "Atomik" for compact spaces
  • •Use the icon mark alone for social profiles and favicons
  • •Maintain adequate contrast with backgrounds
  • •Keep the logo proportions consistent
Don't
  • •Stretch or distort the logo
  • •Change the logo colors outside brand palette
  • •Add effects like drop shadows or gradients
  • •Place on busy or low-contrast backgrounds
  • •Rotate or angle the logo

Download Assets

Download logo files for use in your projects.

Icon White
Icon (White)
Icon Black
Icon (Black)

Color Palette

Our dual-mode color system adapts to user preferences while maintaining brand consistency.

Dark Mode

#050505

Onyx

--bg-primary

#121212

Charcoal

--bg-secondary

#E5E5E0

Bone

--text-primary

#D4B46E

Champagne Gold

--gold-base

#8A7545

Antique Gold

--gold-dim

rgba(212,180,110,0.05)

Gold Glow

--gold-glow

Light Mode

#FAFAF7

Ivory

--bg-primary

#F5F5F3

Surface

--bg-surface

#1C1917

Ink

--text-primary

#7078D9

Periwinkle

--gold-base

#C5C9F0

Lavender

--gold-dim

rgba(143,152,255,0.1)

Blue Glow

--gold-glow

Typography

Our typography system pairs elegant serif headlines with clean sans-serif body text.

Primary / Headlines

Cormorant Garamond

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Weight: 400 (Regular), 600 (Semibold), 700 (Bold)

Style: Normal, Italic

Use: Headlines, Titles, Navigation

Secondary / Body

DM Sans

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Weight: 400 (Regular), 500 (Medium), 700 (Bold)

Style: Normal

Use: Body text, Buttons, Labels

Type Scale

9xlDisplay
5xlHeading 1
3xlHeading 2
xlHeading 3
baseBody text for paragraphs and general content.
xsLabels & Captions

Buttons

Button styles for different contexts and actions.

Primary Button

Font: DM Sans, 12px, Bold, Uppercase

Letter Spacing: 0.15em

Padding: 12px 24px

Border Radius: Full (9999px)

Outline Button

Border: 1px solid accent color

Background: Transparent

Hover: Filled with accent color

Components

Reusable UI components that maintain visual consistency.

Card

Card Title

Cards use subtle borders and backgrounds that adapt to the current theme. On hover, they elevate slightly.

Navigation Pill

HomeServicesContact

Badges

PodcastingFeatured

Input Field