Skip to content
Design Constitution

One system. Three moods.
Thirty-five pages.

This document is the contract. Every page of Robin & Berry derives from the tokens, archetypes, modules, motion, and voice defined here. When a page drifts, this document wins.

Scope35 pages
Grid12 col · 1200 max
Archetypes4 spines
MoodsDefault · Quiet · Emphasis
System Spec
v1.0

Design system at a glance.

Scope
35 pages
Grid
12-column · 1240 max
Archetypes
4 spines
Moods
Default · Quiet · Emphasis
Spacing
7-step token scale
If the page drifts from this document, the document wins.
Chapter 01 · Tokens

Spacing is the first commitment.

Seven steps. Each step is a role, not a size. Pages breathe at hero; compress at proof; settle at body. The rhythm is the grammar.

sp-xs

8 px

Between related labels, icon gaps.

sp-sm

16 px

Inside cards, tight copy blocks.

sp-md

32 px

Between sub-elements within a module.

sp-lg

48 px

Dense sections: proof bar, stat strip.

sp-xl

80 px

Default section vertical padding.

sp-2xl

120 px

Feature sections, major modules.

sp-3xl

160 px

Hero, manifesto, full-bleed editorial.

RULE · Container max-width is 1200 px, 56 px side padding desktop, 24 px mobile. Columns = 12. Use token variables — never literal pixel values.

Chapter 02 · Color

Accent blue is action, not decoration.

Accent blue marks one primary action per screen. Ink is structure. Off-white is breath. Everything else is restraint.

White

#FFFFFF

Primary canvas.

Off-white

#F5F4F0

Quiet mood, section alternation.

Ink

#0D0F12

Type, dark mood, CTA band.

Accent Blue

#2B4BFF

One primary action per screen. Eyebrows. Emphasis serif italics.

Accent Tint

#EEF1FF

Hover fills, soft highlights.

Green

#1DB87A

Live status, positive delta.

Amber

#F0A500

Warning, rejected, flagged.

Border

#E4E4E0

Hairline dividers. 1 px only.

RULE · One accent per viewport. If you need a second colored element, use ink instead. Never use gradients on backgrounds.

Chapter 03 · Typography

Four voices. Strict hierarchy.

Every page reads as: eyebrow (mono caps) → headline (serif) → deck (sans light) → body (sans regular). Deviation breaks the system.

01 · Eyebrow

● Intelligence Practice

DM Mono · 12 / 0.14em · Accent

02 · Headline

Decision-grade intelligence.

Instrument Serif · clamp(3, 6vw, 5.5) · −.025em

03 · Subhead

Evidence that moves boards.

Instrument Serif · 2.8rem · −.02em

04 · Section

Quality is not a claim.

Sora · 1.6rem · 500

05 · Deck

Research designed around the decision, not the data. Built by operators, not vendors.

Inter · 1.15rem · 300 · ink-60

06 · Body

Robin & Berry pairs rigorous fieldwork with structured synthesis. Every engagement begins with the decision you have to make, then works backward to the evidence required to make it well.

Inter · 1rem · 1.7 line · ink

07 · Small

Last updated 04 / 2026. Disclosures on the methods page.

Inter · 0.85rem · ink-60

08 · Mono

METHOD · CATI · FIELDWORK · Q2 2026

DM Mono · 0.72rem · 0.08em

RULE · Serif is reserved for headlines and one manifesto quote per page. Never use serif for UI labels, buttons, or body copy. Accent-colored italic inside a serif headline is the signature — use it exactly once per hero.

Chapter 04 · Hero Typology

Three heroes. Every page picks one.

No bespoke heroes. Every page declares which of these three it is, and that decision governs the rest of the layout.

● Intelligence Practice

Evidence that moves boards.

Research designed around the decision, not the data.

Editorial · Dark
Used on: Home · Insights · About

Method

Quantitative research.

Large-sample surveys designed for statistical confidence and board-ready reporting.

Utility · Light
Used on: Methods · Industries · Audiences

Speak to us

Start a conversation.

Form-led split hero with two-input intent capture.

Form-led · Split
Used on: Speak · Join Panel · Careers

RULE · A page cannot invent a fourth hero. If the existing three don't fit, the page needs a different archetype, not a new hero.

Chapter 05 · Page Archetypes

Four spines. Every page is one of these.

A spine is the ordered list of sections. Pick the archetype first, then assemble modules in the declared order. Never skip a beat; never invent one.

A · Homepage

Full narrative

The flagship. Every beat of the Robin & Berry story, told once, in order.

  1. 01Hero · Editorial DarkHERO-E
  2. 02Proof bar — logosPROOF
  3. 03Problem we solveSPLIT
  4. 04Our approach · 3 pillarsEDIT-3
  5. 05Methods preview gridGRID-6
  6. 06Metrics band · DarkMETRICS
  7. 07Case study teaserCASE
  8. 08Manifesto quote · DarkQUOTE
  9. 09CTA band · DarkCTA

Used on: index.html

B · Utility (Method / Industry / Audience)

5 beats

One subject, made concrete. Used for every method, industry, and audience page.

  1. 01Hero · Utility LightHERO-U
  2. 02What it is (1-line)DEFINE
  3. 03When to use it · 3-colEDIT-3
  4. 04How we do it · numberedPROCESS
  5. 05Proof · one case + metricCASE-MINI
  6. 06CTA band · DarkCTA

Used on: quant · qual · mixed-method · cati · analytics · community-panels · api-access · all ind-* · all audience-*

C · Editorial (Article / Webinar / Case)

Read-first

Long-form content. Optimized for reading, not conversion.

  1. 01Title block · date · authorHEAD-EDIT
  2. 02Abstract / deckDECK
  3. 03Body · prose + pull-quotesPROSE
  4. 04Author byline · shareBYLINE
  5. 05Related 3-upRELATED
  6. 06CTA band · DarkCTA

Used on: insight-article · case-study-detail · webinar-detail

D · Form-led / Short

Conversion or legal

Direct intent. Forms for conversion pages; minimal chrome for legal.

  1. 01Hero · Form-led splitHERO-F
  2. 02Trust strip · 3 promisesTRUST-3
  3. 03FAQ or content blockFAQ / PROSE
  4. 04Quiet CTA · repeat formCTA-LIGHT

Used on: speak · join-panel · careers · privacy · terms · playground

Chapter 06 · Modules

Six reusable blocks. Assemble, don't invent.

Every section on every page is one of these. Adding a new module requires amending this constitution first.

PROOF · Logo bar

sp-lg padding · light

Trusted by ↘ Haldiram's · HDFC · Tata · Apollo

METRICS · Dark band

sp-xl padding · dark

97% Completion rate · 2.4M Panelists · 14d Avg. fieldwork · 38 Markets live

SPLIT · 50/50

sp-2xl padding · light

Research designed around the decision. Every engagement begins with what you need to decide, then works backward to the evidence required. + Visual slot

QUOTE · Manifesto

sp-3xl padding · dark

If the evidence can't survive a hostile board, it isn't evidence. — House principle, 2019

CTA · Dark band

sp-xl padding · dark

Bring us the decision. We'll bring the evidence. → Start a conversation

EDITORIAL · Numbered row

sp-lg padding · quiet

01 · Scope the decision. We refuse briefs that don't name a specific decision. If the question is vague, the evidence will be too.

Chapter 07 · Motion

Two signatures. Everything else is fade-up.

Motion is a tool for rhythm, not spectacle. Two signature behaviors carry the brand; every other entrance is a quiet fade-up.

Signature 01

Eyebrow line reveal

Every section eyebrow draws a 56 px accent line left-to-right as it enters viewport, then the text rises into place. Marks the start of a new chapter of reading.

line: 0→56px · 400ms ease-out · txt: fade-up 300ms +120ms

Signature 02

Cursor-reactive ambient grain

Dark sections carry a slow, low-frequency glow that drifts with the cursor. Imperceptible unless you look for it. Adds life without distracting.

radial accent · 180px · blur 12px · 8s drift loop

Default

Fade-up on enter

Every other block: 22 px rise, opacity 0→1, 600 ms ease-out. Once per element, never re-fires.

opacity 0→1 · translateY 22→0 · 600ms cubic-bezier(.2,.7,.2,1)

Forbidden

What motion is not.

No parallax. No scroll-jacking. No bouncy springs. No marquees. No auto-advancing carousels. No loaders longer than 400 ms. Motion serves reading.

If in doubt: remove the animation.

Chapter 08 · Voice

Confident. Specific. Unhurried.

We write like an analyst, not a marketer. Short sentences. Claims with numbers. No synergy.

● Do

  • Lead with the decision. "Research designed around the decision, not the data."
  • Name a number. "2.4 million panelists across 38 markets."
  • Let serif italics do the emphasis. "Evidence that moves boards."
  • Short sentences. Then a fragment. For rhythm.
  • Prefer verbs over adjectives. "We ship. We disagree. We re-field."

× Don't

  • Use buzzwords. No synergy, holistic, leverage, unlock, empower, seamless.
  • Start with "In today's fast-paced world…"
  • Stack adjectives. "Comprehensive, innovative, end-to-end solutions."
  • Promise things you can't evidence.
  • Use exclamation marks. Ever.
Chapter 09 · Hard Rules

The twelve non-negotiables.

If a page violates any of these, it is broken. These win against taste, against opinion, against the brief.

  1. One hero per page. Declared from the three-hero typology. Nothing bespoke.
  2. One accent per viewport. Accent blue is reserved for one primary action or one emphasis italic.
  3. One dark band per page minimum. Either the CTA band, a manifesto quote, or a metrics band. Never zero.
  4. Eyebrow → Headline → Deck → Body. Every section, every time. No skipping levels.
  5. Section padding comes from tokens. Never literal pixels. sp-xl is default; sp-2xl for features; sp-3xl for heroes.
  6. Container 1200 px, grid 12 col. Side padding 56 px desktop, 24 px mobile. No exceptions.
  7. Serif is for headlines and one quote. Never for UI, buttons, labels, or body.
  8. No gradients on backgrounds. Flat ink, flat white, flat off-white. Radial accent glows only in dark sections as motion.
  9. One italic per hero. The signature accent-italic lives in the H1, exactly once.
  10. Motion is fade-up by default. Only two signatures: line-reveal eyebrow, grain drift. Everything else is forbidden.
  11. Nav and footer are frozen. Do not redesign them page-by-page. Report drift to this document.
  12. Numbers over adjectives. If a claim can carry a number, it must.
Chapter 10 · Mood

Light. Dark. Quiet. In that order.

A page is a composition. Alternate moods to create rhythm. Default (white) is the base; quiet (off-white) softens between features; dark (ink) punctuates.

Default

White canvas. 60% of every page.

Quiet

Off-white. Use between features to rest the eye.

Emphasis

Ink. One band per page — CTA, metrics, or manifesto.

PATTERN · Default → Quiet → Default → Emphasis → Default. Never two dark sections back-to-back. Never four light sections in a row.

Robin & Berry · Design Constitution v1.0 · 04 / 2026