Design-system specimen · v0.1

The BSAVA design language, made visible.

A living view of the typography, palette, spacing and semantic tokens available to every BSAVA digital product.

Typography

The responsive hierarchy is taken from the approved Styleguide/type-hierarchy frame. Inter supports text and compact headings; Decimal Ultra is specified for the two largest desktop display styles.

Text and smaller headings

Inter

Aa Bb Cc 0123456789

Regular: 400
Semibold: 600
Black: 900

Desktop display headings

Decimal Ultra

Aa Bb Cc 0123456789

Ultra: 950

The licensed Decimal Ultra face is bundled through the shared design-token stylesheet and used for the approved desktop display styles.

Display xl/Bold

Desktop H13.75rem / 4.5rem · 500 · -0.02em

Built for better care.

Display lg/Bold

Desktop H23rem / 3.75rem · 500 · -0.02em

Clear, confident headings.

Display md/Black

Desktop H32.25rem / 2.75rem · 900

A practical design language.

Display sm/Black

Desktop H4 · Tablet/Mobile H11.875rem / 2.375rem · 900

Responsive by default.

Display xs/Black

Tablet/Mobile H21.5rem / 2rem · 900

Compact display

Text xl/Black

Tablet/Mobile H31.25rem / 1.875rem · 900

Prominent supporting text

Text lg/Black

Desktop H5 · Tablet/Mobile H4 and H51.125rem / 1.75rem · 900

Strong compact heading

Text lg/Regular

Intro · all viewports1.125rem / 1.75rem · 400

Introduce a section with enough presence to guide the reader.

Text md/Regular

Paragraph · all viewports1rem / 1.5rem · 400

Body copy stays comfortable and readable across the experience.

Text sm/Regular

Small paragraph · all viewports0.875rem / 1.25rem · 400

Supporting details, labels and concise metadata.

Palette and semantic roles

Figma BSAVA-library-2026 named paint styles used by active product pages. The primitive ramps preserve Figma names; components consume the semantic roles below.

base

black#1d1c1d

white#ffffff

brand

25#f5faff

50#eaf8fd

100#d6f0f8

200#b8e3f1

300#97d5eb

400#4d9bdc

500#1a7fd6

600#0071cf

700#005daa

800#21155f

gray

25#fcfcfd

50#fafafa

100#f2f2f2

200#e6e6e6

300#cccccc

400#999999

500#808080

600#666666

700#4d4d4d

800#2f2e2f

900#1d1c1d

teal

25#e6f8f7

50#ccf1ef

100#99e3df

200#66d4ce

300#00bcb5

400#00b6a9

500#00b09c

600#009e8c

700#008c7c

800#007a6c

900#00685c

purple

25#f7f2fa

50#efe5f5

100#dfcbea

200#bf97d5

300#9f63bf

400#8b47b2

500#8232a7

600#752d96

700#672784

800#5a2273

900#4c1c62

fuchsia Red

500#b30040

600#a1003a

700#8e0033

800#7c002d

red

25#fef3f3

50#fde4e4

100#f8c9c9

200#f79a9a

300#f36b6b

400#f04747

500#f32727

600#da2323

700#c01f1f

800#a61b1b

error

600#d92d20

orange

500#f4941e

yellow

500#ffd200

600#e6bd00

success

50#ecfdf3

200#abefc6

600#079455

Semantic roles

background

--color-background

#ffffff

surface

--color-surface

#ffffff

surfaceText

--color-surface-text

#1d1c1d

surfaceTextMuted

--color-surface-text-muted

#666666

text

--color-text

#1d1c1d

textMuted

--color-text-muted

#666666

border

--color-border

#e6e6e6

action

--color-action

#0071cf

actionHover

--color-action-hover

#005daa

actionText

--color-action-text

#ffffff

focus

--color-focus

#0071cf

disabled

--color-disabled

#999999

hero

--color-hero

#21155f

categoryVet

--color-category-vet

#0071cf

categoryVetNurse

--color-category-vet-nurse

#8232a7

categoryStudent

--color-category-student

#007a6c

categoryConcession

--color-category-concession

#da2323

categoryText

--color-category-text

#ffffff

testimonial

--color-testimonial

#ffd200

testimonialText

--color-testimonial-text

#21155f

success

--color-success

#079455

successText

--color-success-text

#00685c

danger

--color-danger

#da2323

dangerText

--color-danger-text

#a61b1b

error

--color-error

#d92d20

warning

--color-warning

#f4941e

warningText

--color-warning-text

#1d1c1d

Spacing and shape

Figma active-page layout values; spacing variables are not published. The scale is expressed in rem so it respects user font-size preferences.

Spacing scale

Observed layout and component steps

0

1

0.25rem

2

0.5rem

3

0.75rem

4

1rem

5

1.25rem

6

1.5rem

8

2rem

9

2.25rem

10

2.5rem

11

2.75rem

12

3rem

16

4rem

20

5rem

24

6rem

0.5

0.125rem

1.5

0.375rem

2.5

0.625rem

3.5

0.875rem

4.5

1.125rem

Radius

Shape hierarchy

none0

xxs0.125rem

xs0.25rem

sm0.375rem

md0.5rem

lg0.625rem

xl0.75rem

2xl1rem

3xl1.25rem

4xl1.5rem

full9999px

pill9999px

Elevation

Surface separation

shadow.xs0 1px 2px rgb(16 24 40 / 5%)

shadow.focusBrand0 1px 2px rgb(16 24 40 / 5%), 0 0 0 4px rgb(158 119 237 / 24%)

shadow.focusGray0 1px 2px rgb(16 24 40 / 5%), 0 0 0 4px rgb(152 162 179 / 14%)

shadow.sm0 1px 3px rgb(16 24 40 / 10%), 0 1px 2px rgb(16 24 40 / 6%)

shadow.md0 4px 8px -2px rgb(16 24 40 / 10%), 0 2px 4px -2px rgb(16 24 40 / 6%)

shadow.lg0 12px 16px -4px rgb(16 24 40 / 8%), 0 4px 6px -2px rgb(16 24 40 / 3%)

shadow.xl0 20px 24px -4px rgb(16 24 40 / 8%), 0 8px 8px -4px rgb(16 24 40 / 3%)

Breakpoints

Responsive thresholds

sm: 40rem
md: 48rem
lg: 64rem
xl: 80rem

Button styles

Figma BSAVA-high-fidelity / Button styles (1425:23429). The shared Button component is composed locally here and in its Storybook specification, with browser checks guarding visual parity.

Buttons come in sizes: XL, large, medium, small

Buttons have optional icons (leading and trailing):

Large button, showing all the states:

Primary style

Secondary colour

Secondary grey

Link colour

Link grey

CSSFigma-backed component tokens

.button {
  min-height: var(--button-size-large-height);
  padding-inline: var(--button-size-large-padding-inline);
  gap: var(--button-size-large-gap);
  font: 600 var(--button-size-large-font-size) /
    var(--button-size-large-line-height) var(--font-body);
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);
}