Design System

Design

The single source of truth for the Because You Are Busy brand identity, design tokens, UI elements, and site structure. Everything needed to build and extend the site consistently.

Explore system Site sections

Font Family

Inter

Primary typeface for all text

Base Unit

8px

Spacing grid foundation

Border Radius

8px

Default corner rounding

Sections

Available site sections

Logo

Our logo is the cornerstone of the brand identity. Use it consistently across all touchpoints.

Logomark (Square)

Light background

Dark background

Horizontal Logo

Light background

Dark background

Minimum Size

48px width minimum for digital applications

Clear Space

2x the logomark height around all sides

File Format

SVG for web, PNG for social and print

Colors

Our color palette is clean, professional, and accessible. Each color has a specific role.

Brand Colors

Primary

Backgrounds, subtle accents, decorative fills

#999999

Accent

Buttons, headings, primary CTAs

#000000

Background

Page backgrounds, content areas

#FFFFFF

Text Primary

Body text, headings

#000000

Link

Links, secondary text, navigation

#666666

Extended Palette

Gray 50

#F5F5F5

Gray 100

#E5E5E5

Gray 200

#CCCCCC

Gray 225

#C0C0C0

Gray 250

#BBBBBB

Gray 300

#999999

Gray 350

#949494

Gray 400

#777777

Gray 450

#767676

Gray 500

#666666

Gray 550

#595959

Gray 600

#444444

Gray 700

#333333

Gray 800

#1A1A1A

Gray 900

#000000

Accessibility Contrast Ratios

Accent on White: Accent on White
Link on White: Link on White
Text on Primary: Text on Primary

Color Usage Guide

Primary: Primary — Large surface areas, section backgrounds, decorative elements
Accent: Accent — Primary CTAs, important text, interactive elements
Link: Link — Clickable elements, secondary labels, navigation

Typography

Inter is our primary typeface, providing excellent readability and a modern aesthetic.

Primary Typeface

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

400500600700

Monospace

JetBrains

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 <> { } => ()

400500700

Type Scale

Name

Preview

Display

64px / 600 / 1.1

The quick brown fox

Heading 1

48px / 600 / 1.15

The quick brown fox

Heading 2

36px / 600 / 1.2

The quick brown fox

Heading 3

28px / 600 / 1.25

The quick brown fox

Heading 4

22px / 600 / 1.3

The quick brown fox

Body Large

18px / 400 / 1.6

The quick brown fox

Body

16px / 400 / 1.6

The quick brown fox

Body Small

14px / 400 / 1.5

The quick brown fox

Caption

12px / 500 / 1.4

The quick brown fox

Spacing

Based on an 8px grid for consistent rhythm and alignment.

Token

Value

Scale

Preview

2xs

4px

0.5x

xs

8px

sm

12px

1.5x

md

16px

lg

24px

xl

32px

2xl

48px

3xl

64px

4xl

96px

12x

Padding

16px compact, 24px cards, 32-48px page sections

Gap

8px tight, 16px grouped, 24-32px between sections

Border Radius

8px default, 10px buttons, 12-16px cards

UI Components

Core UI elements with their styling specs. Every component follows the tokens above.

Buttons

Primary Button

Start a projectDisabled

Background: #000000
Text: #FFFFFF
Border: #666666
Radius: 10px

Secondary Button

View our workDisabled

Background: #F5F5F5
Text: #000000
Radius: 0px

Input Fields

Text Input

Height: 40px
Padding: 0 16px
Radius: 8px

States

Focused

Disabled

Error

Cards & Containers

Default Card

Subtle background with light border

bg: #F5F5F5
border: #E5E5E5
radius: 8px

Elevated Card

White background with subtle shadow

bg: #FFFFFF
shadow: sm
radius: 8px

Dark Card

For dark sections and footers

bg: #000000
text: #FFFFFF
radius: 8px

Site Sections

Every section available on the site, with its purpose, structure, and the design tokens it uses. This is the definitive reference for building and extending pages.

Header

Fixed navigation bar with Because You Are Busy logo, anchor links (Services, Track Record, Team, Story, Contact), and primary CTA 'Get in touch'.

bg: Background / backdrop-blur, text: Link (#666666), CTA: Accent (#000000)

Hero

Full-width intro with an eyebrow label, display heading, subtitle, primary + secondary CTAs, a proof stats row of key brand metrics, and TeamSlider carousel on right.

heading: Text Primary, accent word: #767676, buttons: Accent + #F5F5F5, proof stats: font-mono #666666

Marquee

Infinite horizontal scroll of expertise keywords with alternating bold/normal pattern.

bold text: #666666, normal text: #767676, border: Gray 100

Pain Recognition

Dark section with a provocative heading and 3 numbered pain points, each with a bold lead phrase followed by supporting body copy.

bg: Accent (#000000), heading: #FFFFFF, accent word: #949494, numbers: #666666 font-mono, body: rgba(255,255,255,0.85), bold: #FFFFFF

Services

Section heading with a CTA link, above a 2×2 grid of service cards. Each card has a number, title, description, and an outcome list with → prefix items in mono font.

card bg: Gray 50, number: #767676, text: Link (#666666), outcomes: #666666 font-mono

Stats

Dark panel with 'Because You Are Busy — by the numbers' label. 4 metrics with yellow accent suffixes (#E8E020). Each stat has a descriptive label and a supporting subtitle.

panel bg: Accent (#000000), values: #FFFFFF, suffixes: #E8E020, labels: rgba(255,255,255,0.5), subs: rgba(255,255,255,0.25) font-mono

Engagements

Heading 'Recent engagements.' Engagement rows with category (mono), title, description, year, and outcome badge (yellow bg #E8E020): B2B SaaS Scale-Up / Pipeline engineered, National Law Firm / Operations rebuilt, Tech PME / Visibility restored. Sourced from content/work.ts.

category: #666666 font-mono, description: #666666, year: #767676, badge bg: #E8E020, badge text: #000000

About / Approach

Background #F5F5F5. Two-column layout: a positioning heading with body text on the left, and 3 named pillars with bullet dots and one-line descriptions on the right.

bg: Gray 50 (#F5F5F5), pillar bullets: #000000, pillar names: font-semibold, pillar desc: #666666, borders: #C0C0C0

Team

Heading 'Our team.' with an intro line, then a 2×2 grid of team cards: Cécile Noiriel (Founder — B Y A B, 2005), Anne Grosz (Founder & Operations), Georges Grosz (Transformation & Data), Romain Cornu (Growth Engine). Each card has photo, name, role, bio, LinkedIn link. Sourced from content/team.ts.

card bg: Gray 50, name: Text Primary, role: #767676, bio: #666666, photo border: #E5E5E5

Story

Background #F5F5F5. Company history timeline of dated phases, each with a year, heading, and body copy containing external backlinks (company registries, LinkedIn profiles, partner sites). Closes with a brand promise quote on a dark panel.

bg: Gray 50 (#F5F5F5), year: Text Primary font-mono, text: Link (#666666), links: Text Primary underline, promise panel: Accent (#000000) bg, #FFFFFF text, credits: #949494

Testimonial

Centered blockquote: 'They didn't just take work off my plate. They rebuilt how my firm runs — and revenue followed.' — M. Laurent, Managing Partner, National Law Firm. Sourced from content/testimonial.ts.

avatar bg: Primary (#999999), avatar text: Text Primary

Contact

Background #F5F5F5. Two-column layout with a section heading (accent word #767676), styled contact details with mono labels (Email, Based in), and a response-time promise. Form with Name, Email, message textarea, and submit button.

bg: Gray 50 (#F5F5F5), labels: #666666 font-mono, inputs: default border/bg, submit: Accent (#000000)

Footer

4-column grid: logo + tagline + email/location + nav links, People (Cécile Noiriel, Anne Grosz, Georges Grosz, Romain Cornu — all with LinkedIn), Companies (legal entities with registry links). Bottom bar: copyright, version/publish/commit timestamps, address.

text: Link (#666666), company SIREN: #767676, registry links: #767676 underline, version: #BBBBBB

Page Structure

The homepage follows this exact section order. All sections are wrapped in semantic HTML5 elements with proper heading hierarchy (h1 in Hero, h2 per section, h3 for sub-items).

HeaderHeroMarqueePain RecognitionServicesStatsEngagementsAbout / ApproachTeamStoryTestimonialContactFooter

Guidelines

Principles for applying the design system consistently.

Hierarchy

Use size, weight, and color to create clear visual hierarchy. Headings should be semibold (600) and body text regular (400).

Consistency

Stick to the spacing scale and never use arbitrary values. All spacing should be multiples of 8px.

Restraint

Less is more. Avoid unnecessary decoration, shadows, or color. Let content breathe with generous whitespace.

Accessibility

All text must meet WCAG AA contrast requirements. Interactive elements need visible focus states and semantic HTML.

Design Tokens Reference

/* Colors */
--color-primary: #999999;
--color-accent: #000000;
--color-background: #FFFFFF;
--color-text: #000000;
--color-link: #666666;

/* Typography */
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Spacing */
--space-unit: 8px;
--radius: 8px;
--radius-button: 10px;

Machine-Readable Resources

This design system is optimized for AI and automated consumption.

/robots.txt— Crawler permissions for all major AI bots
/llms.txt— Structured summary for LLM consumption
/llms-full.txt— Complete design system specification for LLMs