Media kit
Brand kit and design system
The logo, colour, type, icons and drawings behind Oceanblue Solutions, Inc., the single source of truth for a consistent brand.
01
Logo
Primary wordmark. Keep clear space around it and don't recolor or distort.
02
Color
One cobalt accent, a warm ink ramp, and white and paper surfaces. Click any value to copy it.
Action
Cobalt is the one action colour: primary buttons, links, selection and focus. About 10% of any page, so it always reads as clickable.
Cobalt
Primary buttons, links, focus
Cobalt deep
Hover and pressed
Cobalt tint
Selected chips, soft highlights
Cobalt light
Links and accents on navy
Brand
The two blues of the Oceanblue mark. The logo blue can carry text; aqua is for fills and marks only (2.7:1 on white).
Brand blue
Brand moments, illustration
Aqua
Fills and marks, never text
Ink
Navy text in three steps, about 30% of a page including one dark band. Every step is AA on white and on paper.
Ink (navy)
Headings, dark panels
Ink muted
Body copy
Ink subtle
Captions, metadata
Surfaces
White and a cool blue-grey alternate down a page, about 60% of it; hairlines separate, shadows only lift what you can interact with.
White
Base, cards
Paper
Alternating sections, footer
Paper deep
Image wells, pressed wells
Line
Hairlines, card borders
Line strong
Inputs, outline buttons
Status
Meaning only, never decoration. Amber is the single warm hue and means time-sensitive.
Success
Applied, operational
Warning
Deadlines, degraded
Danger
Errors, outages
03
Typography
IBM Plex Sans in eleven roles, fluid from phone to desktop, and IBM Plex Mono for code. Pages pick a role, never a pixel size.
The people and platforms.
Page title
Section headline
Sub-section headline
Card title
List item title
A lead paragraph introduces the section in a sentence or two.
Body copy sets the reading rhythm at a comfortable line height.
Secondary text inside cards and lists.
Label text
Posted 3 days ago
04
Components
Pill buttons in one height scale, hairline cards, and the one lit plane. No drop shadows at rest.
Buttons
Chips and cards
Card title
rounded-2xl, 1px line border, no shadow at rest.
05
Icons
The site icon set, drawn on one grid: 24×24 box, 1.5 stroke, round caps, currentColor. Click any icon to copy its SVG.
06
Drawings
Isometric wireframes: thin ink lines, square vertex nodes, one cobalt plane per drawing. Each stands for a service or an industry.