HSBC Design System

# HSBC Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by HSBC. "HSBC Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** HSBC Design System
**Owner:** HSBC
**Official documentation:** https://create.hsbc/
**Visual character:** Global-bank formality: the hexagon red used with extreme discipline, Univers Next neutrality, and square-cornered financial gravitas.

---

## Summary

Design system for HSBC's banking platforms.

_Confidence: low. This system publishes little token detail — values below are a conservative, partial reading. create.hsbc gates most detail behind login; values are a conservative reading of public surfaces._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| HSBC Red | `#db0011` | `--hsbc-red` | Brand hexagon and primary accents |
| Text | `#333333` | `--hsbc-text` | Primary text |
| Secondary Text | `#767676` | `--hsbc-text-secondary` | Secondary text |
| White | `#ffffff` | `--hsbc-white` | Surfaces |
| Light Grey | `#f4f4f4` | `--hsbc-grey-light` | Subtle background |
| Border | `#d7d8d6` | `--hsbc-border` | Borders |
| Success | `#008580` | `--hsbc-success` | Positive states (teal-green) |
| Error | `#a8000b` | `--hsbc-error` | Errors |

## Typography

- **Body:** Univers Next — weights 400, 600, 700 — `'Univers Next', Arial, Helvetica, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `38px` | `46px` |
| h2 | `28px` | `36px` |
| body | `16px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

```css
/* HSBC Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://create.hsbc/ */

:root {
  /* Color */
  --hsbc-red: #db0011; /* Brand hexagon and primary accents */
  --hsbc-text: #333333; /* Primary text */
  --hsbc-text-secondary: #767676; /* Secondary text */
  --hsbc-white: #ffffff; /* Surfaces */
  --hsbc-grey-light: #f4f4f4; /* Subtle background */
  --hsbc-border: #d7d8d6; /* Borders */
  --hsbc-success: #008580; /* Positive states (teal-green) */
  --hsbc-error: #a8000b; /* Errors */

  /* Typography */
  --font-body: 'Univers Next', Arial, Helvetica, sans-serif;

  /* Type scale */
  --text-h1: 38px /* line-height 46px */;
  --text-h2: 28px /* line-height 36px */;
  --text-body: 16px /* line-height 24px */;
  --text-small: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Radius */
  --radius-default: 0;
}
```

## Engineering profile

- **Source model:** Closed

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of HSBC Design System by HSBC — Design system for HSBC's banking platforms. Character: Global-bank formality: the hexagon red used with extreme discipline, Univers Next neutrality, and square-cornered financial gravitas. Use a primary colour near #db0011, the typeface "Univers Next" (or a close equivalent), corner radius around 0, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [HSBC Design System documentation](https://create.hsbc/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/hsbc-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._