Brand & Design System v1.0
Albion
Design System
The unified visual language for British Biologicals — across digital products, marketing materials, and brand communications. Inspired by British heritage. Built for consistency.
Plus Jakarta SansJetBrains MonoApril 2026British Biologicals
01 · Brand Foundation
Why Albion
Albion is the oldest known name for Britain. For a company called British Biologicals, the brand identity should reflect the sophistication, trust, and heritage that "British" evokes — not generic pharma blue or clinical white.
🏛 Heritage, Not Retro
We draw from British tradition — deep royal blues, imperial reds — but apply them with modern restraint. This is a contemporary pharma company, not a period drama.
🎯 Precision, Not Decoration
Every colour, every font weight, every pixel of spacing exists for a reason. Albion rejects decoration for decoration's sake. If it doesn't serve the user, it doesn't belong.
🤝 Trust, Not Flash
Our users are field MRs, doctors, and pharmacists. They need to trust what they see. The palette communicates reliability and authority — never trendy, never uncertain.
📱 Mobile-First, Always
2,000+ field MRs use our tools on tablets in the field. Every design decision — touch targets, font sizes, layouts — is made for mobile first, desktop second.
02 · Colour Palette
British Heritage Palette
Rooted in the Union Jack's colour DNA. Click any swatch to copy its hex code. Print values (CMYK approximations) included for marketing collateral.
#1B2A6B
Royal Blue
--royal
Primary. Headings, CTA buttons, active states, navigation.
CMYK: 95 85 0 30
#0E1740
Deep Navy
--navy
Hero backgrounds, page titles, darkest UI elements.
CMYK: 98 92 0 55
#2B3F8E
Royal Mid
--royal-mid
Secondary blue. Gradients, hover states, supporting elements.
CMYK: 82 70 0 15
#C8102E
Imperial Red
--imperial
Accent only. Hero stripes, highlights, section markers, emphasis.
CMYK: 0 95 82 15
#0A7C4A
Racing Green
--green
Success states. Approvals, confirmations, positive actions.
CMYK: 85 0 60 35
#96700A
Goldenrod
--amber
Warning, pending, attention. Never for decoration.
CMYK: 0 25 95 40
#F6F7FB
Cool White
--bg
Page background. Cool blue-tinted white, never pure #FFF.
CMYK: 2 2 0 1
#E4E7F0
Border
--border
Card borders, dividers, subtle structural lines.
CMYK: 5 4 0 5
03 · Colour Pairings
Approved Combinations
Not all colour combinations work. These are the tested, approved pairings for backgrounds, text, and accents. Use these — don't improvise.
| Background | Text | Accent | Use Case |
|---|
| Navy | White (#FFF) | Imperial Red | Hero sections, featured banners |
| Cool White | #101828 | Royal Blue | Page backgrounds, general content |
| White | #475467 | Royal Blue | Cards, forms, data tables |
| Royal Blue | White (#FFF) | Imperial Red | Buttons, active navigation, highlights |
| #EDEFF6 | Navy | Green | Success states, confirmation panels |
04 · Typography
Type System
Plus Jakarta Sans for all text — geometric, modern, highly legible on screens and print. JetBrains Mono for data and codes. No other fonts should be used in Albion-branded materials.
Display / Hero
Request a New Area
Plus Jakarta Sans · 800 · 32px · -0.04em tracking
Heading
Identify Yourself
Plus Jakarta Sans · 700 · 16px · -0.02em tracking
Body
Enter your Employee Code to auto-fill your details from the system.
Plus Jakarta Sans · 400 · 14.5px · 1.6 line-height
Small / Caption
This portal is for internal use only. Contact IT for support.
Plus Jakarta Sans · 500 · 12px
Label
EMPLOYEE CODE
Plus Jakarta Sans · 700 · 11.5px · uppercase · 0.08em
Data / Code
EC9944
JetBrains Mono · 600 · 15px · 0.1em tracking
Section Label
01 · COLOUR
JetBrains Mono · 700 · 10.5px · 0.14em · with line prefix
For print and presentations: Plus Jakarta Sans is available free from Google Fonts. Install it on your machine for use in PowerPoint, Keynote, and design tools. If unavailable, fallback to Manrope (similar geometric style) or system fonts — never Arial, Calibri, or Times New Roman.
05 · Voice & Tone
How We Communicate
Whether it's a button label, an error message, an email subject, or a product brochure — the way BB speaks should be consistent.
💬 Clear, Not Clever
Say what you mean. "Submit Request" not "Send it off!" — our MRs are busy in the field; they don't have time to decode playful copy. Clarity always wins.
🤲 Warm, Not Corporate
"We're pleased to introduce" not "Please be informed that." We're a family-run company, not a government office. Professional warmth, not cold formality.
💪 Confident, Not Arrogant
"Trusted over 2 decades" not "The best in the world." State facts. Let the work speak. Confidence comes from substance, not superlatives.
🧭 Action-Oriented
Guide the user to the next step. "Enter your Employee Code to get started" not "This form requires authentication." Lead with what they should do, not what the system needs.
06 · Logo Usage
The BB Mark
The British Biologicals logo is the most important brand asset. These rules ensure it's always presented with respect and consistency.
British Biologicals
Pvt. Ltd.On white / light backgrounds — full colour
Primary
British Biologicals
Pvt. Ltd.On dark backgrounds — white version
Reversed
British Biologicals
Pvt. Ltd.Single colour for print/fax — all navy
Mono
✓ Do
- Maintain clear space equal to the logo mark height on all sides
- Use the full logo (mark + wordmark) whenever possible
- Place on clean, uncluttered backgrounds
- Use approved colour versions only
✕ Don't
- Stretch, rotate, or distort the logo
- Place on busy photographic backgrounds without a container
- Change the logo colours to unapproved shades
- Add effects like drop shadows, outlines, or gradients
- Display smaller than 80px wide on digital or 20mm on print
07 · Imagery & Photography
Visual Direction
Guidelines for photography, illustrations, and visual assets used in marketing materials, presentations, and product packaging.
📸
Photography
Natural lighting. Real people in real settings. Warm skin tones. Avoid stock-photo poses. Show genuine moments of health, nutrition, and care.
🎨
Illustrations
Clean, geometric line illustrations using the Albion palette. Flat style, not 3D. Use Royal Blue as the primary illustration colour with Imperial Red accents sparingly.
📊
Data Visualisation
Charts and graphs should use the palette in this order: Royal Blue (primary data), Royal Mid (secondary), Racing Green (positive), Goldenrod (caution), Imperial Red (critical only).
✓ Do
- Use images that feel authentic and health-focused
- Apply a subtle cool tone to photography for brand consistency
- Use icons from a single, consistent icon set (Lucide recommended)
✕ Don't
- Use generic stock photos of handshakes or skylines
- Mix illustration styles (flat + 3D + hand-drawn)
- Use neon, gradient-heavy, or overly saturated visuals
09 · Status Indicators
Badges & States
Tinted rgba backgrounds with matching borders. Always subtle and layered — never flat, saturated pill colours.
Pending
Approved
Rejected
RBM
ABM
BO
ZBM
HO
10 · Design Tokens
Radii, Shadows & Spacing
Radius Large
12px · --r · Cards, modals
Radius Small
8px · --r-sm · Buttons, inputs
Radius XS
6px · --r-xs · Tags, badges
Shadow MD
4px blur · Hover states, elevated cards
11 · DNA
What Makes Albion, Albion
These signature patterns must be present in every Albion-branded interface. They're what makes a BB tool instantly recognisable.
Imperial red accent stripe on hero sections
Frosted-glass topbar with backdrop blur
Subtle card hover lifts with shadow transition
Step indicators with coloured box-shadows
Bottom tab navigation for mobile-first
Tinted rgba borders, never flat greys
Negative letter-spacing on display headings
Cool blue-tinted page background #F6F7FB
12 · Rules
Do's & Don'ts
The most common mistakes and how to avoid them. Share this with any designer, agency, or vendor working on BB materials.
✓ Do
- Use Plus Jakarta Sans for all digital and print materials
- Use Royal Blue (#1B2A6B) as the primary brand colour
- Keep Imperial Red as an accent — never more than 15% of any layout
- Use the approved colour pairings from Section 03
- Maintain generous white space — let content breathe
- Use tinted rgba backgrounds for status badges, never solid fills
- Test all designs on mobile devices before finalising
- Use the Albion CSS variables for all web projects
✕ Don't
- Use random blues, reds, or greens — stick to the palette
- Use Imperial Red for primary CTA buttons (use Royal Blue)
- Use Arial, Calibri, Times New Roman, or other system fonts
- Create dark-mode versions without approval
- Use gradients between unrelated palette colours
- Add decorative elements that don't serve the user
- Use more than 2 font weights on a single screen
- Place coloured text on coloured backgrounds without checking contrast
13 · Code
CSS Variables
For developers. Drop these into any new project to apply Albion instantly. This is the source of truth — don't hard-code hex values.
/* Albion Design System — British Biologicals */
:root {
--royal: #1B2A6B; /* Primary */
--navy: #0E1740; /* Darkest */
--royal-mid: #2B3F8E; /* Secondary blue */
--imperial: #C8102E; /* Accent red */
--green: #0A7C4A; /* Success */
--amber: #96700A; /* Warning */
--bg: #F6F7FB; /* Page bg */
--bg2: #FFFFFF; /* Card bg */
--bg3: #EDEFF6; /* Hover bg */
--txt: #101828; /* Primary text */
--txt2: #475467; /* Secondary */
--txt3: #98A2B3; /* Tertiary */
--border: #E4E7F0; /* Borders */
--r: 12px; /* Radius */
--r-sm: 8px;
--r-xs: 6px;
--font: 'Plus Jakarta Sans', system-ui;
--mono: 'JetBrains Mono', monospace;
}
Copied!