Design System: Chantell Collins, MBA

Type

Merriweather for headers, Inter for everything else

A serif carries both heading tiers; a clean sans carries body copy and the eyebrow tier. Two families, each with one job, never mixed within a tier.

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

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

H1 · hero nameMerriweather Bold (700) · 42px / 50px

Chantell Collins, MBA

H2 · section headersMerriweather Bold (700) · 26px / 34px

Capabilities

Eyebrow · captions, labels, badgesInter Medium (500) · 13px / 16px, uppercase, +0.06em

Vienna-based · Available now

Body · copy, links, navInter Regular (400) · 16px / 24px, bold reserved for named phrases only

Thirteen years of high-stakes execution and multi-country delivery across global platforms, fintech, and autonomous systems.

Color

Five tokens, sourced from Chantell's own photos

Each hex was sampled from a real photo (Trieste, Malta, Della, a Vienna café). 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.

ink#2F241D

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

13.81:1 on bg

border#92725C

Borders, dividers, pill outlines, section background tints.

4.02:1 on bg

gold#8C6121

Clickable elements only: links, the primary CTA, unselected tabs.

4.99:1 on bg

terracotta#96482C

Hover color for clickable text, the secondary button, decorative dots.

5.89:1 on bg

Spacing

Seven steps, each with a named job

A short scale on purpose: seven values, each tied to specific components, not a long ladder of near-duplicates. New spacing reaches for the step whose job matches, not the nearest number.

Micro4px

Hairline offsets, icon-to-label gaps, badge vertical padding

Tight8px

Badge horizontal padding, list item gaps, pill container gaps

Base16px

Button horizontal padding, card content gaps, standard component margins

Medium24px

Stat card internal padding, mobile page gutters, heading-to-body margin

Large32px

Card grid gaps, desktop footer padding, block-to-block margin

Section48px

Section top and bottom padding, tablet/mobile

Macro64px

Desktop section top/bottom padding, sitewide

Shape & line

One line weight, one corner, one pill

No variants. A border is always 1px, a rectangle is always 8px-rounded, a pill is always fully rounded, including on hover, so nothing resizes when it's touched. And a full-width rule across the page is reserved for the nav and footer only: everywhere else, a section change reads through a background tint, not a line.

Line thickness: 1px, everywhere a border appears

Corner radius: 8px on every rectangle

Available now

Pill: fully rounded, border only, no fill

Components

Live states, not screenshots

Hover the elements below: these are the actual CSS rules from the site, not a static picture of them.

Buttons: fill inverts on hover, border stays the same color, nothing resizes. Padding is Base (16px) horizontal, Tight (8px) vertical, a 40px tap target at `text-base`. Keyboard focus gets its own 2px gold outline (`:focus-visible`), separate from hover. 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.

Capability tabs: folder style. Selected carries the card tint and dark bold ink, matched to the panel below it, no seam line. Unselected sits in gold, signaling still clickable. On mobile, only the selected tab shows above the swipeable panel; the others are reachable via the prev/next arrows or a swipe.

Selected panel content sits flush against the selected tab. Both carry the exact same tint fill, so the border between them disappears, no plain-bg card breaking the surface.

Pill / badge: border-only stroke, never on the text. Text stays full-strength ink, set in plain Body type (16px regular), not the eyebrow tier. ClickUp Expert

List bullet: terracotta, static, marks list items only, never text.

Carousel dot: two-state pagination for the stat, praise, and wins carousels. Selected is ink, unselected is border, never terracotta. Decorative only, never clickable; the arrows either side are the sole navigation control.

Separator glyph: one mark, one color, everywhere. Every divider, hero eyebrow, job title to company, and credential to institution, is the same terracotta middot. No pipes anywhere.

Card background tint: a flat, opaque `#F0EAE6`. Applied to cards only, stat cells, proof cells, the capability panel, never to the section wrapper, which stays plain `#F8F4F2`.

Plain `#F8F4F2`: every section wrapper

Tinted `#F0EAE6`: cards only

Proof/stat grids: each cell is its own individually-rounded card. No icons or logo marks, company names are plain bold body text. Heights matched across every card so short and long captions still line up.

€5M+

Annual 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, matching the Wins section's already-centered treatment.

          centered badges · H1 · credential pills · stat grid · CTA row
        

Governing rules

What keeps this one system instead of five

01Gold means an action is still available, not "this is currently selected." A tab you're already viewing is dark brown ink and bold, not gold, even though selecting a different one is itself a click.

02Body text is one flat color, no opacity tiers. Ink at reduced opacity reads as grey against this background even when it clears contrast on paper. Hierarchy comes from the type scale alone.

03Bold is selective, not systemic. Body defaults to regular weight; bold is reserved for job titles only, applied without changing color.

04The page background is plain `#F8F4F2`; cards carry the tint, not the sections around them. Section wrappers (Hero/Stats/CTA, Capability, Trajectory, Credentials/Systems, Wins) sit on the plain page color with no tint of their own. Cards inside them (stat cells, proof-table cells, the capability panel) carry the tint as a baked-in opaque color (`#F0EAE6`), giving the card real contrast against the page rather than blending into it.

05Pills carry a border, never a fill. Badges and chips are outline-only tags set in plain Body type (not the eyebrow tier), so they read clearly against either a plain or a tinted section background without needing a matching fill value.

06Hover never resizes anything. Buttons keep their border in the base state, so the fill-inversion hover swap never shifts layout.

07No sixth color. Every decorative or informational use draws from these five tokens; a new hue is never the fix for "this needs more visual interest."

08No dark mode. Confirmed unnecessary and dropped outright, not deferred: no toggle, no prefers-color-scheme branch, no shade scale kept around to support one.

09No off-scale spacing. Every margin, padding, and gap on the page maps to one of the seven named steps. Adjacent sections never stack independent top/bottom padding into a doubled gap either, each visual block is one section with one symmetric padding pair.

10Keyboard focus always gets its own visible state. Every link, button, and tab carries a 2px gold `:focus-visible` outline, distinct from mouse hover and never suppressed, so keyboard navigation never goes invisible.