HOMEPAGE

SYSTEM OVERVIEW

A compact system for consistent and scalable UI

This documentation outlines the foundational tokens and core components used to build the product interface. It serves as the single source of truth for design and development.

Role: Product & UI/UX Designer

Scope: Tokens & Components

Status: Production Ready

Design System Goals

01

Consistency

Uniformity in visual language and behavior minimizes cognitive load and builds trust with users.

02

Reusability

Modular components designed to work in various contexts, reducing code duplication and design debt.

03

Maintainability

A centralized token system allows for global updates with minimal effort, ensuring future-proofing.

System Scope

Included

Foundations: Color pallete, typography scale, iconography, shadows, and spacing grid.
Form Elements: Inputs, text area, and buttons with all interaction states.
Navigation: Top navigation patterns.

Foundations: Color pallete, typography scale, iconography, shadows, and spacing grid.
Form Elements: Inputs, text area, and buttons with all interaction states.
Navigation: Top navigation patterns.

Excluded

Illustrations Sets: These are handled by the separate Brand Assets library.
Complex Data Visualization: Specific charts (D3/Recharts) are outside the core UI kit scope.
Native Mobile Patterns: This system specifically targets responsive web interfaces.

Illustrations Sets: These are handled by the separate Brand Assets library.
Complex Data Visualization: Specific charts (D3/Recharts) are outside the core UI kit scope.
Native Mobile Patterns: This system specifically targets responsive web interfaces.

Design Tokens

COLOR PALLETE

primary

#2b7cee

primary

#2b7cee

primary

#2b7cee

bg-dark

#101822

bg-dark

#101822

bg-dark

#101822

text-main

#0d131b

text-main

#0d131b

text-main

#0d131b

text-sub

#4c6c9a

text-sub

#4c6c9a

text-sub

#4c6c9a

surface

#ffffff

surface

#ffffff

surface

#ffffff

border

#e7ecf3

border

#e7ecf3

border

#e7ecf3

TYPOGRAPHY

Display

Bold / 48px

Heading H1

Bold / 36px

Heading H2

Bold / 24px

Heading H3

SemiBold / 18px

Body Regular

Regular / 16px

Display

Bold / 48px

Heading H1

Bold / 36px

Heading H2

Bold / 24px

Heading H3

SemiBold / 18px

Body Regular

Regular / 16px

Display

Bold / 48px

Heading H1

Bold / 36px

Heading H2

Bold / 24px

Heading H3

SemiBold / 18px

Body Regular

Regular / 16px

SPACING

space-2

0.5rem (8px)

space-4

1rem (16px)

space-8

2rem (32px)

space-12

3rem (48px)

space-20

5rem (80px)

space-2

0.5rem (8px)

space-4

1rem (16px)

space-8

2rem (32px)

space-12

3rem (48px)

space-20

5rem (80px)

space-2

0.5rem (8px)

space-4

1rem (16px)

space-8

2rem (32px)

space-12

3rem (48px)

space-20

5rem (80px)

Core Components

Button Variations

Primary

Secondary

Ghost

Disabled

With Icon

Input Fields

Email Address

johndoe@company.com

Email Address

johndoe@company.com

Password

Password must be at least 8 characters

********

Password

Password must be at least 8 characters

********

Card Component

Design System Update

New

The new token set has been released. Check out the documentation for the updated color pallete.

Read details

Usage Examples

SCREEN: AUTHENTICATION

Welcome Back

Please enter your details to log in

Email Address

johndoe@company.com

Email Address

johndoe@company.com

Password

*******

Password

*******

Remember me

Forgot password?

Don't have an account?

SCREEN: ANALYTICS WIDGET

Traffic Overview

Last 30 days performance

Organic

+14.5%

View Full Design System in Figma

Complete components, variants, tokens, and documentation

View Full Design System