Brand Kit
Everything you need to represent Usable correctly — logo files to download, colour values to copy, and our visual language.
Assets are for press and partner use only. Please do not modify logos or use them in ways that misrepresent Usable. For permissions and press enquiries, contact usable@usable.dev.
Brand Colours
Typography
Type Scale
This is a hero heading
Large display headings stand tall
Page-level titles carry weight
Section headings anchor the page
Group headings organise related content
Subheadings create structure within a section
Component headings and card titles
Lead paragraphs open a section with a slightly elevated voice — a little more presence than body text, used to draw the reader in before the detail begins.
This is standard body text — the workhorse of the design. Comfortable to read at length, sized for sustained attention. When your copy is at this scale, readers settle in and stay.
Supporting text sits quietly below the main voice. Good for labels, captions, and secondary information that belongs on the page but shouldn't compete.
Fine print · Reserved for legal copy, timestamps, and metadata that must be present without drawing attention.
Typefaces
Links & emphasis
Inline links use brand blue on light backgrounds and blue-light on dark. Here is an inline hyperlink within body text — no underline by default, underline on hover.
Text emphasis: bold text for key terms and product names; italic text for notes, examples, and quiet emphasis.
Components
Base card styles
Default Card
Standard surface with subtle border and shadow. Foundation for most content blocks.
Highlighted Card
Blue-tinted background for featured content or callouts.
Accent Card
Orange left border. Use sparingly for high-priority items.
Article cards
Blog — date & author · single CTA
Article headline goes here
Blog page — badge, headline, date & author meta, excerpt, single primary CTA.
News — date & location · CTA + text link
Press release or announcement headline
News page — same structure as blog, but meta shows location and actions row adds a secondary text link.
Feature card
Feature title
Features and How It Works sections. Orange rounded icon is the key visual signature — short title, 1–2 sentence description.
Contact card
Department
Contact page — groups channels by team. Title icon, short description, and one or more contact method rows.
Team card
Team member name
Role & title
Team page — circular photo with blue border, name, role in brand blue, short bio, LinkedIn link pinned to the bottom.
LinkedInPricing card
Plan name
- Pricing page — price is the visual anchor
- Single full-width primary CTA
- Feature list with blue checkmarks
- Supports a "Most popular" floating badge
Offering card
Product or service name
About page — centered title and description, feature checklist, stacked full-width CTAs.
- Key capability or selling point
- Key capability or selling point
- Key capability or selling point