MethodSep 10 · 4 min
Why 28 days?
Not a sprint, not a vague 'someday' — the length of a habit becoming a routine, and a routine becoming a system.
Read articleAdmin · InternalVersion 1.0
28·DAY·CHALLENGE
Brand Guidelines
The 28 Day Challenge design system. Meaningful change does not require changing your entire life overnight — it starts with one day, then another. Everything we ship should feel like that: motivational, modern, credible, and quietly energetic.
01 — Color
One teal, one gold, endless black
Momentum Teal is the brand's engine — pulled straight from the logo's rule. Win Amber exists only to celebrate streaks and completions. Everything else is the black canvas and white ink.
Momentum Teal (primary)
The primary color. Buttons, progress, links, the signature rule.
50
Lightest tint — dark-mode text on teal
100
Tint backgrounds, tags
200
Supporting text on dark
300
Text accent on dark (AA)
400
PRIMARY — logo teal, buttons, progress
500
Hover / pressed primary
600
Deep accent, scrollbar hover
700
Chart depth
800
Book covers, gradients
900
Cover gradients, glows
Win Amber (accent)
Reserved exclusively for streaks, wins, and celebration. Never for navigation or body UI.
300
Soft celebration tint
400
ACCENT — streaks & wins
500
Icon fills on light surfaces
600
Border accents
Neutrals & surfaces
The canvas layer. Black page, near-black cards, hairline borders.
Black
Page background — always pure black
Card
Card & panel surface
Secondary
Track fills, hover surfaces
Border
Hairline borders (1px)
White
Ink — headings and primary text
Accessible combinations
Every approved pairing, measured against WCAG. Never place white text on Teal 400 (3.9:1 — fails AA).
| Combination | Sample | Contrast | WCAG | Use for |
|---|---|---|---|---|
| White on Black | Aa 28 | 21.0:1 | AAA | Primary reading combination |
| Black on Teal 400 | Aa 28 | 5.3:1 | AA | Buttons, chips, active days |
| Teal 300 on Black | Aa 28 | 7.5:1 | AAA | Accent text on dark |
| Teal 400 on Black | Aa 28 | 5.3:1 | AA | Kickers, category labels |
| White/60 on Black | Aa 28 | 7.0:1 | AAA | Body copy on dark |
| Amber 400 on Black | Aa 28 | 11.3:1 | AAA | Streaks, celebration text |
| Black on Amber 400 | Aa 28 | 11.3:1 | AAA | Win badges, streak fills |
02 — Typography
Heavy type that moves
Montserrat carries the voice — black weight, uppercase, tight tracking, always underlined by the teal rule. Inter does the quiet work of long-form reading in the Reader.
Display
One day. Then another.
Heading 1
The 28 Day Challenge
Heading 2
Which challenge is yours?
Heading 3
Systems beat motivation
Body Large
Meaningful change does not require changing your entire life overnight. It starts with one day, then another.
Body
Each day brings one focused lesson and one concrete action. By day 28 you haven't just read about the work — you've built a system for it.
Caption / Label
Day 12 of 28 · Marketing
Kicker
Start here
Buttons
Always pill-shaped, always bold uppercase with wide tracking. Primary is teal with black text; secondary is a hairline ghost. Never white text on teal.
Form fields
Near-black inputs with hairline borders. Focus draws the teal ring — never change border color alone. Labels are small, bold, uppercase.
Teal ring + teal border on focus. Helper text stays at white/40.
03 — Components
The reusable kit
Every surface the brand touches — storefront, customer portal, Digital Reader, audiobook experience, dashboards — is assembled from these parts.
Challenge & product cards
Marketing
The 28 Day Marketing Challenge
Build a marketing engine from positioning to pipeline in 28 focused days.
View Challenge
Companion BookFrom $14.99
The Network Effect
Turning your time online from distraction into your most valuable professional asset.
View BookProduct
The 28 Day Marketing Challenge
Choose a format — every path includes the Daily Email Challenge.
Paperback — $24.99
Digital Reader — $21.99
Daily Email — $16.99
Audiobook — $29.99
Every challenge listing site-wide — catalogs, related-challenge modules, and recommendation grids — renders the cover-first card above (ChallengeListCard): real book cover on the left, category eyebrow, title, blurb, and CTA on the right. Build new pages with this card.
Book covers
28 Day Challenge
Marketing
The 28 Day Challenge
28 Day Challenge
Sales
The 28 Day Challenge
28 Day Challenge
SEO
The 28 Day Challenge
Companion
RevOps'd to Death
The 28 Day Challenge
Progress, day counters & streaks
12
of 28
Challenge progress43%
20
12 day streak
4567
Quotes, motivation & testimonials
“I stopped waiting for motivation and started counting days. By day 28 the system was just... running.”
Dana R.
Finished the Marketing Challenge
Day 12
Small wins count
You don't need a perfect day. You need five honest minutes — then another five tomorrow.
“Twenty-eight days sounded intimidating. It turned into the most manageable month of my career.”
Marcus T.
RevOps Challenge graduate
Resources & editorial
Positioning Worksheet
PDFThe day-5 exercise, printable.
Outreach Email Templates
DOCX12 copy-and-send templates from week two.
Digital Reader
Day 12 of 28
43%
Today's lesson
Systems beat motivation
Motivation shows up when it wants to. Systems show up every day. Today you stop relying on how you feel and start relying on what you've built.
Your action for today: pick the one task you've been avoiding all week and reduce it to its first five minutes. Do those five minutes now — the rest gets easier once you're moving.
Audiobook player
28
The 28 Day Challenge
Day 12 — Build the System
Paused
12:044:36:12
1.25x
Dashboard widgets (customer & challenge)
Days completed
12
of 28
Current streak
12
personal best: 14
Day 13 of 28
Today's action
Challenge progress43%
Calls-to-action
One day. Then another.
Every challenge starts with a single daily action. Yours starts today.
04 — Foundations
The rules under the surface
Geometry, depth, rhythm, and the motifs that make the brand move — progress bars, day counters, the teal rule, ghost numerals.
Border radius
Sleek and geometric, like the logo. Small radii everywhere; pills only for buttons, chips, and progress tracks.
rounded-sm
Sharp — tags, small chips
rounded-md
Default — inputs, mini covers
rounded-lg / xl
Cards, readers, players
rounded-full
Pills — buttons, progress, badges
Shadows & depth
On a black canvas, depth is light, not darkness: a soft black drop for elevation, and the teal glow for meaning — active states, progress, celebration.
shadow-card
Resting cards
shadow-lift
Hover / lifted
shadow-glow
Active / celebration
Spacing system
A strict 4px grid. Inside cards: 24px padding. Between grid cards: 16px. Section rhythm: 80–112px vertical. Generous space is part of the optimism.
4px
8px
16px
24px
40px
80px
Iconography
Lucide line icons only — 1.5–2px stroke, geometric, never filled (except celebration icons). Teal for meaning, white/40 for chrome. Amber is reserved for the flame and win states.
Streak (amber only)
Completion
Progress
Daily action
Reading time
Momentum
Illustration & photography direction
Do
- Real people mid-action — walking, writing, building — never posed
- Dark, high-contrast treatments that sit on the black canvas
- Teal duotone / teal-wash grading for brand imagery
- Abstract progress visuals: bars, steps, arcs, streaks of light
Don't
- Generic stock: sunrise clichés, jumping suits, handshakes
- Light backgrounds with black text (breaks the canvas)
- Filled illustrations competing with the type
- More than one accent color per composition
Brand motifs
The visual vocabulary of “one day, then another.” Use these instead of decorative noise.
The teal rule
A 2px teal line under key words — the logo's underline, everywhere.
Ghost numerals
Oversized, near-invisible 28/14 numerals behind cards.
Day chips
“Day 12 of 28” — progress made personal and countable.
Glow halos
Soft radial teal light behind heroes and active states.
Navigation
- Sticky, transparent over the hero; gains blur + hairline border on scroll
- Small uppercase links with 0.18em tracking; white/55 → white on hover
- One primary pill action, always top right
Footer
- Hairline top border, pure black, quiet
- Logo large; two-column link lists; white/70 links
- Baseline row: tiny uppercase legal line + brand mantra
Mobile UI
- 16px side padding; cards stack single-column
- Hamburger sheet menu mirrors desktop order; pill CTA inside
- Thumb-sized pills (min 44px targets); Reader type scales to 16px+
- Design system identical on mobile app — same tokens, same components
