Carper Creative Style Guide

Carper Creative Style Guide

For Elementor recreation (branding consistency).

Primary
#4f43ae
Secondary
#2E2C4F
Text
#4A4A68
Accent
#EDE9FF
White
#FFFFFF

Typography Guide

Font Role Font Family Size/Weight Line Height Letter Spacing Usage Example
Primary Poppins 64px / 700 1.2 -0.5px Main page titles (H1) Heading 1
Secondary Poppins 48px / 600 1.3 0px Section headings (H2) Heading 2
Body Text Open Sans 18px / 400 1.6 0px Paragraphs, lists Body text
Accent Poppins 16px / 500 1.4 0.5px Labels, captions Accent text

Light Mode Color Palette

Type Hex Code Swatch Usage
Primary #4f43ae
Buttons, primary accents
Secondary #2E2C4F
Headings, footer
Text #4A4A68
Body text (softer than secondary)
Light Accent #EDE9FF
Borders, subtle backgrounds
White #FFFFFF
Backgrounds, button text

Dark Mode Color Palette

Type Hex Code Swatch Usage
Dark Background #1A1835
Dark sections, footers
Text on Dark #FFFFFF
Headings/text on dark BG
Secondary Text #EDE9FF
Subtle text on dark BG
Primary Accent #4f43ae
Buttons (same as light mode)

Buttons & Interactive States

Element Normal State Hover State Swatches Notes
Primary Button #4f43ae
Text: #FFF		 #3A3283
Text: #FFF
Normal
Hover
 Rounded corners (6px), shadow on hover
Secondary Button #2E2C4F
Text: #FFF		 #1A1835
Text: #FFF
Normal
Hover
 10% lighter on hover
Text Link #4f43ae
Underline: none		 #3A3283
Underline
Normal
Hover
 Semi-bold (600)

Dark Mode Interactive Elements

Buttons:
Hover States:
Links:

Design Principles

  • Contrast: Text meets WCAG AA standards (4.5:1 on white).
  • Hierarchy: Primary purple (#4f43ae) draws attention to actions.
  • Consistency: Hover states are 15-20% darker than normal.