Back to Homepage

Style Guideline

SAIBA Digital Design System

Colors

Our color system uses semantic naming with 11-step scales for consistency and accessibility.

Primary

950
900
800
700
600
500
400
300
200
100
50

Secondary

950
900
800
700
600
500
400
300
200
100
50

Background

950
900
800
700
600
500
400
300
200
100
50

Background Alt

950
900
800
700
600
500
400
300
200
100
50

Text

900
800
700
600
500
400
300
200
100
50

Success

950
900
800
700
600
500
400
300
200
100
50

Error

950
900
800
700
600
500
400
300
200
100
50

Service Colors

Service 1
Service 2
Service 3
Service 4

Typography

Our typography system uses responsive fluid scaling with four font families.

Font Families

SAIBA DIGITAL Rift Branding, logos
The Quick Brown Fox Indivisible Headings, titles
The quick brown fox jumps over the lazy dog. Inter Body text, UI
The Quick Brown Fox Adriane Editorial, accents

Text Sizes

Fluid scaling from 400px to 1280px viewport width

Aa --text-tn Tiny
Aa --text-xs Extra Small
Aa --text-sm Small
Aa --text-md Medium
Aa --text-lg Large
Aa --text-xl Extra Large
Aa --text-2xl 2XL
Aa --text-3xl 3XL
Aa --text-4xl 4XL
Aa --text-5xl 5XL
Aa --text-6xl 6XL
Aa --text-7xl 7XL
Aa --text-8xl 8XL
Aa --text-9xl 9XL
Aa --text-10xl 10XL
Aa --text-12xl 12XL
Aa --text-13xl 13XL
Aa --text-14xl 14XL
Aa --text-16xl 16XL

Line Heights

Loose (1.75)

Multiple lines of text

Normal (1.5)

Multiple lines of text

Tight (1.25)

Multiple lines of text

None (1)

Multiple lines of text

Spacing

Consistent spacing scale with fixed and fluid values.

Step 1 0.25rem fixed
Step 2 0.5rem fixed
Step 3 0.75rem fixed
Step 4 1rem fixed
Step 5 1.25rem - 1.5rem fluid
Step 6 1.5rem - 2rem fluid
Step 7 2rem - 3rem fluid
Step 8 2.5rem - 4rem fluid
Step 9 3.5rem - 6rem fluid
Step 10 5rem - 8rem fluid
Step 11 6rem - 10rem fluid
Step 12 7rem - 12rem fluid
Step 13 9rem - 16rem fluid
Step 14 13rem - 24rem fluid

Components

Reusable UI components with multiple variants and sizes.

Button Variants

Primary
Secondary
Ghost

Button Sizes

Small
Medium
Large
Extra Large

Button States

Default
Disabled

Button with Icons

Icon Before
Icon After
With Icon
Icon Only

All Variants × All Sizes

Primary

Secondary

Ghost

Layout & Grid

12-column grid system with fluid gutters and margins.

12 Columns
1rem Gutter
1.5-2rem Margin
1920px Max Width

12-Column Grid

1
2
3
4
5
6
7
8
9
10
11
12

Column Spans

span 12
span 6
span 6
span 4
span 4
span 4
span 3
span 3
span 3
span 3

Border Radius

Consistent border radius scale for UI elements.

Small 0.125rem
Medium 0.25rem
Large 0.5rem
Full Circle

Icons

Heroicons icon set for consistent iconography across the brand.

Home
User
Settings
Search
Email
Phone
Arrow Right
Arrow Left
Check
Close
Plus
Minus

Breakpoints

Responsive design adapts to these screen sizes.

mobile-sm 320px Extra small mobile devices
mobile 480px Small mobile devices
tablet-sm 768px Small tablets / large phones
tablet 1024px Large tablets
laptop 1280px Laptop screens
desktop 1440px Desktop screens
desktop-wide 1920px Large desktops

Accessibility

WCAG 2.1 AA compliant design with high contrast support.

Accessibility Color

Accessibility
Accessibility Hover

Focus States

All interactive elements have visible focus indicators for keyboard navigation.

Focus link example

High Contrast Mode

High contrast theme available for improved visibility.

Text on background Primary color Secondary color