Brand system catalog

Design System Inspiration of Marketing Rebels

A warm, confident studio voice built around a single brand pink, oversized pastel color blocks, and two parallel button vocabularies. This page is generated from the DESIGN.md extracted for Marketing Rebels.

01 · Palette

Color Palette

One saturated brand pink holds the system together. Oversized pastel blocks provide rhythm. Everything else is quietly neutral.

Primary
Rebel Pink
#e30074
Primary CTA, brand logotype, inline link underlines, active accordion markers, the full-width CTA banner.
Rebel Pink Focus
#cc004a
Focused form borders and shared error color — the brand paying attention.
Secondary & Accent — Pastel Color Blocks
Sunflower Yellow
#fdc53e
Oversized flat block in 2-column hero and content rows.
Bubblegum Pink
#f9cbe3
Soft tinted block — pink-adjacent without competing with the Rebel Pink primary.
Pastel Mint
#c8efe4
Third pastel variant to vary the rotation on services rows.
Pastel Peach
#f7d9c2
Fourth pastel variant — completes the color-block rotation.
Surface & Background
Canvas White
#ffffff
The dominant page canvas — every content section, card, form sits on this.
Input Neutral
#f3f4f5
2px border on text inputs and textareas — almost invisible but defined.
Hairline Grey
#ececec
1px borders on cards, ghost buttons, divider rules.
LMS Dark Nav
#000000
Slim black nav on the learning platform — reserved for the LMS environment only.
Neutrals & Text
Charcoal Ink
#3a3b3c
Heading color, footer background, primary body copy.
Slate Grey
#444444
Ghost button text — one step lighter than Charcoal.
Reading Grey
#555555
Body copy on long-form pages where Charcoal would feel too heavy.
Input Grey
#6a6a6a
Placeholder + filled text inside form fields; muted inline links.
02 · Typography

Typography Scale

Inter across the board. Weight-carried hierarchy (300/500/600/700/900) instead of extreme sizes. Uppercase reserved for eyebrows and marketing button labels.

Display H1 — 36.8 / 600 / 1.20
Unlock Your Next Role With Our Marketing Courses
H2 — 32 / 600 / 1.30
What We Offer, Results That Matter
H3 — 28 / 500 / 1.20
Marketing Corporate Training Programs
H4 — 24 / 600 / 1.30
Card cluster title
H5 — 21.6 / 600 / 1.20
Feature / step title
Lead — 20 / 300 / 1.40
Transform your marketing team into strategic, creative, data-savvy leaders who drive real business outcomes.
Body Base — 16 / 400 / 1.50
Default paragraph copy sits in this weight-400 16px treatment across pages.
Body Light — 16 / 300 / 1.40
Light alternate body copy for quiet supporting text.
Long-Form Body — 15 / 400 / 1.70
Reading copy on article and resource pages runs at a relaxed 1.70 line-height — a deliberate editorial voice.
Link Small — 14 / 400 / 1.57
Inline link in footer and UI rows
Button Bold — 13.5 / 700 / 3.04 / uppercase
Book a consultation
Eyebrow Mega — 12.8 / 900 / 1.10 / 0.256 / uppercase
What We Do
Micro Uppercase — 9.6 / 700 / 0.24 / uppercase
Latest version
03 · Buttons

Button Variants

Two parallel systems: fully-rounded pills for marketing pages, tighter rectangles for UI. A form uses rectangles throughout; a hero uses pills throughout.

Primary Pink Pill
#e30074 bg · uppercase 13.5px / 700 white · 1600px radius (fully rounded) · soft ambient shadow
Primary Pink Rectangle
#e30074 bg · 13px / 700 white · 6px radius · 8px × 14px padding — LMS & forms
Soft Pink Pill
#f9cbe3 bubblegum bg · #e30074 text · 17px / 700 sentence case · 1600px radius · 14px × 30px padding
Ghost White Rectangle
White bg · #444444 text · 1px #eeeeee border · 5px radius · 12px × 17px padding
Ghost Light-Grey Pill
#f3f4f5 bg · Charcoal text · 14px / 500 · rounded pill — LMS secondary
04 · Cards

Cards & Containers

No drop shadows except under the Primary Pink Pill. Cards separate through 1px hairline borders and generous spacing.

Editorial
Editorial Article Card
16:9 thumbnail, 16px border radius, 1px hairline border, uppercase eyebrow, 21.6px weight 600 title.
Latest version
Course Thumbnail Card
4:3 thumbnail · hot-pink outlined pill badge · 17.6px weight 700 title
Pastel color block
Image replacement
05 · Signature layouts

Pastel 2-Column Rows

The brand's signature content row — text on one side, a solid pastel color block on the other. Alternating sides build rhythm across a page.

Consultancy

Marketing Consultancy

Straightforward, experienced support to help you solve specific marketing problems, sharpen your strategy, and get better results.

Mentoring

1 to 1 Mentoring

Practical, no-nonsense support to help you think clearly, make better decisions, and move forward with confidence.

Training

Marketing Corporate Training Programs

Build your team's marketing confidence and capability with training that broadens their skills.

Signature display
Marketing
Marketing
Marketing
06 · LMS patterns

Module Accordion & Price Rail

The learning platform uses a denser UI vocabulary — 6px rectangle buttons, tighter spacing, a fixed-price right rail, and a collapsible module accordion.

▸ Module 1. Welcome 7m
▸ Module 2. Introduction to SEO Content Writing 6 activities · 29m 43s
▸ Module 3. Understanding Search Intent 4 activities · 25m 44s
▸ Module 4. Keyword Research for Beginners 6 activities · 33m 39s
£100
Lifetime access
  • 10h 24m total
  • Intermediate level
  • 9 modules
  • 45 activities
  • Long course
07 · Forms

Form Elements

Quiet input chrome — 2px Input Neutral borders, 7.5px radius, Rebel Pink Focus on focus and error.

Focused border in Rebel Pink Focus (#cc004a)
Please enter a valid phone number
Signature banner

Need help? We've got you.

Every marketing page ends with this hot-pink CTA banner strip before dropping into the charcoal footer. The two colors meet at a hard edge — no gradient between them.

08 · Spacing

Spacing Scale

8px base unit. 16px and 32px are the template's universal rhythm constants — they appear on every page.

1px
Borders
4px
Icon-to-text gap
8px
Base unit · input padding
12px
Card internal padding
16px
Paragraph rhythm — universal constant
20px
Sub-section spacing
24px
Card-to-card gap
32px
Section group break — universal constant
48px
Section padding-top
96px
Vertical rhythm between hero and content
09 · Radius

Border Radius Scale

Two signature shapes: fully-rounded 1600px pills for marketing CTAs, tight 5-6px rectangles for UI.

5-6px
Primary rectangle, LMS buttons
7.5px
Text inputs, selects
8px
LMS accordion, price rail
16px
Editorial cards, pastel blocks
32px
Oversized decorative containers
1600px
Marketing primary pill
10 · Depth

Elevation & Depth

Deliberately flat. The only shadow in the system is the soft ambient lift under the Primary Pink Pill button.

Level 0 — Surface
No shadow, no border. Page canvas, pastel blocks.
Level 1 — Hairline
1px solid #ececec or #eeeeee. Cards, ghost buttons.
Level 2 — Ambient Lift
rgba(0,0,0,0.12) 0 0 10px — pink pill only.
Level 3 — Pastel Block
Color-surface shift replaces shadow.
Level 3 — Warm Block
Alternate pastel carries the same role.