T&S — Standards.site Cockpit

Page settings

URL slug : /strategy (Standards.site impose ce slug)
Background hero : T&S Blue #00154A · reste : White #FFFFFF
Default text : white sur bleu, T&S Blue sur blanc
Type style par défaut : Geist Regular

BLOC 1 — Hero (fond bleu, full width) Layout 12 cols

3 sous-blocs Text empilés, alignés center, sur fond #00154A

aMonogramme — Display 240px Bold, color #FFCB00

bTitre — Display XL (76px) Bold, white

Brand Story

cTagline — Body L italic, #FFCB00

Committed to performance. Designed to accelerate.

BLOC 2 — Our chapter (fond blanc, 8 cols centrées) Long form

aSection title — Heading L Semibold, T&S Blue

Our chapter

bParagraphe 1 — Body L Regular

In a world that is speeding up, where organizations must continuously transform, a new generation of technology partners is emerging: a unified international brand designed to sustainably accelerate the impact of its clients.

cParagraphe 2 — Body L Regular

For more than 15 years, Technology & Strategy has supported its clients' transformation by combining engineering, data, and consulting. Today marks the beginning of a new chapter.

dQuote — Display S italic, Ink 600, border-left 3px yellow

The future belongs to organizations capable of mobilizing the best talents, mastering data, rethinking engineering, and integrating consulting as close to the field as possible.

eParagraphe 3 — Body L Regular

We are becoming T&S — a modernized, clarified, and strengthened brand, true to our history while firmly looking toward the future. This evolution is not a rupture. It is an acceleration. A move toward greater coherence. A way to become clearer, more unified, and more performant.

BLOC 3 — Brand Compass (4 colonnes : Promise / Mission / Positioning / Vision) Sublayout 4 cols

Pour chaque colonne : Numéro (T&S Yellow, Heading M Bold) · Title (T&S Blue, Heading L Semibold) · Headline (T&S Blue, Body L Bold italic) · Body (Ink 700, Body M Regular).

1Promise

01. Promise Committed to performance. Designed to accelerate. T&S represents the natural evolution of our promise: a partner committed to delivering sustainable performance. We no longer limit ourselves to supporting — we accelerate, we transform, we deliver.

2Mission

02. Mission Mobilizing the best talents to meet tomorrow's challenges. We make collective mobilization our driving force. Our teams, our expertise, and our technologies operate in a coordinated dynamic to address data, engineering, and consulting transformations.

3Positioning

03. Positioning A glocal expertise providing a synergy of data, engineering, and consulting. Global in ambition. Local in execution. Synergistic in expertise. Results-driven in every engagement.

4Vision

04. Vision International integrated partner of excellence. T&S marks a major organizational evolution — a more harmonized governance, better articulation between our expertise, a more seamless value proposition, strengthened internal synergies.

BLOC 4 — Quote final (fond bleu, full width) Statement

Display L Bold italic, color white, alignment center.

We are not becoming an integrated group. We are becoming a more integrated group.

BLOC 5 — Elevator pitches (fond blanc, 2 cols) 2-col

A15 seconds — Title Caption uppercase T&S Yellow letter-spacing 2px + Body L Regular Ink 700

Title

15 SECONDS

Body

T&S is the international partner that mobilizes the best talents in data, engineering, and consulting to accelerate the transformation of organizations — with global ambition and local execution.

B60 seconds

Title

60 SECONDS

Body

T&S is a glocal expertise platform born from 15+ years of supporting transformations across Europe and beyond. We unite three complementary areas of expertise — data, engineering, and consulting — under one integrated, internationally-coherent brand. Our promise is simple: we don't just support change, we accelerate it. The "&" in our identity is no accident: it stands for everything we connect — disciplines, geographies, generations, and ambitions.

BLOC 6 — Narrative Do's & Don'ts (fond Ink 50, 2 cols) Do/Don't

Standards.site a un bloc Don't natif avec violator visuel intégré — utilise-le.

ADO — Heading M T&S Blue + Body M

DO · Frame T&S as an evolution, not a rupture. · Always link the three pillars: Data & Engineering & Consulting. · Use the "&" as the connective tissue of every story. · Position glocal as a competitive advantage. · Speak about acceleration, integration, synergy.

BDON'T — Heading M color #B3261E + Body M

DON'T · Describe T&S as a "new brand". · Use generic "digital transformation" language. · Separate the three pillars. · Use corporate jargon. · Promise the moon — T&S commits and delivers.

Assets à uploader

Optionnel : /Brandbook/assets/ampersand-monogram.svg (si le & en hero est une image plutôt que typographique)

Page settings

URL slug : /logo
Background : alternance white / Ink 50
Default text : T&S Blue

Astuce : Brand Assets → upload logo SVG (primary/secondary/mono) → + → Automation → Logo → Comprehensive. Génère Anatomy / Versions / Clear space / Min sizes / Don't automatiquement.

BLOC 1 — Hero (fond bleu) Hero

Media (logo SVG primary, 60% width Desktop, 80% Mobile, center) + Title + Subtitle.

bTitle — Display XL Bold, white

Logo

cSubtitle — Body L italic, Ink 200

The most visible expression of our brand.

BLOC 2 — Anatomy (fond blanc) 3-col

aTitle — Heading L

Anatomy

bDescription — Body L

The T&S logotype is built on three elements. Together they form a single, indivisible logotype.

d3 colonnes (T / & / S)

Col 1 — T

T Technology — the engineering legacy.

Col 2 — &

& The connector. The signature symbol. Yellow #FFCB00.

Col 3 — S

S Strategy — consulting and advisory.

BLOC 3 — Versions (grille 6 colonnes) Grid

Pour chaque version : Media (SVG) · Title (Caption uppercase, T&S Blue) · Description (Body S, Ink 600).

1Primary

Title

Primary

Description

Default expression. Use this 80% of the time.

2Secondary

Title

Secondary

Description

Inverted version. Use on light surfaces.

3Monogram

Title

Monogram

Description

For avatars, favicons, watermarks.

4Mono dark

Title

Mono dark

Description

Single-color blue version.

5Mono light

Title

Mono light

Description

Single-color white version.

6Mono yellow

Title

Mono yellow

Description

Special editions only.

BLOC 4 — Clear space (fond blanc) Diagram

aTitle

Clear space

bBody

The minimum clear space around the logotype is equal to the height of the "&". No element — text, image, frame — may enter this zone.

BLOC 5 — Minimum sizes (fond blanc) Table

aTitle

Minimum sizes

bTable (Sublayout 2 cols)

Use case	Min. width
Print	20 mm
Digital screen	80 px
Mobile UI	64 px
Favicon (monogram only)	16 px
Embroidery / engraving	30 mm

cNote — Body S italic, Ink 600

Below these sizes, switch to the monogram (& only).

BLOC 6 — Misuses (8 don'ts) Don't grid

Utilise le bloc Don't natif de Standards (violator visuel intégré).

aTitle — Heading L, color #B3261E

Misuses

bSubtitle

Don't do this.

cListe des 8 don'ts (1 par bloc Don't)

Don't change colors of the &

Don't separate the three glyphs

Don't rotate the logo

Don't apply gradients, shadows, or 3D

Don't outline the logo

Don't stretch, skew, or distort

Don't place on busy backgrounds

Don't recreate by typing "T&S" in any font

Assets à uploader (SVG depuis Figma)

ts-logo_full_primary_rgb.svg · white + yellow sur bleu
ts-logo_full_secondary_rgb.svg · blue + yellow sur blanc
ts-logo_monogram_yellow_rgb.svg · & jaune
ts-logo_full_mono-dark_rgb.svg · bleu seul
ts-logo_full_mono-light_rgb.svg · blanc seul
ts-logo_full_mono-yellow_rgb.svg · jaune seul
ts-logo_clear-space-diagram.svg · avec annotations

Files & Downloads

ts-logo-pack.zip (tous les SVG)
ts-logo_primary_rgb.svg
ts-logo_primary_print-ready.pdf
ts-logo-monogram_favicon.ico

Page settings

URL slug : /color
Background : alternance white / Ink 50
Default text : T&S Blue

Shortcut : Styles → Color → ajoute les 15 couleurs (table ci-dessous) → + → Automation → Color. Standards génère les swatches avec HEX + click-to-copy.

Couleurs à créer dans Styles → Color

Nom	HEX	Catégorie
T&S Blue	`#00154A`	Primary
T&S Yellow	`#FFCB00`	Primary
Ink 900	`#000A1F`	Neutral
Ink 800	`#00154A`	Neutral
Ink 700	`#1A2C5C`	Neutral
Ink 600	`#3A4B70`	Neutral
Ink 400	`#7A8499`	Neutral
Ink 200	`#C5CAD6`	Neutral
Ink 100	`#E8EAEF`	Neutral
Ink 50	`#F6F7F9`	Neutral
White	`#FFFFFF`	Neutral
Success	`#1B7F4E`	Semantic
Warning	`#C97C00`	Semantic
Danger	`#B3261E`	Semantic
Info	`#2D5BD9`	Semantic

BLOC 1 — Hero (fond bleu) Hero

aTitle — Display XL, white

Color

bSubtitle — Body L italic, Ink 200

Two colors carry the entire brand. Used precisely, they are unmistakable.

BLOC 2 — Primary palette (2 swatches) Color swatch

aSection title

Primary palette

AT&S Blue

Name

T&S Blue

Description

Our anchor. The color of trust, depth, and operational excellence.

HEX	`#00154A`
RGB	`0, 21, 74`
CMYK	`100, 95, 35, 50`
Pantone	`2756 C`
HSL	`224°, 100%, 15%`

BT&S Yellow

Name

T&S Yellow

Description

The signal. The accelerator. Used in the "&" and reserved for highlights, accents, and signature moments.

HEX	`#FFCB00`
RGB	`255, 203, 0`
CMYK	`0, 21, 100, 0`
Pantone	`7549 C`
HSL	`48°, 100%, 50%`

BLOC 3 — Neutral scale (9 swatches) Color proportion

aTitle

Neutral palette

Token	HEX	Description
Ink 900	`#000A1F`	Maximum text contrast
Ink 800	`#00154A`	Brand blue
Ink 700	`#1A2C5C`	Hover, deep accents
Ink 600	`#3A4B70`	Secondary text on light
Ink 400	`#7A8499`	Tertiary text, captions
Ink 200	`#C5CAD6`	Borders, dividers
Ink 100	`#E8EAEF`	Surfaces, subtle bg
Ink 50	`#F6F7F9`	Page background
White	`#FFFFFF`	Pure white

Utilise un seul bloc Color proportion au lieu de 9 swatches — plus élégant.

BLOC 4 — Semantic colors (4 swatches) 4-col

aTitle

Semantic colors

bSubtitle — Body S italic, Ink 600

For UI states only — never decoratively.

Token	HEX	Use
Success	`#1B7F4E`	Positive feedback, confirmations
Warning	`#C97C00`	Cautions (NOT brand yellow)
Danger	`#B3261E`	Errors, destructive actions
Info	`#2D5BD9`	Informational notices

BLOC 5 — Distribution 70 / 25 / 5 Color proportion

aTitle

Distribution — 70 / 25 / 5

Configure le bloc Color proportion : 70% T&S Blue · 25% Ink 100 / White · 5% T&S Yellow.

cLégende — Body M

The brand respects a strict 70 / 25 / 5 ratio: · 70% — T&S Blue or White (depending on context). · 25% — Neutrals (Ink 100, Ink 200, Ink 50). · 5% — T&S Yellow. Never more. Yellow is the spark, not the surface.

dQuote — Display S italic, T&S Yellow, border-left 3px yellow

If the page reads "yellow", you've used too much. Yellow must always feel like a deliberate emphasis.

BLOC 6 — WCAG contrast ratios (fond Ink 50) Table

aTitle

Contrast ratios — WCAG 2.1

bSubtitle

The following combinations are validated for accessibility.

Foreground	Background	Ratio	Result
White	T&S Blue	17.4 : 1	✅ AAA
T&S Yellow	T&S Blue	11.6 : 1	✅ AAA
T&S Blue	White	17.4 : 1	✅ AAA
T&S Blue	T&S Yellow	11.6 : 1	✅ AAA
Black	T&S Yellow	14.5 : 1	✅ AAA
White	T&S Yellow	1.5 : 1	❌ Fail
Ink 600	White	8.3 : 1	✅ AAA
Ink 400	White	3.4 : 1	⚠ AA Large only

BLOC 7 — Do's & Don'ts (2 cols) Do/Don't

ADO

DO · Use T&S Yellow for the "&", key highlights, primary CTAs. · Use T&S Blue as the dominant brand color. · Always validate contrast against the WCAG table. · Use semantic colors only for UI feedback.

BDON'T

DON'T · Place T&S Yellow on white as text or critical UI. · Use T&S Yellow for body copy. · Introduce off-brand blues or yellows. · Apply gradients, blend modes, or transparencies. · Mix T&S Yellow with semantic Warning in the same view.

Assets & Files

color-palette.svg
contrast-grid.svg
ts-color-tokens.css (CSS vars pour devs)

Page settings

URL slug : /typography
Background : white · Default text : T&S Blue

Le site affiche encore Söhne (template) — à remplacer 100%. Display = Poppins · Body/Subheadlines = Geist · Mono = Geist Mono.

Styles à créer dans Styles → Type

Token	Font	Weight	Size	Line	Tracking
Display XL	Poppins	Bold	76px	80px	-0.02em
Display L	Poppins	Bold	60px	64px	-0.02em
Display M	Poppins	Bold	48px	52px	-0.015em
Display S	Poppins	SemiBold	38px	44px	-0.01em
Heading L	Geist	SemiBold	30px	36px	-0.01em
Heading M	Geist	SemiBold	24px	32px	0
Heading S	Geist	Medium	20px	28px	0
Body L	Geist	Regular	18px	28px	0
Body M	Geist	Regular	16px	24px	0
Body S	Geist	Regular	14px	22px	0
Caption	Geist	Medium	12px	18px	+0.01em
Code	Geist Mono	Regular	14px	22px	0

BLOC 1 — Hero Hero

aTitle — Display XL Bold, T&S Blue

Typography

bSubtitle — Body L italic, Ink 600

Three voices, one rhythm. Poppins opens, Geist explains, Geist Mono ships the receipts.

BLOC 2 — Primary (Display) : Poppins Type specimen

Type specimen Poppins Bold à 160-200px. Specimen line ci-dessous.

aSpecimen line

Committed to performance. Designed to accelerate.

bDescription — Body L

Primary — Display Headlines, hero copy, page titles, OOH, deck covers, brand statements. Poppins brings warmth and openness to the brand. Its rounded, humanist forms give headlines a human voice — the partner side of T&S. Foundry: Indian Type Foundry License: Open source (SIL Open Font License) Weights used: SemiBold, Bold

BLOC 3 — Secondary (Body & Subheadlines) : Geist Type specimen

aSpecimen line

The "&" is not a decoration. It's a method.

bDescription — Body L

Secondary — Body & Subheadlines Subheadlines, body copy, UI labels, navigation, captions, long-form reading. Geist is a contemporary geometric sans serif designed for clarity and rhythm at any size. It carries the brand voice: structured, confident, modern. The typographic equivalent of well-shipped code. Foundry: Vercel License: Open source (SIL Open Font License) Weights used: Regular, Medium, SemiBold

BLOC 4 — Tertiary : Geist Mono Type specimen

aSpecimen line

data & engineering & consulting

bDescription — Body L

Tertiary — Mono Code, data, numerical values, technical references, system messages. Signals technical precision. Used in product UI to surface code, IDs, statuses, monitoring data. Foundry: Vercel License: Open source (SIL Open Font License) Weights used: Regular, Medium

cExemple code (background Ink 50)

GET /api/users HTTP/1.1 Status: 200 OK Content-Type: application/json

BLOC 5 — Type scale Table

aTitle

Type scale — modular ratio 1.250

bDescription

Built on a 1.250 (Major Third) scale, base 16px. Use these tokens for any digital surface.

BLOC 6 — Pairings (2 cols, fond Ink 50) Do/Don't

aTitle

Pairing rules

APoppins + Geist (marketing)

Title

Poppins + Geist

Subtitle

For marketing campaigns and storytelling.

Body

Poppins for display headlines, Geist for body. The default pairing for all branded surfaces.

BGeist + Geist Mono (product UI)

Title

Geist + Geist Mono

Subtitle

For digital products, dashboards, admin UI.

Body

Crisp and technical. Geist for headers and body, Geist Mono for code, IDs, data points.

BLOC 7 — Hierarchy in practice Hierarchy

aTitle

Hierarchy in practice

bBody

A page should have one Display level (Poppins), two to three Heading levels (Geist), and a single Body level (Geist) for running text. Avoid more than five typographic levels per view — it dilutes hierarchy.

BLOC 8 — Do's & Don'ts Do/Don't

ADO

DO · Stick to the type scale tokens. · Use Poppins for headlines and display. · Use Geist for body, subheadlines, and UI. · Use Geist Mono only for code, numbers, technical data. · Respect the contrast and line-length rules.

BDON'T

DON'T · Don't set body text in Poppins — Poppins is display only. · Don't set headlines in Geist — Geist is body and subheadlines. · Don't introduce a fourth typeface. Three is enough. · Don't use Light or Thin weights — they fail accessibility on small sizes. · Don't justify body text — left-align (or right-align in RTL). · Don't compress or expand letter spacing artificially.

Assets à uploader (Brand Assets → Fonts)

Poppins SemiBold, Bold — fonts.google.com/specimen/Poppins
Geist Regular, Medium, SemiBold — vercel.com/font/geist
Geist Mono Regular, Medium — vercel.com/font/geist

Files & Downloads

ts-fonts-pack.zip

Page settings

URL slug : /system (section Supporting device)
Background : T&S Blue hero, alternance ensuite
Default text : white sur bleu, T&S Blue sur blanc

BLOC 1 — Hero (fond bleu, full width) Hero

a& géant — 320px Poppins Bold, color #FFCB00, center

bTitle — Display L Bold, white

The &

cSubtitle — Body L italic, Ink 200

Not a character. What we stand for.

BLOC 2 — Meaning (4 connections) 2-col grid

aTitle

Meaning

bQuote — Display M italic, T&S Blue, border-left yellow

The "&" is the heart of T&S. It connects what was once separated.

1Connection 1 — People & Expertise

Label

People & Expertise

Caption

Our talents and the disciplines they master.

2Connection 2 — Data & Engineering & Consulting

Label

Data & Engineering & Consulting

Caption

The three pillars of our offer.

3Connection 3 — Global & Local

Label

Global & Local

Caption

Our glocal posture.

4Connection 4 — Yesterday & Tomorrow

Label

Yesterday & Tomorrow

Caption

Continuity and acceleration.

cClosing — Body L, T&S Blue

Every time the "&" appears, it tells the same story: we connect, we link, we integrate.

BLOC 3 — Four primary roles (grille 2×2) 4-card

aTitle

Four primary roles

bSubtitle

Each role must be applied deliberately and never mixed within the same composition.

1Hero monogram

01. Hero monogram Used alone, large-scale, as the central visual element. Reserved for cover pages, hero sections, posters, brand activation moments, social profile avatars, and favicons. · Color: T&S Yellow on T&S Blue, or T&S Blue on white. · Size: Minimum 30% of the visual area.

2Connector

02. Connector Used typographically to link brand pillars in editorial copy. · Color: Inherits surrounding text color, OR highlighted in yellow. · Size: Inline with body or display copy.

3Pattern

03. Pattern A repeated motif of small "&" symbols, used as a textural element on dividers, end pages, digital backgrounds. · Opacity: 5–15% in T&S Blue or T&S Yellow. · Density: Tight grid — never sparse.

4Accent

04. Accent Used as graphic punctuation: separator, bullet, callout marker, tag. · Color: T&S Yellow when used as accent.

BLOC 4 — Construction Diagram

aTitle

Construction

bBody

The official "&" glyph is the one in the T&S logotype. Always use the master vector. · Pattern variants — Use scaled-down replicas of the official "&". Never substitute with another typeface's ampersand. · Hero monogram — Always use the master vector. Do not redraw, retrace, or re-export from raster files. · Narrative use — Use the "&" from the Poppins typeface (Bold or SemiBold to match the logotype weight).

BLOC 5 — Pattern grid (fond bleu) Visual

aTitle (white)

Pattern grid

bSpecs

· Cell size: 80px (scalable) · Symbol size: 50% of the cell · Stagger: every other row offset by half a cell · Color: T&S Blue or T&S Yellow at 5–15% opacity

BLOC 6 — Voice integration (4 quotes) Quotes

Chaque quote : Display S italic, T&S Blue, "&" en yellow, border-left 3px yellow.

aTitle

Voice integration

bDescription

The "&" is also a rhetorical device in our copy. We use it to express our positioning.

1Quote 1

Data & Engineering & Consulting — three forces, one ambition.

2Quote 2

Strategy & Execution — we don't just plan, we deliver.

3Quote 3

Global & Local — international vision, local hands.

4Quote 4

Today & Tomorrow — performance now, transformation forever.

cClosing

When the "&" appears in narrative copy three or more times, treat it as a signature device — like a tagline. Keep the cadence intentional.

BLOC 7 — Do's & Don'ts Do/Don't

ADO

DO · Use as a hero element on cover pages and signature moments. · Use as a connector in narrative copy linking brand pillars. · Use as a subtle pattern for textures and dividers. · Always use the official glyph from the master files.

BDON'T

DON'T · Never recreate by typing in a non-brand typeface. · Don't mix multiple "&" roles in the same composition. · Don't apply in semantic colors (success, warning, danger). · Don't outline, emboss, or 3D the "&". · Don't rotate or flip the "&".

Assets à uploader

ampersand-monogram.svg — le & héro
03-ampersand-construction.svg — grille de construction
SVG ou PNG du pattern (stagger grid de &)
1 visuel par "role" (hero / connector / pattern / accent)

Files & Downloads

ts-ampersand-monogram.svg
ts-ampersand-pattern.svg
ts-ampersand-favicon.ico

Page settings

URL slug : /language
Background : white · Default text : T&S Blue

BLOC 1 — Hero Hero

aTitle — Display XL

Voice & Tone

bSubtitle — Body L italic, Ink 600

We don't write to impress. We write to deliver.

cStatement — Body L

T&S is the partner who accelerates. Imagine a senior consultant doing this for fifteen years. Calm, sharp, focused on outcomes. She doesn't oversell. She tells you what she'll do, by when, and then she does it.

BLOC 2 — Four voice qualities (table) Table 3 cols × 4 rows

Trait	Sounds like	Doesn't sound like
Confident	Direct, decisive, no hedging	Boastful, salesy, self-congratulatory
Concrete	Verbs, examples, real numbers	Abstract, theoretical, conceptual
Glocal	Both international and proximate	Generic, off-the-shelf, distant
Connecting	Linking ideas, people, expertise	Siloed, fragmented, monolithic

BLOC 3 — Tone modulation (table 6 contexts) Table 3 cols × 6 rows

1Brand manifesto — confident, slightly aspirational

We don't just support transformation. We accelerate it.

2Sales deck / proposal — concrete, evidence-driven

38% faster time-to-market across three engagements last quarter.

3Recruiting — warm, ambitious, human

Join the people building tomorrow's transformations.

4Product / technical docs — precise, neutral, instructive

This module integrates via the Data API.

5Crisis communication — calm, transparent, accountable

At 14:42 CET, our service experienced a partial outage.

6Social / LinkedIn — conversational, sharp, opinionated

Operational excellence isn't a poster on the wall.

BLOC 4 — Messaging pillars (3 cols) 3-col

aTitle

Three pillars, bound by the &

bSubtitle

Every T&S communication should map back to at least one pillar. The three are bound by the "&" — never communicated in isolation.

1Data

Data Mastering data to unlock value. We turn information into decisions, decisions into outcomes. From data engineering to AI deployment, we build the data foundations that fuel transformation.

2Engineering

Engineering Rethinking engineering for what's next. Engineering is our heritage and our edge. We design, build, and industrialize the systems that make products and services scalable, reliable, and forward-compatible.

3Consulting

Consulting Consulting that lives in the field. Our consultants don't just advise — they execute. Embedded with our clients' teams, they translate strategy into delivery, day after day.

BLOC 5 — Vocabulary (3 cols, fond Ink 50) 3-col

AWords we own — T&S Blue

WORDS WE OWN accelerate · transform · deliver · synergy · glocal · operational excellence · proximity · integration · mobilize · ambition · partner · evolution

BUse carefully — Ink 600

USE CAREFULLY innovation (overused) transformation (only with concrete object) solutions (avoid as generic) disruptive (rare, never as self-description)

CAvoid — Danger

AVOID revolutionary · cutting-edge · next-gen · synergize · world-class · seamless · holistic · paradigm shift · leverage · best-in-class

BLOC 6 — Sentence-level guidelines List

aTitle

Sentence-level guidelines

bBullets — Body M

· Verbs first. We accelerate. We transform. We deliver. · Short sentences for force, long sentences for nuance. Mix them. · One idea per sentence. Don't stack. · Avoid passive voice unless deliberately diplomatic. · Active partnership language. "Together we…" > "Our teams may help you…" · Numbers beat adjectives. "38% faster" > "significantly faster" · One CTA per piece. Never two.

BLOC 7 — Tagline (fond bleu, hero closing) Statement

aTagline — Display L Bold, white, center

Committed to performance. Designed to accelerate.

bDescription — Body M, Ink 200, center

The lock on every formal piece of brand communication. Used sparingly: end of brand manifestos, signature on key collateral, sign-off on hero campaigns. Never decorative.

Page settings

URL slug : /system (section Composition) ou page dédiée
Background : white · Default text : T&S Blue

BLOC 1 — Hero Hero

aTitle

Iconography

bSubtitle — italic, Ink 600

Icons should look like they belong with the "&". Not like they were borrowed from a free pack.

BLOC 2 — Style principles (3 cols) 3-col

aTitle + subtitle

Title

Style

Subtitle

T&S iconography is geometric, structured, and precise.

1Stroke-based

Stroke-based Icons are built from clean strokes, not filled shapes.

2Consistent stroke

Consistent stroke All icons share the same stroke weight at the same size.

3Open forms

Open forms Endings are rounded but never decorative. Functional, not playful.

BLOC 3 — Grid Specs

aTitle

Grid

bBody

All icons are designed on a 24×24 grid (with 16×16 and 32×32 variants for UI). · Outer container: 24×24 · Live area: 20×20 (centered) · Default stroke weight: 1.5px (at 24×24) · Corner radius: 2px outer, 1px inner · Rounded line caps: yes · Rounded line joins: yes

BLOC 4 — Icon families (3 cards) 3-card

aTitle

Icon families

1Functional UI icons

Functional UI icons For navigation, actions, and feedback in product and interface contexts. · Library: Lucide or Phosphor (Light/Regular) · Color: inherits text color, or T&S Blue/white · Yellow accents: only on active/selected states

2Editorial icons

Editorial / illustrative icons Larger, used in marketing, sales decks, and brandbook illustrations. · Single-color (T&S Blue or white) · Or two-color with T&S Yellow accents (max 1 yellow per icon) · Same grid logic — no decorative flourishes

3Pillar icons (Data / Engineering / Consulting)

Pillar icons (Data / Engineering / Consulting) Three custom icons that represent the brand pillars. Designed as a set — same visual weight, conceptual unity. · Data — Layered grid / stack visual · Engineering — Modular block / construction visual · Consulting — Dialogue / overlapping circles visual These are protected: only the official versions may be used.

BLOC 5 — Other graphic elements (4 cards) 4-card

aTitle

Other graphic elements

1Dividers

Dividers Use 1px lines in Ink 200 (light surfaces) or Ink 700 (dark surfaces). Avoid double lines or decorative dividers.

2Bullets

Bullets Default to a small filled circle in T&S Blue or white. The "&" may replace bullets in editorial layouts.

3Quotes

Quotes Use straight quotes (") for code and data. Use curly quotes ("") for editorial copy.

4Lines & arrows

Lines & arrows Match icon stroke weight. Curved arrows discouraged — straight arrows reinforce the brand's directness.

BLOC 6 — Photography (brief) List

aTitle

Photography (brief)

bSubtitle — italic, Ink 600

Photography deserves its own document. The principles below align it with the brand.

cBullets

· Real, not stocky — Prefer real people, real environments over staged stock photography. · Glocal — Show diverse geographies, languages, and contexts. · Active — Capture people doing, building, deciding — not posing. · Light — Natural light, not studio. Slight underexposure preferred. · Crop — Tight enough to feel intimate, wide enough to show context.

BLOC 7 — Do's & Don'ts Do/Don't

ADO

DO · Use icons from a single library across the same surface. · Maintain consistent stroke weight across all icons in a view. · Pair icons with text labels for navigation (a11y). · Use the official pillar icons.

BDON'T

DON'T · Don't mix stroke and fill icons in the same composition. · Don't recolor in semantic colors unless conveying state. · Don't apply gradients, shadows, or 3D effects. · Don't stretch or skew icons. · Don't use generic emoji-style icons in brand collateral.

Page settings

URL slug : /applications
Background : alternance white / Ink 50 · Default text : T&S Blue

BLOC 1 — Hero Hero

aTitle

Applications

bSubtitle — italic, Ink 600

The brand only exists where it is applied.

BLOC 2 — Production tiers (table) Table 5 rows

Tier	Items
1 — Identity essentials	Business card, email signature, letterhead, PowerPoint master
2 — Digital touchpoints	LinkedIn templates, email banner, Teams background, event banner
3 — Field & event presence	Badge, hard hat, sports top, flyer
4 — Goodies	Tote bag, mug, cup, t-shirt, water bottle, notebook
5 — Stationery	Greeting card, document templates

BLOC 3 — Layout principles (5 numbered) List

aTitle + subtitle

Title

Layout principles

Subtitle

Whatever the medium, the same principles apply.

bBullets numbered — Body M

01. Logo placement Top-left or top-center for branded surfaces. Bottom-right for sign-offs. Centered for monogram-only treatments. 02. Color distribution Respect the 70 / 25 / 5 rule. Yellow for highlights only. 03. Typography hierarchy One Display level per surface (Poppins). Body in Geist. Geist Mono only for code. 04. The "&" as visual anchor Hero element on covers. Monogram on goodies. Subtle pattern on backgrounds. 05. Clear space Always respected, even on tight goodies surfaces.

BLOC 4 — TIER 1 : Identity essentials (4 cards) Mockups

1Business card · ref BC-BUI-06 ou BC-B-01

Business card · Format: 85×55mm or vertical 55×85mm · Front: full logotype + contacts · Back: T&S Blue with & monogram in yellow · Paper: 350gsm matte. Spot UV on the &

2Email signature

Email signature (HTML) · Logo at 80px width · Name in Geist SemiBold · Role + contacts in Geist Regular Ink 600 · T&S Blue accent line under name (1px) · Mandatory legal mention (full company address)

3Letterhead

Letterhead · A4 portrait · Logo top-left, contacts top-right · Footer: tagline + page number in Geist Mono

4PowerPoint master

PowerPoint template · Cover: T&S Blue background, large yellow &, title in white Poppins Bold · Content: white background, T&S Blue text in Geist, yellow accents on key data · Divider: T&S Blue with section title and & motif · Closing: tagline + & monogram + contacts

BLOC 5 — TIER 2 : Digital touchpoints Mockups

5LinkedIn templates

LinkedIn templates (vertical) Three official versions — never mix. · Yellow-dominant: T&S Yellow background, blue text, large & · Blue-dominant: T&S Blue background, white text, yellow & · Mixed: top half blue, bottom half yellow, & at the boundary Always include logo (small, top-left or bottom-right) and clear hierarchy: hook → body → CTA.

Cards 6-8 (Email banner / Teams background / Event banner) : à compléter selon mockups disponibles.

BLOC 6 — TIER 3 : Field & events Mockups

9Badge · ref BD-CL3-01

Mockup uniquement, pas de texte.

10Hard hat · ref HH-BUI-05

Hard hat For engineering on-site presence. Tells the operational story. · Monogram & + small "T&S" wordmark below.

11Sports top · ref AP-SPRT-07

Sports top · & monogram on chest · Full logotype on back

BLOC 7 — TIER 4 : Goodies (rules) List

aGoodies general rules

Goodies general rules · Default to & monogram only — full logotype crowds small surfaces · Tote bags: full logotype one side, large & pattern other side · Hard hats: monogram + small "T&S" wordmark · Sports tops: & monogram on chest, full logotype on back

Mockup refs : Tote BG-EAP-28 · Mug BV-FDDP-02 · Cup BV-BST-03 · T-shirt AP-EAP-12 · Water bottle BV-SPRT-09 · Notebook BK-E-10

BLOC 8 — Production checklist Checklist

aTitle + subtitle

Title

Production checklist

Subtitle

Before validating any mockup:

bBullets

□ Logo correctly placed (clear space respected) □ Colors exactly match the official tokens □ Typography uses Poppins (display) or Geist (body) — no system substitutes □ Yellow accents respect the 5% rule □ Contrast ratios verified (especially small text) □ Files exported in CMYK + RGB □ Consistent crop and lighting across the mockup series

Assets & Files

Mockups Maison.Mockup en PNG haute-rés (1500-2000px)
ts-business-card-template.pdf
ts-email-signature-template.html
ts-letterhead-template.docx
ts-powerpoint-master.pptx
ts-linkedin-templates-pack.zip

BLOC 1 — Hero Hero

aTitle — Display XL

Accessibility

bSubtitle — italic, Ink 600

Accessibility is not a constraint. It is a competitive advantage — and a legal requirement in the EU since June 2025.

BLOC 2 — Our commitment Long form

aTitle + body

Title

Our commitment

Body

T&S communicates with everyone. Our brand assets — digital and print — are designed to comply with WCAG 2.1 Level AA at minimum, with AAA targeted on critical interfaces. This commitment reflects: · Legal obligation — the European Accessibility Act (EAA) is binding since 28 June 2025. · Inclusive ambition — clarity for all extends our audience and reinforces brand trust. · Operational excellence — accessible design is better design, period.

BLOC 3 — Color contrast (3 cards + table) 3-card

Element	Min ratio (WCAG 2.1 AA)
Body text	4.5 : 1
Large text (≥18pt or ≥14pt bold)	3 : 1
UI components & graphical objects	3 : 1
Focus indicators	3 : 1

1Yellow on white FAILS

T&S Yellow on white fails contrast (1.5 : 1). Never use yellow text on white.

2Yellow on Blue is AAA

T&S Yellow on T&S Blue is AAA-compliant (11.6 : 1). Preferred combo for high-impact moments.

3Light grey body fails

Ink 400 on white fails AA for body text (3.4 : 1). Use Ink 600 or darker for body copy.

BLOC 4 — Typography rules List

Title

Typography rules

Bullets — Body M

· Minimum body size: 16px on screens · Minimum line-height: 1.5x body size · Maximum line length: 80 characters · Avoid all-caps for paragraphs · Avoid italic for body copy (reserve for titles of works) · Avoid font weights below 400 for body (no Light or Thin) · Provide a text-resize control in product UIs (110% / 125%)

BLOC 5 — Interactive elements (4 cards) 4-card

1Touch targets

Touch targets Minimum 44×44px (per WCAG 2.5.5 AAA, applied as our AA standard for inclusivity).

2Focus indicators

Focus indicators Always visible. · 2px outline in T&S Blue or T&S Yellow · Minimum 3:1 contrast against background · Never rely on color alone — pair with shape, weight, or shadow

3Keyboard navigation

Keyboard navigation All interactive elements must be reachable and operable via keyboard. Test with Tab, Shift+Tab, Enter, Space, arrow keys.

4Hover & active states

Hover & active states Always paired with non-color cues (underline, weight, position, icon).

BLOC 6 — Content accessibility (6 sections) Long form

1Headings hierarchy

Headings hierarchy · Use semantic heading levels (h1 → h6) in order. Never skip. · One h1 per page. · Headings reflect the actual structure of content, not visual size.

2Alt text

Alt text · Every meaningful image has an alt attribute describing the image's purpose, not its appearance. · Decorative images use alt="". · Logos: alt="T&S logo". · Avoid "image of…" — screen readers already announce that.

3Link text

Link text Avoid "click here" or "read more". Link text must be self-explanatory. ❌ Click here to read the report. ✅ Read the full Q4 performance report.

4Forms

Forms · Every input has a visible label. · Errors are described in text (not just color). · Required fields are marked both visually and programmatically.

5Language

Language Set lang="en" or lang="fr" on every HTML page. Mark language switches inline.

6Documents

Documents · Tag headings, lists, tables. · Embed alt text on images. · Use Acrobat's accessibility checker before publishing. · Avoid scanned PDFs without OCR.

BLOC 7 — Motion, animation, audio, video 2-card

aMotion & animation

Motion & animation · Respect prefers-reduced-motion — disable parallax, auto-play, decorative animation when set. · Animation durations should not exceed 5s unless pausable / dismissible. · Avoid flashing content (>3 flashes/sec is seizure risk).

bAudio & video

Audio & video · Captions for all video content. · Transcripts for podcasts and audio-only content. · No auto-play with sound. · Allow playback speed control on platform players.

BLOC 8 — Testing checklist Checklist

Title

Testing checklist

Subtitle

Before shipping any digital surface:

Bullets

□ Color contrast verified (Stark, WebAIM, axe) □ All images have meaningful or empty alt attributes □ Heading hierarchy is logical and ordered □ All interactive elements are keyboard-accessible □ Focus indicators are visible and contrasted □ Touch targets meet 44×44px minimum □ Error messages are descriptive (not color-only) □ Language attribute set on <html> □ Tested with at least one screen reader (NVDA, VoiceOver) □ Tested with prefers-reduced-motion: reduce □ Lighthouse accessibility audit ≥ 95

BLOC 9 — Tools (4 cols) Cards

Title

Tools we recommend

Stark — Figma & Sketch contrast and color blindness simulation
WebAIM Contrast Checker — quick contrast validation
Wave — browser extension, full accessibility audit
Lighthouse — Chrome DevTools, accessibility scoring
NVDA (Windows) / VoiceOver (macOS) — screen reader testing
axe DevTools — automated accessibility testing

BLOC 10 — Closing (fond bleu) Statement

aStatement — Display M Bold italic, white, center

If a brand decision creates an accessibility tradeoff, accessibility wins. Always.

bBody — white, Body L, center

The brand is strong enough to remain recognizable when constraints are respected. Yellow stays yellow even in AAA mode. The "&" is no less iconic when surrounded by readable type.

cFinal quote — Display L Bold italic, T&S Yellow, center

Accessibility is not the limit of the brand. It is the discipline of the brand.

Files & Downloads

ts-accessibility-checklist.pdf (checklist seule, à imprimer)
ts-eaa-compliance-statement.pdf (déclaration EAA pour les clients)