SHAHROZ.
The complete identity system for an independent SEO consultant and web developer working out of Glasgow — every rule, value and asset needed to build anything under this name without asking a second question.
SURFACE #0A0A0F
CONTRAST 11.63:1
TYPEFACES 3
SECTIONS 14
Foundation
What the brand is for, who it serves, and the beliefs everything else is built on. Read this section before making any design or copy decision — the rest of the document is downstream of it.
Shahroz exists to give ambitious UK businesses the two things that actually move revenue online — a site that converts and rankings that compound — delivered by the one person who builds both, with no agency layer in between.
Why the brand exists
Most businesses buy a website from one supplier and rankings from another, then pay both to blame each other. Shahroz removes the seam.
What every client gets
A fixed price agreed in writing, one senior specialist from pitch to launch, and a number that improves every month you stay.
Where it's going
To be the default answer in Scotland when a business asks who builds sites that rank — and to hold that position UK-wide by 2028.
Values
Four values. Each has a behaviour attached, because a value nobody can act on is decoration.
| Value | What it means | How it shows up |
|---|---|---|
| Measured, not claimed | Every assertion has a number behind it or it doesn't get made. | Case studies lead with rankings, traffic and revenue. No "award-winning" without the award. |
| Two things, mastered | Web development and SEO. Everything else is politely declined. | The service menu never grows to chase a brief. Out-of-scope work is referred out. |
| Priced before it's started | The client knows the number before they commit, and it doesn't move. | Fixed-price tiers published on the site. Scope changes are re-quoted, never invoiced quietly. |
| Plain English, always | If a client can't repeat the explanation to their board, it wasn't explained. | No jargon in proposals. Technical terms are defined the first time they appear. |
Personality
Where the brand sits on the axes that matter. Use these when a decision feels like a coin toss.
Direct ———●——— Diplomatic
Confident ——●———— Boastful
Warm ———●——— Corporate
Restrained ——●———— Expressive
In one line: the specialist who tells you the truth about your site, prices it up front, and then goes and fixes it. Not a hype merchant, not a corporate agency, not a cheap freelancer.
Positioning
Who the brand is for, who it is deliberately not for, and the exact ground it holds against the three types of competitor a prospect is also considering.
Positioning statement
For UK business owners and marketing leads who need a website that both ranks and converts, Shahroz is the independent SEO consultant and web developer who delivers both disciplines himself at a fixed price — unlike agencies who split the work across juniors, or freelancers who do one half well and outsource the other.
Audiences
Owner-operators, £250k–£5m
Trades, clinics, surveyors, brokers, professional services. They make the decision themselves, hate being sold to, and want to know the price on the first call.
Marketing leads at SMEs
They already understand SEO and need a supplier who won't need managing. They buy on competence signals and reporting quality.
Surveyors & energy brokers
Two niches with proven repeat demand, documented case studies and a specialist service page each. Depth here beats breadth elsewhere.
Competitive frame
| They're also considering | What they'll be told | The Shahroz answer |
|---|---|---|
| A full-service agency | "You get a whole team." | You get a whole team of juniors and an account manager between you and them. Here you talk to the person doing the work. |
| A cheap freelancer | "£400 and it's live next week." | Fast to build, invisible on Google, gone when it breaks. Ten years and a fixed price says otherwise. |
| A template or DIY builder | "You can do it yourself." | You can. It will look like everyone else and rank below them. The build is the cheap part; the rankings are the asset. |
Proof assets
The numbers cleared for public use. Never round these up, never use one without being able to evidence it.
Experience since 2016
Keywords in top 3
Client revenue influenced
Average client rating
Voice & messaging
How the brand sounds in every channel — site copy, proposals, cold email, LinkedIn, invoices and the difficult conversations. The voice is one voice; only the register changes.
The four voice rules
01 Lead with the answer
The first sentence contains the point. Context comes second, if at all. Never open with "In today's digital landscape".
02 Quantify or cut
"Fast" becomes "sub-2s load". "Great results" becomes "120 keywords in the top 3". If it can't be measured, delete the sentence.
03 Short verbs, no throat-clearing
Build. Rank. Ship. Fix. Cut "we're excited to", "we believe that", "it's worth noting". British spelling throughout: optimise, colour, prioritise.
04 Say the uncomfortable thing
Tell a prospect their homepage is the problem. Tell a client SEO takes six months. Honesty is the differentiator, so use it in the copy, not just the call.
Copy: write this, not that
WRITE THIS
- Get a free SEO audit
- Fixed price from £499. No scope creep.
- Most clients see movement in months 3–4.
- I build it, I rank it, I report on it.
- Your site loads in 4.1s. That's costing you enquiries.
- We reply within one working day.
NOT THAT
- Unlock your digital potential today!
- Competitive pricing tailored to your needs
- Guaranteed #1 rankings in 30 days
- Our team of passionate experts
- Your website could be performing better
- We'll get back to you as soon as possible
Messaging pillars
| Pillar | Headline claim | Supporting proof |
|---|---|---|
| One specialist | Design, build and SEO from the same pair of hands. | Testimonials referencing no handoffs. Direct accountability trust badge. |
| Rankings that compound | Ten years putting UK businesses at the top of Google. | 120+ keywords in top 3. Month 3–4 movement, month 6–9 compounding. |
| Speed as a feature | Sub-2s loads, 95+ Lighthouse, Core Web Vitals green. | Live scores on case study pages. Before/after CWV screenshots. |
| Priced in the open | From £499, fixed, published on the site. | Public pricing page. Written scope before deposit. |
Tagline system
Campaign — Built to rank. Built to convert. Ads, LinkedIn banner, proposal covers.
Signature — Design • Development • SEO • Digital Footer strip, business card reverse.
Local — From Glasgow, ranking the UK. Directory listings, GBP description, local pages.
Availability — Available · 1 Q4 slot open Live status pill. Update quarterly or remove — never leave stale.
Boilerplate
Copy exactly. Click to copy each version.
Shahroz is an independent SEO consultant and web developer based in Glasgow.
Shahroz is an independent digital specialist combining web design, development and SEO for ambitious UK businesses. Based in Glasgow city centre, he has spent ten years ranking companies at the top of Google and building the fast, conversion-focused websites that turn that traffic into revenue.
Shahroz is an independent SEO consultant and web developer working with ambitious businesses across Glasgow, Edinburgh, Scotland and the wider UK. The practice does two things and does them properly: high-performance website design and development, and technical, local and content SEO. Every project is fixed-price and agreed in writing before it starts, and the same senior specialist handles it from first call to launch and beyond. Ten years in, that has meant 120+ keywords ranking in Google's top three and more than £2.4m of client revenue influenced.
Naming & spelling conventions
Wordmark SHAHROZ all caps, logo lockups only
Full name Shahroz Qazi — bylines, contracts, LinkedIn
Never Shahroz Ltd, Team Shahroz, Shahroz Agency
Person I in personal channels, we in service pages
Spelling UK English — optimise, colour, analyse
Numbers 120+, £2.4M+, 4.9★ — never spelled out
Dashes en dash with spaces – like this
Prices £499, no decimals, no "only"
Dates Sep 2026, 2026 — never US format
Logo system
One monogram, one wordmark, five approved lockups. The mark is a full stop inside a circle — a period at the end of the search. It signals finality: the answer, not another option.
Nav bar minimum 24px left and right
Never place type or edges inside x
Horizontal 110px wide · 28mm print
Signature 180px wide · 45mm print
Print EPS / PDF vector, outlined type
Raster PNG @3x transparent, fallback only
Misuse
Six things that will happen if the rules aren't written down. They're written down.
Placement rules
| Context | Lockup | Notes |
|---|---|---|
| Website header | 01 Primary horizontal | Top-left, 24px clear, always links to home. |
| Website footer | 04 Wordmark | Green full stop retained. Oversized ghost wordmark permitted at ≤6% opacity. |
| Favicon / app icon | 03 Monogram | Bone circle on ink. Never inverted at 16px — the stop disappears. |
| Social avatar | 03 Monogram | Ink background, bone circle, centred, 12% padding. |
| Proposals & invoices | 05 Signature | Top-left of page one only. Subsequent pages use 04 at 50% scale. |
| Email signature | 01 Primary horizontal | PNG @2x, 160px wide, ink or transparent background. |
| Merch / print | 02 Stacked | Single colour only — bone on ink, or ink on bone. No green on light. |
Colour
A near-black canvas, one signal green, and a bone paper tone. The green is the rarest thing on the page — that is what makes it read as a signal rather than a decoration. Click any swatch to copy its hex.
Core palette
- RGB 0 227 140
HSL 157 100% 45%
CMYK 100 0 38 11
OKLCH 80.6% 0.192 157
- RGB 10 10 15
HSL 240 20% 5%
CMYK 33 33 0 94
OKLCH 14.7% 0.011 285
- RGB 245 245 240
HSL 60 20% 95%
CMYK 0 0 2 4
OKLCH 96.9% 0.007 107
- RGB 138 138 148
HSL 240 4% 56%
CMYK 7 7 0 42
OKLCH 63.7% 0.015 286
Extended palette
Green ramp
Ink ramp
Ratio
If green exceeds roughly 8–10% of a screen it stops functioning as a signal and starts reading as a theme. When a layout feels flat, add hierarchy with space and type weight before reaching for more green.
Accessibility — measured, not assumed
Every approved pairing, with its real WCAG 2.2 contrast ratio. Anything marked fail is not an approved combination, whatever it looks like.
| Foreground | Background | Ratio | Body text | Large / UI | Verdict |
|---|---|---|---|---|---|
| #F5F5F0 | #0A0A0F | 18.06:1 | AAA | AAA | Default body pairing |
| #00E38C | #0A0A0F | 11.63:1 | AAA | AAA | Accent on dark — unrestricted |
| #0A0A0F | #00E38C | 11.63:1 | AAA | AAA | Primary button |
| #F5F5F0 | #111117 | 17.20:1 | AAA | AAA | Text on cards |
| #8A8A94 | #0A0A0F | 5.78:1 | AA | AA | Meta text — not below 14px |
| #8B7CF6 | #0A0A0F | 5.94:1 | AA | AA | Violet on dark only |
| #0A0A0F | #F5F5F0 | 18.06:1 | AAA | AAA | Light-mode body |
| #4A4A55 | #F5F5F0 | 7.99:1 | AAA | AAA | Meta text on light — use this, not #8A8A94 |
| #0A7A4E | #F5F5F0 | 4.92:1 | AA | AA | Only approved green text on light |
| #00E38C | #F5F5F0 | 1.55:1 | FAIL | FAIL | Never as text on light. Fills and rules only. |
| #8A8A94 | #F5F5F0 | 3.13:1 | FAIL | AA large | Substitute #4A4A55 |
| #8B7CF6 | #F5F5F0 | 3.04:1 | FAIL | AA large | Headlines 24px+ only |
Non-text rule: interactive borders and focus rings must clear 3:1 against their background. #00E38C on #0A0A0F clears it comfortably, which is why the focus ring is green everywhere.
Typography
Three faces, three jobs, no overlap. A geometric grotesque does the talking, a high-contrast serif italic does the one thing the grotesque can't, and a mono handles anything that is data rather than language.
Everything by default: headlines, body, UI, numbers. Weights 300 / 400 / 500 / 700 / 900. Variable, free from Fontshare.
Fallback Plus Jakarta Sans, Inter Tight, system-ui
Italic only, and only for the one word or phrase in a headline that carries the promise. Never body copy, never more than four words.
Fallback Georgia, Times New Roman
Eyebrows, section codes, metrics, hex values, timestamps, code. Anything a machine produced or a person will copy.
Fallback SF Mono, ui-monospace, Consolas
Type scale
900 · -0.045em · 0.9
900 · -0.035em · 1.05
800 · -0.03em · 1.12
700 · -0.015em · 1.3
400 · 0 · 1.65
400 · 0 · 1.6
400 · 0 · 1.55
400 · 0.18em · uppercase
900 · -0.03em · tabular
Rules
DO
- Tighten tracking as size increases — 110px display sits at −0.045em
- Use sentence case for headings; caps only for mono eyebrows and the wordmark
- Cap measure at 66 characters for body, 52 for lead paragraphs
- Set all metrics in tabular numerals so counters don't jitter
- Use the serif italic exactly once per screen, maximum
- Keep hyphenation off; prefer a ragged right edge to a broken word
DON'T
- Set body copy in the serif or the mono
- Use weights 600 or 800 in body text — 400 and 700 only
- Letterspace lowercase text
- Use more than two type sizes inside a single card
- Centre paragraphs longer than two lines
- Introduce a fourth typeface for a one-off asset
Layout & space
An 8-point base with a 12-column grid. Space is the primary tool for hierarchy in this brand — before adding a border, a background or an accent colour, try adding space.
xs 8px inside pills, chips
sm 12px label to value
md 16px grid gutters, card padding sides
lg 24px card padding, stacked fields
xl 40px block to block
2xl 64px heading to content
3xl 96px section padding, desktop
4xl 140px hero top, desktop
Content max 1180px
Prose max 66ch
Radius sm 8px inputs, small cards
Radius md 12px cards, panels
Radius lg 24px media, hero panels
Radius full 999px buttons, pills — always
Hairline rgba(245,245,240,.09)
Hairline hover rgba(245,245,240,.16)
Breakpoints
| Name | Width | Columns | Section padding | Behaviour |
|---|---|---|---|---|
| sm | < 640px | 4 | 56px | Single column. Nav collapses. Metrics stack 2×2. |
| md | 640–1024px | 8 | 72px | Two-column grids. Hero image drops below copy. |
| lg | 1024–1440px | 12 | 96px | Full layout. Default design target. |
| xl | > 1440px | 12 | 120px | Container caps at 1180px; margins absorb the rest. |
Composition principles
Left-align everything
Body, headings, cards and labels all share the same left edge. Centring is reserved for the single closing call to action.
One idea per band
Each full-width band carries one message. If a section needs two headings, it's two sections.
Hairlines, not boxes
Separate with a 1px rule or space. Reach for a bordered card only when the content is genuinely a discrete unit.
Components
The interface vocabulary. Every one of these appears on shahroz.co.uk today; rebuild them from this spec rather than eyeballing the site.
Buttons
Secondary transparent, 1px hairline, Bone label — border goes solid Bone on hover
Ghost Meta Grey label, no chrome, used inside cards only
Arrow → permitted on primary and ghost, never on secondary
Hover 1px lift + green glow at 0 8px 26px -8px rgba(0,227,140,.55)
Focus 2px Rank Green ring, 3px offset — never removed
Rule one primary button per viewport. Two primaries means neither is primary.
Status & labels
Trust badges hairline border, no fill, no icons beyond the dot
Section eyebrow mono, uppercase, numbered only when the content is a real sequence
Cards
Website development
Fast, conversion-focused websites built to win business. Custom design, modern stack, 95+ Lighthouse scores.
SEO consultancy
Get found by customers searching in Glasgow and beyond. Technical, on-page, local and link-building.
Featured green hairline at 28% + 6% green wash from the top edge. One per grid, maximum
Hover border to rgba(245,245,240,.16) and 2px lift. No shadow, no scale
Metrics
Numerals font-variant-numeric: tabular-nums so count-up animations don't reflow
Count-up 2s duration, triggers once on scroll into view, skipped under reduced motion
Forms
We reply within one working day.
Focus border to Rank Green, plus the standard 2px ring
Error border #FF7A7A, message states what to fix: "Enter a work email so we can reply."
Success replace the form, don't stack a banner. "Audit request sent. Reply within one working day."
Motion
Motion in this brand confirms an action or reveals a measurement. It never decorates. A site that sells page speed cannot afford animation that delays content.
Fast 180ms hover, focus, borders
Base 280ms panels, accordions, menus
Slow 600ms section reveal, one per screen
Counter 2000ms metric count-up, once only
In-out cubic-bezier(.65,0,.35,1) for anything moving between two states
Linear marquees only — the city ticker and keyword strip
Never bounce, elastic, or spring overshoot
One reveal per screen
A single 600ms fade-and-rise on the section's lead element. Cards inside it do not each animate in — that is the tell of a template.
Nothing blocks reading
Text is visible at paint. Motion may adjust position or opacity from 0.9, never from 0 on body copy.
Reduced motion is a real mode
prefers-reduced-motion disables marquees, count-ups and reveals. Test it before every launch.
Imagery
Three image types are permitted and nothing else. The brand's credibility comes from real work and a real face, so stock photography of handshakes and rising arrows is prohibited outright.
Founder portrait
Shot against a dark, out-of-focus technical backdrop. Suit, direct eye line, no smile-for-the-camera. Crop square with a 24px radius, lit from the front-left so the subject separates from the black canvas.
Treatment none — no duotone, no green wash
Work screenshots
Real client sites at real resolution, shown in a plain browser frame with no drop shadow. Desktop and mobile paired. Never a floating 3D device mockup and never a fabricated interface.
Frame 12px radius, 1px hairline
Data captures
Search Console graphs, Lighthouse scores, rank-tracker screens. Cropped tight, axis labels legible, dates visible. This is the proof — it should look unretouched, because it is.
Consent anonymise before publishing client data
APPROVED
- Dark, low-key lighting with a single light source
- Glasgow and Scottish urban texture — architecture, not tartan
- Screens, terminals, dashboards shot at an angle in ambient dark
- Generous negative space so the mark and type can sit on the image
- Subtle film grain at 3–6% opacity to stop dark gradients banding
PROHIBITED
- Stock handshakes, team high-fives, arrows going up
- Bright white studio backgrounds
- Heavy green colour overlays on photography
- AI-generated faces or invented client logos
- Floating isometric device mockups
- Any screenshot of results that hasn't happened
Graphic devices
Five recurring devices that make a layout recognisably Shahroz without the logo being present. Use one or two per page — all five at once is noise.
Cities or keywords, 900 weight, Ink 700, separated by green bullets. Scrolls linearly, pauses on hover, static under reduced motion.
The full stop of a headline set in Rank Green. The brand's smallest and most repeatable signature. One per page, on the most important sentence.
The wordmark oversized and clipped by the page edge at 6% opacity. Footer and section transitions only. Never behind body copy.
A right-aligned mono column of measured values beside a claim — the visual habit of showing your working. Use it wherever the brand makes a performance claim.
CLS 0.00
INP 84ms
LIGHTHOUSE 98
Iconography
Stroke 1.5px at 20–24px, 2px below 20px
Colour Meta Grey by default, Rank Green only when the icon is the active state
Fill never — outline only, including social icons
Corners rounded joins, matching Lucide defaults
Rule an icon must add meaning. Decorative icons beside headings are removed
Applications
The brand in the places clients actually meet it. Each of these is a finished spec — build from it directly rather than re-deciding each time.
Email signature
|
S.
|
Shahroz Qazi
SEO Consultant & Web Developer
shahroz.co.uk · 07735 447845
19 W Nile St, Glasgow G1 2PS |
Fonts Arial / Helvetica — web fonts don't render in Outlook
Avatar 56px monogram PNG @2x, hosted on shahroz.co.uk
Green #0A7A4E only — bright green is unreadable on white
Divider 1px #E9E9EF, 9px margin
Prohibited quotes, "sent from my iPhone", social icon rows, legal disclaimers, "think before you print"
Optional line one campaign line max, e.g. Free SEO audit → shahroz.co.uk/audit
Business card
Stock 450gsm, soft-touch matte laminate both sides
Finish spot UV on the green full stop only — the single flourish the brand allows
Front Signal Black. Reverse Bone. Never green as a full card fill
Social & profile assets
| Asset | Size | Composition |
|---|---|---|
| Avatar (LinkedIn, WhatsApp, GBP) | 400 × 400 | Founder portrait for personal profiles; Bone monogram on Signal Black for business profiles. 12% padding, never both in use at once for the same platform. |
| LinkedIn banner | 1584 × 396 | Signal Black, grid field, ghost wordmark clipped right. Left third: "Built to rank. Built to convert." with the green stop. Bottom-left: shahroz.co.uk in mono. Keep the left 380px clear of the avatar overlap. |
| OG / share image | 1200 × 630 | Page title at 60px/900 left-aligned on Signal Black, monogram top-left, green hairline along the bottom edge, domain in mono bottom-right. Generated per page, never one generic image sitewide. |
| Favicon | 32 / 180 / 512 | Bone circle, Signal Black "S." — the only asset where the monogram may sit on transparency. |
| Case study cover | 1600 × 1000 | Client screenshot at 16:10 in a hairline frame, sector eyebrow above, result metric bottom-left in green. |
Documents — proposals, audits, invoices
Body Bone paper, Signal Black text, #4A4A55 for secondary
Accent Green Deep #0A7A4E for figures and headings — never #00E38C on paper
Page furniture wordmark at 50% top-right, page number mono bottom-right
Type Satoshi throughout; system fallback if the recipient will edit it
Scope what is included and, explicitly, what is not
Timeline real dates, not "4–6 weeks from kick-off"
Proof one relevant case study, not a portfolio dump
Terms one page, plain English, no clause a client would need a solicitor to read
Length a proposal over 12 pages is hiding something
Cold outreach
Opening the specific finding about their site. Never "I hope this email finds you well"
Body under 90 words, one link maximum, one ask
Signature plain text: name, one-line descriptor, domain. No images, no HTML signature in cold email
Ask a reply, not a call — Want me to send the preview?
Prohibited fake threads ("re:"), false urgency, invented compliments, claimed mutual connections
Design tokens
The whole system as code. Paste these into any new build and the brand is correct by default — which is the only way a standard actually survives contact with a deadline.
:root {
/* colour — core */
--ink-950: #0A0A0F; /* Signal Black — canvas */
--ink-900: #111117; /* Panel */
--ink-700: #4A4A55; /* meta text on light */
--ink-500: #8A8A94; /* Meta Grey */
--ink-050: #F5F5F0; /* Bone */
--ink-000: #FAFAF7; /* Paper Bright */
--grn-500: #00E38C; /* Rank Green — accent */
--grn-800: #0A7A4E; /* green text on light */
--vio-500: #8B7CF6; /* Signal Violet — product only */
/* semantic */
--bg: var(--ink-950);
--surface: var(--ink-900);
--fg: var(--ink-050);
--fg-muted: var(--ink-500);
--accent: var(--grn-500);
--accent-fg: var(--ink-950);
--border: rgba(245,245,240,.09);
--border-strong: rgba(245,245,240,.16);
--focus: var(--grn-500);
/* type */
--font-display: 'Satoshi','Plus Jakarta Sans',system-ui,sans-serif;
--font-serif: 'Playfair Display',Georgia,serif;
--font-mono: 'JetBrains Mono',ui-monospace,monospace;
/* space — base 8 */
--s-1: 4px; --s-2: 8px; --s-3: 12px;
--s-4: 16px; --s-5: 24px; --s-6: 40px;
--s-7: 64px; --s-8: 96px; --s-9: 140px;
/* radius */
--r-sm: 8px; --r-md: 12px; --r-lg: 24px; --r-full: 999px;
/* motion */
--t-fast: 180ms; --t-base: 280ms; --t-slow: 600ms;
--e-out: cubic-bezier(.22,1,.36,1);
--e-inout: cubic-bezier(.65,0,.35,1);
/* layout */
--container: 1180px; --measure: 66ch;
--glow: 0 8px 26px -8px rgba(0,227,140,.55);
}
// tailwind.config.js export default { theme: { extend: { colors: { ink: { 950:'#0A0A0F', 900:'#111117', 800:'#2C2C35', 700:'#4A4A55', 600:'#696977', 500:'#8A8A94', 400:'#9999A3', 300:'#B8B8C1', 200:'#D6D6DE', 100:'#E9E9EF', 50:'#F5F5F0', 0:'#FAFAF7' }, rank:{ 50:'#E0FFF3', 100:'#B8FFE4', 200:'#7AFFCC', 300:'#33FFB1', 400:'#00FF9D', 500:'#00E38C', 600:'#00BD74', 700:'#00945B', 800:'#0A7A4E', 900:'#005232', 950:'#00331F' }, signal:{ violet:'#8B7CF6', violetDeep:'#6B5BFF' }, }, fontFamily: { display: ['Satoshi', 'Plus Jakarta Sans', 'system-ui', 'sans-serif'], serif: ['Playfair Display', 'Georgia', 'serif'], mono: ['JetBrains Mono', 'ui-monospace', 'monospace'], }, fontSize: { eyebrow: ['10px', { letterSpacing:'.18em', lineHeight:'1.4' }], metric: ['clamp(30px,4vw,52px)', { letterSpacing:'-.03em', lineHeight:'1' }], display: ['clamp(48px,9vw,110px)', { letterSpacing:'-.045em', lineHeight:'.9' }], }, borderRadius: { sm:'8px', md:'12px', lg:'24px', full:'999px' }, maxWidth: { container:'1180px', measure:'66ch' }, boxShadow: { glow:'0 8px 26px -8px rgba(0,227,140,.55)' }, transitionTimingFunction: { out:'cubic-bezier(.22,1,.36,1)' }, }, }, }
{
"brand": { "name": "Shahroz", "domain": "shahroz.co.uk", "version": "1.0" },
"color": {
"core": {
"rankGreen": { "hex": "#00E38C", "role": "accent", "maxCoverage": 0.10 },
"signalBlack": { "hex": "#0A0A0F", "role": "canvas" },
"bone": { "hex": "#F5F5F0", "role": "foreground" },
"metaGrey": { "hex": "#8A8A94", "role": "muted", "onLight": false }
},
"contrast": {
"bone-on-black": 18.06,
"green-on-black": 11.63,
"grey-on-black": 5.78,
"deepGreen-on-bone": 4.92,
"green-on-bone": 1.55
}
},
"type": {
"display": { "family": "Satoshi", "weights": [300,400,500,700,900] },
"serif": { "family": "Playfair Display", "styles": ["italic"], "maxWords": 4 },
"mono": { "family": "JetBrains Mono", "use": "labels, metrics, code" }
},
"space": [4,8,12,16,24,40,64,96,140],
"radius": { "sm": 8, "md": 12, "lg": 24, "full": 999 },
"motion": { "fast": 180, "base": 280, "slow": 600, "easing": "cubic-bezier(.22,1,.36,1)" }
}
Governance
Who decides, where the files live, and how the brand stays intact once other people start using it — freelancers, printers, and future hires.
Example shahroz-logo-horizontal-bone.svg
Example shahroz-og-seo-glasgow-1200x630.png
Case lowercase, hyphens, no spaces, no dates in filenames
Versions git for code, -v2 suffix for design source only
/colour ASE swatch, this document
/type Satoshi + Playfair + JetBrains licences
/templates proposal, invoice, audit, OG, card
/photography portrait set, approved captures
/tokens tokens.json, tailwind.config.js
Pre-launch checklist
Run this before anything ships under the name — a page, a deck, a printed card, a client deliverable.
| 01 | Logo uses an approved lockup at or above minimum size, with clear space intact |
| 02 | Green covers under 10% of the composition and appears on the primary action |
| 03 | Every text pairing clears 4.5:1 — no bright green text on a light background |
| 04 | Body copy sits under 66 characters per line, left-aligned |
| 05 | The serif italic appears no more than once |
| 06 | Every claim on the page is a number that can be evidenced |
| 07 | UK spelling throughout — optimise, colour, analyse |
| 08 | One primary button per viewport, with a visible focus ring |
| 09 | Reduced-motion mode tested; nothing essential depends on animation |
| 10 | Availability status is current, or removed |
| 11 | Lighthouse 95+, LCP under 2s, CLS under 0.1 — the brand sells this, so it must hold |
| 12 | Client data anonymised and permission held before publishing |
Who approves
Shahroz Qazi, sole approver. Anything that changes a token, a lockup or a claim needs sign-off before it ships. Everything else is downstream of this document.
Review cycle
Quarterly. Update the availability pill, refresh the proof numbers against real data, and version the document if a token changes.
Third parties
Freelancers and printers receive this document plus the asset library. Never a folder of PNGs with no rules — that is how brands drift.