48Labs brand guidelines
How the name, the marks, the colour, the type and the voice are used. Share this link with anyone producing something that carries the 48Labs name.
Everything below describes what the live 48Labs website implements today — the colour values are read from the running stylesheet, not typed in. The formal guidelines document and the downloadable logo package have not been supplied yet. Sections that depend on them say so in place rather than showing a stand-in.
Brand overview
48Labs is a content marketing and production company in Peoria, Arizona, working out of its own studio.
The identity is built from two colours and a signal. Teal carries the considered, analytical half of the work — strategy, intelligence, the interface. Ember carries the action: it is the colour of the one thing a visitor is being asked to do on any given page, and it is used sparingly enough that it still means that. The small square dot that leads every section label is the signal motif; it appears at the head of the wordmark and nowhere it would compete with itself.
The system is theme-aware. Every surface, every piece of text and every control is defined once as a token and resolves differently in light and dark, so the brand is one set of decisions rather than two palettes kept in sync by hand.
Logo system
The wordmark is set in Manrope Bold with tight tracking, led by the signal dot. It is type, not artwork — which is why it stays crisp at any size and inherits the page's foreground colour.
48 takes the page foreground and LABS takes the interactive teal. That split is the mark: setting the whole word in one colour is not the 48Labs wordmark. The dot is always the interactive teal, never the ember.
Primary and secondary marks
One primary lockup, one secondary mark. There is no third.
Primary — wordmark lockup
The default in every context that has room for it: the site header, documents, decks, email signatures.
Secondary — app icon
For square, small or favicon-sized placements where the wordmark would not be legible. Ships as public/favicon.svg.
Approved colors
Read from the running stylesheet, so these are the values this site is painting right now. Switch the theme and they change with it — that is the point.
Teal
--teal · #165860
The considered half of the palette. Solid fills and quiet emphasis.
Teal interactive
--teal-bright · #256E74
Links, hovers, active navigation, focus rings, the signal dot.
Teal surface
--teal-surface · #E0EAEB
Tinted panels and chips behind teal text.
Ember
--ember · #A74C25
The accent. Read as text and as a border; never as a solid button fill.
Ember solid
--ember-solid · #B05027
The primary call to action. The one brand colour that does not change with the theme.
Ember surface
--ember-surface · #F0E4E0
Tinted panels behind ember text.
Background
--background · #F6F4EE
The page.
Surface
--surface · #FFFFFF
Cards and raised panels.
Elevated
--elevated · #EFECE6
Alternating bands and inset areas.
Foreground
--foreground · #11181C
Primary text.
Muted foreground
--muted-foreground · #5E5850
Secondary text.
Border
--border · #D6D1C7
Hairlines and control outlines.
Contrast is part of the palette
Every navigation and call-to-action pairing on this site meets WCAG AA, in light and dark and inside dark or light section overrides. It is checked rather than assumed: npm run audit:contrast resolves every foreground and background a class list puts together and measures the ratio in all four contexts. Pick colours from the pairs above; do not invent a new one for a one-off.
Typography
Three faces, each with one job.
We create the content your business needs to grow
Semibold or bold, tracking tightened, line height 1.2. Weights 300–800 are loaded.
Running text sits at 16px with a 1.7 line height and a slightly negative letter-spacing. Paragraphs are capped by a measure token rather than the container, so a line never runs the full width of the page.
Weights 300–700 are loaded.
Section label · metadata · status
Uppercase, 11px, letter-spaced. Reserved for eyebrows, metadata and status chips. It is not a body face and never sets a sentence.
Spacing and clear space
The layout system is defined and enforced. Formal clear-space rules for the mark are not — they arrive with the logo package.
What is defined
- One page gutter, capped at 1320px, stepping 20 / 32 / 40px by breakpoint.
- A named corner-radius scale — control, card, media, large, cinematic, pill. Square corners require an explicit choice.
- Measure tokens cap line length in ch, so the limit tracks the font rather than the viewport.
- Section spacing is a named step, not a hand-picked padding value.
Clear space around the mark
As an interim rule, keep clear space on all sides of the wordmark equal to the height of the 48. This is the spacing the site header already gives it, not a ratified rule — the formal specification comes with the guidelines document.
Dashed edge shows the interim clear-space boundary.
Minimum size
Observed from where the mark actually ships, pending a formal minimum.
20px wordmark, 8px dot.
18px wordmark, 8px dot. The smallest the mark ships at.
Below the wordmark’s legible size, use the icon instead.
Do not set the wordmark smaller than 18px. Below that the dot and the weight difference between 48 and LABS stop reading, and the secondary mark is the correct choice.
Incorrect usage
Each of these breaks something specific, not just taste.
Recolouring the mark
The teal on LABS and the dot are the mark. A single-colour wordmark, or an ember dot, is a different mark.
Substituting the type
The wordmark is Manrope Bold. Set in anything else it is a lookalike, not the logo.
Stretching or condensing
Scale proportionally. The tracking is part of the drawing.
Effects
No shadow, glow, outline, gradient or bevel on the mark.
Low-contrast placement
Do not place the mark where it falls below 3:1 against its background. Use the light or dark treatment, or add a scrim.
Ember as a surface for text
Ember is an accent and a solid CTA fill. It is not a section background with body copy on it.
Rebuilding the palette
Do not sample a colour from a screenshot. Use the tokens; screenshots carry whatever theme and compression they were captured with.
Boxing the mark
No container, badge or keyline around the wordmark. It sits directly on the surface.
Photography and visual direction
This is a working rule the repository enforces, not a mood board.
People
Do not commission or generate portraits presented as 48Labs staff, clients or guests. Equipment, hands at work, over-the-shoulder production and interface visuals only.
The studio
Room photography must be shot in the actual 48Labs rooms. Do not generate an interior and present it as the Podcast Studio, the Warehouse, the Workshop or the Lobby.
Text over an image always sits on a scrim rather than on the image directly — a photograph is not a background whose brightness you can predict. Media corners use the media radius token, and every asset in the repository carries a rights record naming its creator, licence and source.
Voice and tone
Plain, specific, and answerable for. The rules below are the ones the site actually checks.
Claim nothing unverified
No invented metrics, no percentages, no growth figures, no engagement or reach numbers that cannot be shown. Concept work is labelled as a concept and describes an intended outcome, never a delivered one.
Enforced by npm run audit:truth.
Say the specific thing
Prefer the concrete noun to the category. Name the room, the deliverable, the timeline. Sentences carry one idea; a paragraph that needs a colon and three clauses is two paragraphs.
Talk to one person
Second person, present tense, active voice. “Tell us what you need” — not “submit an inquiry”. Calls to action describe what happens next, not the mechanism.
Capitalisation
The company is 48Labs in prose. The wordmark sets LABS in caps as a drawing decision; that is not how the name is written in a sentence. Headings are sentence case; button labels are title case.
Downloads
Only files that genuinely exist are offered here. The rest are marked and will appear when supplied.
App icon
SVG, 64×64, rounded square on deep studio black with the teal signal. The live favicon.
Logo package
Wordmark and icon as SVG and PNG, light and dark, with lockups. Not yet supplied — the wordmark currently ships as type, not as a file.
Brand guidelines (PDF)
The full document, superseding these pages where the two differ.
Colour tokens
Machine-readable palette export for design tools. Not yet produced; the values on these pages are read live from the site.
Nothing on this page is a stand-in for a final asset. If a file is not offered above, it does not exist yet — please do not recreate it.
Brand contact
Questions about usage, or something that needs an exception, go to one place.
Email hello@48labs.studio with the placement, the size and where it will appear. If you are producing something on a deadline and the answer is not on this page, ask rather than guess — an exception granted is cheaper than a recall.
This page is unlisted: it is reachable by direct link and is not in the site navigation or the sitemap. Share the URL freely — it is public, and it is not a secret, just not advertised.