{ "name": "On steroids brand guidelines", "version": 3, "asOf": "2026-11-04", "urls": { "page": "https://onsteroids.com/brand-kit#guidelines", "markdown": "https://onsteroids.com/brand-kit/guidelines.md", "json": "https://onsteroids.com/brand-kit/guidelines.json", "kit": "https://onsteroids.com/brand-kit" }, "brand": { "brand": "On steroids", "legal": "Solar on steroids Ltd", "companyNumber": "15845416", "webAddress": "onsteroids.com", "retired": [ "Solar on steroids", "Solar on Steroids", "SoS" ], "rules": [ "We are On steroids. Capital O, lower-case s, two words, in every sentence, caption and title.", "\"Solar on steroids\" is retired (Jude, 3 Nov 2026): everything moves to On steroids, for every trade we work with.", "The one exception is the legal entity, Solar on steroids Ltd (company number 15845416), written in full wherever the law asks for it: contracts, invoices, the small print, the footer's entity line.", "In display type the name is set in capitals (ON STEROIDS) because the headline face is. In running text it is never ALL CAPS, and never \"On Steroids\".", "On artwork, the web address is onsteroids.com, as the lockup with the web address carries it." ], "whatWeDo": "On steroids is a UK marketing agency for home installers: we film your real jobs, run them as Facebook and Instagram ads, qualify every lead with a quiz, and count cost per sale, not per lead.", "positioning": "Video-led Facebook ads for home services businesses." }, "colours": { "tokens": { "paper": "#FBF7F0", "white": "#FFFDF9", "cream": "#F5EDE1", "beige": "#ECE2D3", "rule": "#DCD0BF", "ink": "#1F1A16", "cocoa": "#5B4636", "muted": "#7C6C5D", "brown": "#6B4429", "brownD": "#45291A", "mint": "#C6EBD6", "powder": "#C5DCF2", "blush": "#F8D0CB", "butter": "#F8EAAA", "lilac": "#DDD0F4", "mintD": "#5FAE87", "powderD": "#5F8FC2", "blushD": "#D9817A", "butterD": "#CFAE2E", "lilacD": "#9580CC", "biro": "#1446B4", "stamp": "#A8352C", "seal": "#1F7A4A" }, "neutrals": [ { "k": "paper", "name": "Paper", "hex": "#FBF7F0", "role": "The page. Everything sits on paper." }, { "k": "white", "name": "White", "hex": "#FFFDF9", "role": "Cards, labels and the white half of a capsule." }, { "k": "cream", "name": "Cream", "hex": "#F5EDE1", "role": "Panels and wells behind artwork." }, { "k": "beige", "name": "Beige", "hex": "#ECE2D3", "role": "Quiet fills: a disabled button, a placeholder." }, { "k": "rule", "name": "Rule", "hex": "#DCD0BF", "role": "Hairlines and dotted dividers." }, { "k": "ink", "name": "Ink", "hex": "#1F1A16", "role": "Headlines, outlines, hard shadows and the text on any pastel." }, { "k": "cocoa", "name": "Cocoa", "hex": "#5B4636", "role": "Body copy and ledes." }, { "k": "muted", "name": "Muted", "hex": "#7C6C5D", "role": "Captions and small print, on paper or white only." } ], "press": [ { "k": "brown", "name": "Brown", "hex": "#6B4429", "role": "Anything you press: the primary button." }, { "k": "brownD", "name": "Brown dark", "hex": "#45291A", "role": "The pressed edge of brown." } ], "pastels": [ { "k": "blush", "name": "Blush", "hex": "#F8D0CB", "edge": "#D9817A", "role": "One per piece. Worn by Videography and Heat pumps." }, { "k": "powder", "name": "Powder", "hex": "#C5DCF2", "edge": "#5F8FC2", "role": "One per piece. Worn by Facebook ads and Aircon." }, { "k": "mint", "name": "Mint", "hex": "#C6EBD6", "edge": "#5FAE87", "role": "One per piece. Worn by Funnels." }, { "k": "butter", "name": "Butter", "hex": "#F8EAAA", "edge": "#CFAE2E", "role": "One per piece. Worn by Testimonials and Solar." }, { "k": "lilac", "name": "Lilac", "hex": "#DDD0F4", "edge": "#9580CC", "role": "One per piece. Worn by Data and Windows." } ], "marks": [ { "k": "biro", "name": "Biro", "hex": "#1446B4", "role": "Anything written by hand: notes, arrows, underlines, placeholders still to fill." }, { "k": "stamp", "name": "Stamp", "hex": "#A8352C", "role": "Rubber stamps: Hiring, Case study, Recalled." }, { "k": "seal", "name": "Seal", "hex": "#1F7A4A", "role": "The Approved seal, and nothing else." } ], "services": [ { "k": "film", "service": "Videography", "pastel": "blush", "hex": "#F8D0CB" }, { "k": "advert", "service": "Facebook ads", "pastel": "powder", "hex": "#C5DCF2" }, { "k": "quiz", "service": "Funnels", "pastel": "mint", "hex": "#C6EBD6" }, { "k": "trust", "service": "Testimonials", "pastel": "butter", "hex": "#F8EAAA" }, { "k": "data", "service": "Data", "pastel": "lilac", "hex": "#DDD0F4" } ], "trades": [ { "k": "solar", "trade": "Solar", "pastel": "butter", "hex": "#F8EAAA" }, { "k": "windows", "trade": "Windows", "pastel": "lilac", "hex": "#DDD0F4" }, { "k": "heat", "trade": "Heat pumps", "pastel": "blush", "hex": "#F8D0CB" }, { "k": "aircon", "trade": "Aircon", "pastel": "powder", "hex": "#C5DCF2" } ], "rules": [ "Paper and beige, five pastels that belong to the five pills, brown for anything you press, blue biro for anything written by hand.", "One pastel leads a piece. A service or a trade always wears its own pastel.", "Every colour comes from this list. Nothing else, no tints of your own, no gradients.", "Each pastel has a darker edge: the pressed side of a pill or tablet and the mark inside it. It is never a fill for big areas and never text." ], "contrast": { "rules": [ "Text on a pastel is always ink.", "Body copy is ink or cocoa on paper or white. Muted is for small print on paper or white only: on cream it falls under 4.5 to 1.", "A pastel's darker edge never carries text: none reaches 4.5 to 1 on white.", "Paper on brown is the button. Paper on ink is for reversed artwork and the white logo." ], "pairs": [ { "fg": "ink", "bg": "paper", "ratio": 16.15, "text": true }, { "fg": "cocoa", "bg": "paper", "ratio": 8.28, "text": true }, { "fg": "brown", "bg": "paper", "ratio": 7.92, "text": true }, { "fg": "biro", "bg": "paper", "ratio": 7.67, "text": true }, { "fg": "muted", "bg": "paper", "ratio": 4.73, "text": true }, { "fg": "muted", "bg": "cream", "ratio": 4.35, "text": false }, { "fg": "paper", "bg": "brown", "ratio": 7.92, "text": true }, { "fg": "paper", "bg": "ink", "ratio": 16.15, "text": true }, { "fg": "ink", "bg": "blush", "ratio": 12.22, "text": true }, { "fg": "ink", "bg": "powder", "ratio": 12.23, "text": true }, { "fg": "ink", "bg": "mint", "ratio": 13.35, "text": true }, { "fg": "ink", "bg": "butter", "ratio": 14.24, "text": true }, { "fg": "ink", "bg": "lilac", "ratio": 11.83, "text": true }, { "fg": "blushD", "bg": "white", "ratio": 2.8, "text": false }, { "fg": "powderD", "bg": "white", "ratio": 3.34, "text": false }, { "fg": "mintD", "bg": "white", "ratio": 2.62, "text": false }, { "fg": "butterD", "bg": "white", "ratio": 2.12, "text": false }, { "fg": "lilacD", "bg": "white", "ratio": 3.31, "text": false } ] } }, "type": { "faces": [ { "k": "disp", "face": "Big Shoulders Display", "weights": "Black 900; ExtraBold 800 for small heads", "role": "Headlines. In capitals, short, tightly leaded." }, { "k": "serif", "face": "Instrument Serif", "weights": "Italic 400", "role": "The aside: the half-line after a headline. Lower case, never a whole paragraph." }, { "k": "sans", "face": "Archivo", "weights": "400 to 700", "role": "Everything you read: body copy, ledes, buttons." }, { "k": "mono", "face": "JetBrains Mono", "weights": "500 labels; 700 figures", "role": "Labels, kickers and small print in spaced capitals, and every figure, with even-width numbers." }, { "k": "hand", "face": "Caveat", "weights": "500", "role": "Handwritten notes, always in biro blue." } ], "email": "Arial or Helvetica", "scale": [ { "class": "d-xxl", "use": "Homepage headline", "size": "clamp(64px, 11vw, 184px)" }, { "class": "d-xl", "use": "Page headline", "size": "clamp(52px, 7.6vw, 124px)" }, { "class": "d-lg", "use": "Section headline", "size": "clamp(40px, 5.2vw, 84px)" }, { "class": "d-md", "use": "Card headline", "size": "clamp(30px, 2.9vw, 44px)" }, { "class": "d-sm", "use": "Small head", "size": "26px" }, { "class": "lede", "use": "Lede", "size": "clamp(17px, 1.45vw, 20px)" }, { "class": "copy", "use": "Body copy", "size": "15px" }, { "class": "mono", "use": "Label", "size": "11px" } ], "rules": [ "Four faces and a hand, each with one job. Never a fifth.", "Headlines in capitals, eight words or fewer: a point, not a topic. Anything longer, and every step, list item or instruction, in sentence case. The serif aside finishes the thought.", "Figures in the mono face, so they line up and never jump as they change.", "In email, where these fonts cannot travel, use Arial or Helvetica: the signature does." ] }, "logo": { "parts": [ "The mark: our symbol, drawn as one shape. It stands alone only where the name is already said: a profile picture, a favicon, a film watermark.", "The wordmark: ON STEROIDS in Big Shoulders Display Black, drawn as outlines so it never depends on the font being installed." ], "layouts": [ { "k": "h", "name": "Lockup", "use": "The mark beside the wordmark. The default.", "ratio": 7.58 }, { "k": "stack", "name": "Stacked", "use": "The wordmark under the mark, for square and narrow spaces.", "ratio": 2.11 }, { "k": "url", "name": "With the web address", "use": "The wordmark over the address, for print and anything people need to type.", "ratio": 5.47 } ], "versions": [ { "k": "lockup-ink-on-paper", "label": "Lockup · ink on paper", "colour": "#1F1A16", "ground": "#FBF7F0" }, { "k": "lockup-paper-on-ink", "label": "Lockup · paper on ink", "colour": "#FBF7F0", "ground": "#1F1A16" }, { "k": "lockup-ink", "label": "Lockup · ink, transparent", "colour": "#1F1A16", "ground": null }, { "k": "lockup-white", "label": "Lockup · white, transparent", "colour": "#FFFDF9", "ground": null }, { "k": "stacked-ink", "label": "Stacked · ink, transparent", "colour": "#1F1A16", "ground": null }, { "k": "stacked-white", "label": "Stacked · white, transparent", "colour": "#FFFDF9", "ground": null }, { "k": "url-ink", "label": "Lockup with web address", "colour": "#1F1A16", "ground": null }, { "k": "url-white", "label": "Lockup with web address · white", "colour": "#FFFDF9", "ground": null }, { "k": "mark-ink", "label": "Mark only · ink", "colour": "#1F1A16", "ground": null }, { "k": "mark-white", "label": "Mark only · white", "colour": "#FFFDF9", "ground": null }, { "k": "mark-brown", "label": "Mark only · brown", "colour": "#6B4429", "ground": null } ], "clearSpace": 0.5, "minHeightPx": 16, "rules": [ "Keep clear space of at least 50% of the logo's height on every side; the kit's files on a solid ground are cut with exactly that.", "Never smaller than 16px tall for the mark on screen, the size the site's own phone menu draws it.", "Use the SVG wherever a tool takes it, the PNG anywhere else. Every version is in the kit, under Logo files." ], "dont": [ "Stretch, squash, tilt or rotate it.", "Recolour it outside its versions: ink, white, paper on ink, or the mark in brown.", "Set the name in another font, or retype it in the display face: use the files.", "Add a shadow, outline, glow or gradient.", "Put it on a busy photo where it cannot be read: use the white version on a dark, calm area, or a solid ground." ] }, "pills": { "capsules": [ { "k": "film", "service": "Videography", "name": "Filmazepam", "pastel": "blush", "hex": "#F8D0CB", "edge": "#D9817A", "href": "/services/videography" }, { "k": "advert", "service": "Facebook ads", "name": "Metabol", "pastel": "powder", "hex": "#C5DCF2", "edge": "#5F8FC2", "href": "/services/facebook-ads" }, { "k": "quiz", "service": "Funnels", "name": "Filtrazine", "pastel": "mint", "hex": "#C6EBD6", "edge": "#5FAE87", "href": "/services/funnels" }, { "k": "trust", "service": "Testimonials", "name": "Reviewazol", "pastel": "butter", "hex": "#F8EAAA", "edge": "#CFAE2E", "href": "/services/reputation" }, { "k": "data", "service": "Data", "name": "Datacillin", "pastel": "lilac", "hex": "#DDD0F4", "edge": "#9580CC", "href": "/services/data" } ], "tablets": [ { "k": "solar", "trade": "Solar", "shape": "disc", "shapeName": "Disc", "pastel": "butter", "hex": "#F8EAAA", "edge": "#CFAE2E", "href": "/solar" }, { "k": "windows", "trade": "Windows", "shape": "square", "shapeName": "Rounded square", "pastel": "lilac", "hex": "#DDD0F4", "edge": "#9580CC", "href": "/windows-and-doors" }, { "k": "heat", "trade": "Heat pumps", "shape": "hex", "shapeName": "Hexagon", "pastel": "blush", "hex": "#F8D0CB", "edge": "#D9817A", "href": "/heat-pumps" }, { "k": "aircon", "trade": "Aircon", "shape": "oblong", "shapeName": "Oblong", "pastel": "powder", "hex": "#C5DCF2", "edge": "#5F8FC2", "href": "/air-conditioning" } ], "teams": [ { "team": "Client success", "shape": "disc", "shapeName": "Disc", "pastel": "mint" }, { "team": "Creative strategy", "shape": "square", "shapeName": "Rounded square", "pastel": "butter" }, { "team": "Paid media", "shape": "hex", "shapeName": "Hexagon", "pastel": "powder" }, { "team": "People", "shape": "disc", "shapeName": "Disc", "pastel": "blush" }, { "team": "Data", "shape": "square", "shapeName": "Rounded square", "pastel": "lilac" }, { "team": "Video", "shape": "square", "shapeName": "Rounded square", "pastel": "blush" } ], "rules": [ "A capsule is a service; a tablet is a trade (or a team). Each pressed in its own pastel, outlined in ink, with its mark debossed in the darker edge.", "Every trade has its own tablet shape, and keeps it everywhere: a page, a map pin, a card, a sticker. Never swap them.", "Every service has a drug name, said with a straight face: it is the joke. The plain name always sits beside it.", "Flat and matte: no gloss, no shine. The only round things are pills; everything else has square corners." ] }, "photography": [ "The team are photographed in the lab: a white lab coat, often a prop of their job, on a plain warm cream backdrop. Warm and bright.", "Headshots and portraits are 4:5, always.", "A team loop film is a short silent loop of the same person in the same coat, 480 × 600 (4:5), as WebM and MP4 with a still poster; a small cut at 160 × 200.", "A film loops only when it is seen, never with sound, and never under reduced motion: the poster stands in.", "Client photos and films are their real jobs, their fitters and their vans. Never stock, never staged in a studio.", "Every clip is colour graded before anyone sees it, raw footage included, and stays warm and natural so it sits on paper.", "Never feature a client, their logo, ads or results while they are under NDA, or without their yes." ], "drawn": [ "Anything a pharmacist would write by hand is biro: Caveat, in biro blue, slightly rotated, as if written on the page.", "A note points at one thing. Its arrow starts beside the note and ends at its part, never crossing words, another arrow or another mark.", "The highlighter marks the words that matter, drawn left to right as they come into view.", "Stamps and the seal are for verdicts: Hiring, Case study, New film, Recalled, Approved. Set at an angle, as if pressed by hand.", "Depth is a hard ink shadow, offset down and right. No blur, no soft drop shadows." ], "layout": [ "Generous whitespace. A section breathes; if a piece feels full, split it in two rather than shrinking the type.", "Square corners on everything. The only round things are pills.", "Outlines are ink, 1.5 to 2px. Cards carry a hard ink shadow.", "Every section opens with a ruled header: its number, its kicker in mono, then the headline and its serif aside.", "Mobile first: everything reads at 390px wide, with nothing cropped and no sideways scroll.", "Paragraphs are never squeezed into a narrow column." ], "motion": [ "Light and smooth.", "Numbers count up the first time they are seen.", "Charts draw in, and the highlighter and the biro write themselves in.", "A card that is one link tilts toward the pointer and springs back; a hero's art drifts a little as you scroll.", "Under reduced motion, all of it stops: figures show at once, films show their poster, nothing drifts or tilts." ], "voice": { "rules": [ "Plain British English. Short sentences. Say what happens and who does it.", "Confident: state it. No hedging (\"we aim to\", \"might\", \"hopefully\"), no jargon, no buzzwords.", "Headlines make a point, not a topic.", "We sound like a lab: a pharmacy that sells growth. The joke is the pharmacy, never the client.", "A plain label first; the lab flavour in the line under it. Someone skimming must never have to decode a joke.", "The installers we work for are clients, always: never \"subjects\"." ], "lab": [ { "word": "Autopsy", "means": "The sales call: we take apart an installer's marketing. \"Book an autopsy\"." }, { "word": "Protocol", "means": "How we work, start to finish." }, { "word": "Trials", "means": "Results and case studies." }, { "word": "Licensed to deal", "means": "Our guarantees." }, { "word": "Lab notes", "means": "Guides, videos and free resources." } ], "menus": [ { "plain": "Trades", "lab": "Our clients" }, { "plain": "How it works", "lab": "One prescription" }, { "plain": "Results", "lab": "Trials" }, { "plain": "Pricing", "lab": "Guarantees" }, { "plain": "Resources", "lab": "Lab notes" }, { "plain": "About", "lab": "The lab" }, { "plain": "Contact us", "lab": "Real people" } ], "drugs": [ { "name": "Filmazepam", "service": "Videography" }, { "name": "Metabol", "service": "Facebook ads" }, { "name": "Filtrazine", "service": "Funnels" }, { "name": "Reviewazol", "service": "Testimonials" }, { "name": "Datacillin", "service": "Data" } ] }, "copy": [ "Figures are live and dated. Every number comes from the live data and says when it was true (\"as of 3 Nov 2026\"). Never typed from memory, never rounded up, never invented.", "A figure still to fill is marked as a placeholder, in biro, until it is filled in.", "A client's result is only what they have stated, word for word.", "Never say where our figures come from: no naming the tools or systems they are read from.", "Never feature a client, their name, logo, ads or results while they are under NDA, or without their yes.", "Money in pounds with commas: £71,000. Add \"+ VAT\" wherever a price is quoted ex VAT.", "The offer and both guarantees have one wording, kept in one place; never paraphrase them.", "Write to one reader as \"you\". The first line under a headline is about them, not us.", "Every call to action says what happens next and how long it takes.", "Every bio has one plain line on what the person does for the reader before any joke. No jokes about money, mistakes, shouting or names.", "Careers copy states the pay first.", "\"/ month\", never \"a month\" or \"per month\"." ], "examples": [ { "topic": "The name", "do": "On steroids", "dont": "Solar on Steroids · ON STEROIDS in a sentence · SoS" }, { "topic": "A headline", "do": "Video ads cut from your own jobs.", "dont": "Innovative full-funnel marketing solutions" }, { "topic": "Confidence", "do": "Fresh creative every week.", "dont": "We aim to try to refresh creative where possible." }, { "topic": "A figure", "do": "£71,000 completed revenue on under £3,000 of ad spend (as the client states it)", "dont": "Thousands of leads! Huge ROI!" }, { "topic": "The data", "do": "Every sale fed back to Facebook.", "dont": "Pulled live from our CRM and project tool." }, { "topic": "A call to action", "do": "Book an autopsy", "dont": "Schedule a free no-obligation consultation today" }, { "topic": "Colour", "do": "One pastel, on paper, outlined in ink.", "dont": "A gradient, a new blue, or five pastels fighting." } ] }