Default card
Cut corner, a blue rule that draws in on hover, whole-card click target.
Find out more
Design system
The HBI system
Tokens, type, components and the rules that keep sixty pages looking like one bank.
Principles
Four rules the system enforces
- Say the number. Fees, rates and conditions live on the page. Components are built to carry a price.
- Blue does the work. Royal blue carries identity, bright blue marks the next action and the section rule. There is no second accent.
- Square, with one cut corner. The cut top-right corner appears on cards, photographs and hero panels. It never appears on buttons, inputs or tables.
- Nothing styled in isolation. Every value comes from a token. If a component needs something outside the scale, the scale is wrong.
Color
Three ramps
Read live from tokens.css.
Brand
--hbi-950#061A33--hbi-900#0A2240--hbi-800#00288A--hbi-700#0033AA--hbi-600#0051D6--hbi-500#0062E1--hbi-400#0089FF--hbi-300#5FB0FF--hbi-200#A9D2FF--hbi-100#D9EAFF--hbi-50#EFF6FFAction
--acc-800#003B99--acc-700#0047B8--acc-600#0062E1--acc-500#0089FF--acc-400#3AA0FF--acc-300#7FC0FF--acc-200#BFDFFF--acc-100#E3F1FFNeutral
--ink-950#0E1A2B--ink-900#1B2A41--ink-800#2A3A55--ink-700#3C4B6C--ink-600#55627D--ink-500#717C93--ink-400#9AA3B5--ink-300#C5CBD6--ink-200#DFE3EA--ink-100#EEF1F4--ink-50#F4F5F7 Typography
Two families, one scale
Libre Franklin sets headings and interface text, Inter sets body copy. Sizes are fluid between 360px and 1440px.
Display
Heading 1
Heading 2
Heading 3
Heading 4
Lead paragraph, used once beneath a section heading.
Body copy at 16px on a 1.62 line height, capped at 68 characters per line.
Eyebrow Components
Buttons, cards and forms
Brand card
Inverted. Reserved for one emphasis card in a grid.
Informational notice
Warning notice
Success notice
Height animates from 0fr to 1fr without measuring in JavaScript.
Adding data-exclusive closes siblings in the same group.
Spacing & shape
The scales
--s-14px--s-28px--s-312px--s-416px--s-624px--s-732px--s-948px--s-1064px--s-1296pxThe cut corner is set by --bevel (18px) and --bevel-lg (32px).
