Styleguide

SBIT visual system

Static overview of the core design tokens and reusable UI components currently available in the theme.

Colors

Theme tokens

Black

--color-black

#1F1F1F

Dark

--color-dark

#171717

White

--color-white

#FFFFF4

White muted

--color-white-muted

#FFFFF4C7

White silent

--color-white-silent

#FFFFF480

Border

--color-border

#FFFFF40F

Navy

--color-navy

#01334C

Sky

--color-sky

#47A0D9

Coral

--color-coral

#FF5A5F

Petrol

--color-petrol

#236A84

Yellow

--color-yellow

#FFDC11

Magenta

--color-magenta

#D7106A

Mint

--color-mint

#2CF893

Typography

Type scale

H1

Line height
1
Kerning
0.05em
Weight
800

Selected work for ambitious brands

H2

Line height
0.85
Kerning
-0.03em
Weight
800

Selected work for ambitious brands

H3

Line height
0.9
Kerning
-0.03em
Weight
600

Selected work for ambitious brands

H4

Line height
1
Kerning
-0.03em
Weight
600

Selected work for ambitious brands

H5

Line height
1
Kerning
-0.03em
Weight
600

Selected work for ambitious brands

H6

Line height
1
Kerning
-0.03em
Weight
600

Selected work for ambitious brands

Lead

Line height
1.5
Kerning
–
Weight
400

A modular WordPress theme system with reusable Twig components, ACF blocks and a focused visual language for digital products, service pages and editorial content.

Paragraph

Line height
1.5
Kerning
–
Weight
400

A compact paragraph style for editorial copy, component descriptions and content sections. It should remain comfortable for longer reading while still feeling precise, structured and easy to scan in dense layouts.

Label

Line height
1
Kerning
0.2em
Weight
600

Interface label

Small

Line height
1.5
Kerning
–
Weight
400

Small interface text and secondary navigation.

Xsmall

Line height
1
Kerning
–
Weight
400

Tiny metadata and legal text.

Buttons

Actions and states