Typography
Typography
All text styles in the SWCE design system using the Klean type family. Apply these styles consistently for visual hierarchy and readability.
Heading
Body
Label
Caption
Overline
Button
Price
Navigation
Colours
Colours
All colour variables in the SWCE design system. Use these tokens consistently across all components and layouts.
Brand
yellow
#FFED00
charcoal
#333333
white
#FFFFFF
black
#000000
Text
primary
#000000
secondary
#333333
inverse
#FFFFFF
accent
#FFED00
link
#333333
error
#E2001A
light-grey
#757575
warning
#C67507
success
#39853F
Background
primary
#FFFFFF
secondary
#F8F8F8
dark
#333333
brand
#FFED00
overlay
#000000
success-light
#E8F5E9
warning-light
#FFF3E0
error-light
#FFEBEE
Border
default
#E0E0E0
strong
#000000
focus
#FFED00
error
#E2001A
Interactive
primary
#FFED00
secondary
#333333
secondary-hover
#1A1A1A
disabled
#CCCCCC
error
#E2001A
success
#4CAF50
warning
#F49E0B
Surface
card
#FFFFFF
input
#FFFFFF
disabled
#F5F5F5
Header
base-bg
#000000
base-text
#FFFFFF
section-1-bg
#FFED00
section-1-text
#000000
section-2-bg
#333333
section-2-text
#FFFFFF
section-3-bg
#000000
section-3-text
#FFFFFF
Tabs
Tabs
Horizontal and vertical tabs examples rendered with the shared tabs template part used by the page builder.
Tabs: Horizontal
Overview
Use this area for a clear summary of the section and key messages visitors should see first.
Details
Include supporting information, specifications, or expanded context in a structured way.
FAQs
Answer common questions with concise guidance to reduce friction and improve clarity.
Tabs: Vertical
Overview
Use this area for a clear summary of the section and key messages visitors should see first.
Details
Include supporting information, specifications, or expanded context in a structured way.
FAQs
Answer common questions with concise guidance to reduce friction and improve clarity.
Accordions
Accordions
Single-open and multi-open accordion examples rendered with the shared accordion template used by the page builder.
Accordion: Single open
Planning & Discovery
Start with discovery to define scope, identify constraints, and align stakeholders on outcomes and timelines.
Design & Validation
Translate requirements into reusable interface patterns, then validate assumptions with feedback before build.
Build & Optimisation
Implement in modular components, test accessibility, and optimise performance prior to launch.
Accordion: Multiple open
Planning & Discovery
Start with discovery to define scope, identify constraints, and align stakeholders on outcomes and timelines.
Design & Validation
Translate requirements into reusable interface patterns, then validate assumptions with feedback before build.
Build & Optimisation
Implement in modular components, test accessibility, and optimise performance prior to launch.
Buttons
Tables
Tables
Structured content tables with strong borders, captions, and predictable row spacing for comparison and data-heavy layouts.
Table: Data preview
| Service | Timing | Notes |
|---|---|---|
| Consultation | 1 day | Includes project brief |
| Design system | 2 days | Includes token review |
| Implementation | 3 days | Delivered for review |