Design System: Chantell Collins, MBA

Font types

Merriweather carries both heading tiers; Inter carries body and nav. Never mixed within a tier.

headers (H1, H2): Merriweather, Georgia, serif

body, nav: Inter, system-ui, -apple-system, sans-serif

H1: hero nameMerriweather Bold (700), 42px / 50px, sentence case

Chantell Collins, MBA

H2: section headersMerriweather Bold (700), 26px / 34px, sentence case

Capabilities

Body: copy, links, nav, captions, labelsInter Regular (400), 16px / 24px, sentence case with bold reserved for named phrases and label introductions

A delivery and operational excellence leader who bridges C-suite vision and cross-functional execution.

Color tokens

Gold is the only clickable signal on the page, never on a bullet, a stat, or plain body text.

bg#F8F4F2

Page background and card fill. Every surface, no second fill color.

border#92725C

Borders, dividers, pill outlines, section background tints.

4.02:1 on bg

gold#8C6121

Clickable elements color for links, the primary CTA, and unselected tabs.

4.99:1 on bg

terracotta#96482C

Hover color for clickable text, the secondary button, list bullets.

5.89:1 on bg

ink#2F241D

All headings and body copy. One text color, no opacity variants.

13.81:1 on bg

Spacing scale

Five values, each tied to specific components. Use the step whose job matches, not the nearest number.

Tight8px

Hairline offsets, badge padding, card grid gaps

Base16px

Button padding, stat card internal padding, card content gaps, standard component margins

Medium24px

Mobile page gutters, heading-to-body margin

Large32px

Block-to-block margin, column gaps

Section96px

Section top padding and footer padding, all screen sizes

Shape and style

Border 1px, rectangle corners 8px, pills fully rounded, none changing on hover. Full-width rules only on nav and footer; sections separate by tint.

Line thickness: 1px, everywhere a border appears

Corner radius: 8px on every rectangle

Available now

Pill: fully rounded, border only

Components and hover states

These are the live CSS rules from the site.

Buttons: fill inverts on hover, border unchanged. Padding: 16px (Base). Focus: 2px gold outline. Book 15-min intro Connect on

Text link: permanent gold and underline, terracotta on hover. Won the Awwwards site of the day.

Nav: hidden at page load, slides in and stays fixed once the page has scrolled 100px.

Pill: border only, plain Body type, full-strength ink. PMO governance

List bullet: terracotta, 6px, the one dot size everywhere (bullets, carousel dots, tab dots). Hanging indent: 8px gap, text starts 14px in. Item spacing: 16px.

Carousel control: arrow, dots, arrow, centered, 16px (Base) between arrows and dots, 8px (Tight) between dots. Arrows use the system triangle in gold, terracotta on hover, with 16px padding. Dots are 6px: ink selected, border unselected, each a direct control, shared with the Capabilities tabs.

Capabilities tabs on phones: a swipeable strip. Each tab is the row width minus 40px, so the active tab shows in full and 32px (Large) of the next one peeks out. Tapping a tab, the arrows, the dots, or swiping the panel brings the active tab to the left edge; swiping the strip itself only browses. From 640px up, the tabs that fit show on one row and the arrows and dots move the window.

Arrow: one triangle everywhere, 16px base by 8px tall. Right means next, left means previous. Gold on its own, white set against a solid gold fill (the video play button).

Plain `#F8F4F2`: every section wrapper

Tinted `#F0EAE6`: cards only

Proof/stat grids: each cell is its own rounded card, a 1:1 square from sm up, with a 1px border. On phones, cards share a 176px minimum height with 24px padding, caption in Body type. No icons; a small grayscale logo (32px) sits above the caption, which names the company in a full-sentence link.

€5M+ portfolio

H1 2026 portfolio owned, across five PMs and 30+ platform rollouts and upgrades concurrently.

Serve Robotics won the Awwwards site of the day.

Hero layout: everything above the first CTA is centered.

          centered H1, two pills, stat grid, CTA row
        

System rules

01Gold means an action is still available: A tab you're already viewing is bold ink, not gold.

02Text is flat color: Ink stays full-strength, with no opacity variants, so hierarchy comes from the type scale. Bold is for headings, card titles, the selected tab, the footer copyright line, and label colons (Rule 10). Italic is for quotations only.

03Cards carry the tint, not the sections: Section wrappers stay plain `#F8F4F2`; only cards (stat, proof, capability panel) use `#F0EAE6`.

04Pills carry a border, never a fill or a dot: Dots appear only as list bullets and carousel dots.

05Hover never resizes anything: Buttons keep their border in the base state.

06No sixth color: Everything draws from the five tokens.

07No dark mode.

08No off-scale spacing: Every margin, padding, and gap uses one of the five steps, except two deliberate values: the 9px list bullet nudge and the Meet portrait’s reserved padding. Each visual block is one section with one symmetric padding pair.

09Keyboard focus always gets its own visible state: Every link, button, and tab has a 2px gold :focus-visible outline, never suppressed.

10Commas separate; a colon only introduces: No pipes or middots. Use a colon only to introduce or give a status, with the word and colon bold: Status: Applied. Never mid-sentence.

11Sentence case: Capitalize the first word and genuine proper nouns (Chantell, Serve Robotics, IBM, PMI-CPMAI), in the hero lines, headers, and body copy. "AI & operational excellence" is correct; "AI & Operational Excellence" is not.