iota Design System

Color palette, typography, and component showcase

Brand Colors

Default

#0D4C6B

Smart

#2077B2

Deep Ocean

#175A87

Tradebind

#4E90BE

Breezewave

#C2D3E9

Skydrop

#E8EEF4

Secondary Colors

Default

#F96B0C

Hover

#FACBA8

Pressed

#EDA35A

Disabled

#C9B0B0

Background

#FFEE99

Neutral Colors

Black

#191919

Secondary

#717171

Tertiary

#8FA0AB

White

#FFFFFF

Line

#D7DDE3

Foxhill

#4C5663

Streamlined

#627280

Wild Dove

#9DABB4

Snowbreeze

#B8CCD4

Shortcut Colors

Total Employee

#D1A800

Clocked In

#2F59A2

Total Activity

#3B85B3

Status Colors

Success

#41BC82

Success BG

#B9E8D0

Error

#E45151

Error BG

#E7AEAE

Activity Type Badges

Supabase activity_types snapshot (Dec 5, 2025). Use these pills in the Activities data table to keep audit labels consistent.

Data Table Reference
Each badge pairs human-friendly copy with the raw type code returned by Supabase.

Clock In

Captured when a member clocks in from the mobile app.

Surface: Mobile app

Clock InCLOCK_IN

Clock Out

Standard mobile clock out event recorded when a member ends their shift.

Surface: Mobile app

Clock OutCLOCK_OUT

Change Device

Tracks when a member registers a new trusted device.

Surface: Device security

Change DeviceCHANGE_DEVICE

Accepted Invite

Member accepted a pending workspace invitation.

Surface: Account lifecycle

Accepted InviteACCEPTED_INVITE

Rejected Invite

Member declined a workspace invitation.

Surface: Account lifecycle

Rejected InviteREJECT_INVITE

First Login

First successful sign-in for a new member.

Surface: Account lifecycle

First LoginFIRST_LOGIN

Manual Clock In

Administrative manual clock in logged from the dashboard.

Surface: Admin tools

Manual Clock InMANUAL_CLOCK_IN

Manual Clock Out

Administrative manual clock out logged from the dashboard.

Surface: Admin tools

Manual Clock OutMANUAL_CLOCK_OUT

Kiosk Clock In

Clock in captured from a shared kiosk terminal.

Surface: Kiosk

Kiosk Clock InKIOSK_CLOCK_IN

Kiosk Clock Out

Clock out captured from a shared kiosk terminal.

Surface: Kiosk

Kiosk Clock OutKIOSK_CLOCK_OUT

Offline Clock In

Device stored the clock in offline and synced it later.

Surface: Offline cache

Offline Clock InOFFLINE_CLOCK_IN

Offline Clock Out

Offline clock out that syncs once the device reconnects.

Surface: Offline cache

Offline Clock OutOFFLINE_CLOCK_OUT

Automatic Clock Out

System clocked the member out automatically (e.g. max shift duration).

Surface: Automation

Automatic Clock OutAUTOMATIC_CLOCK_OUT

Kiosk Check In

Kiosk check-in that does not affect hours.

Surface: Kiosk

Kiosk Check InKIOSK_CHECK_IN

Kiosk Check Out

Kiosk check-out that does not affect hours.

Surface: Kiosk

Kiosk Check OutKIOSK_CHECK_OUT

Web Clock In

Clock in submitted from the browser portal.

Surface: Web app

Web Clock InWEB_CLOCK_IN

Web Clock Out

Clock out submitted from the browser portal.

Surface: Web app

Web Clock OutWEB_CLOCK_OUT

Compact Pills

Use the compact variant inside dense tables or filters where space is limited but consistency still matters.

CLOCK_IN

Mobile app

Clock In

CLOCK_OUT

Mobile app

Clock Out

CHANGE_DEVICE

Device security

Change Device

ACCEPTED_INVITE

Account lifecycle

Accepted Invite

REJECT_INVITE

Account lifecycle

Rejected Invite

FIRST_LOGIN

Account lifecycle

First Login

MANUAL_CLOCK_IN

Admin tools

Manual Clock In

MANUAL_CLOCK_OUT

Admin tools

Manual Clock Out

KIOSK_CLOCK_IN

Kiosk

Kiosk Clock In

KIOSK_CLOCK_OUT

Kiosk

Kiosk Clock Out

OFFLINE_CLOCK_IN

Offline cache

Offline Clock In

OFFLINE_CLOCK_OUT

Offline cache

Offline Clock Out

AUTOMATIC_CLOCK_OUT

Automation

Automatic Clock Out

KIOSK_CHECK_IN

Kiosk

Kiosk Check In

KIOSK_CHECK_OUT

Kiosk

Kiosk Check Out

WEB_CLOCK_IN

Web app

Web Clock In

WEB_CLOCK_OUT

Web app

Web Clock Out

Typography

Font: Poppins (Google Fonts)

Display - 40px
HeadlineSemibold - 40/100%
HeadlineMedium - 40/100%
Paragraph
Text
Semibold - 40/130%
Paragraph
Text
Medium - 40/130%
H1 - 32px
HeadlineSemibold - 32/100%
HeadlineMedium - 32/100%
Paragraph
Text
Semibold - 32/130%
Paragraph
Text
Medium - 32/130%
H2 - 28px
HeadlineSemibold - 28/100%
HeadlineMedium - 28/100%
Paragraph
Text
Semibold - 28/130%
Paragraph
Text
Medium - 28/130%
H3 - 18px
HeadlineSemibold - 18/100%
HeadlineMedium - 18/100%
Paragraph
Text
Semibold - 18/140%
Paragraph
Text
Medium - 18/140%
H4 - 16px
HeadlineSemibold - 16/100%
HeadlineMedium - 16/100%
Paragraph
Text
Semibold - 16/140%
Paragraph
Text
Medium - 16/140%
H5 - 14px
HeadlineSemibold - 14/100%
HeadlineMedium - 14/100%
Paragraph
Text
Semibold - 14/140%
Paragraph
Text
Medium - 14/140%
H6 - 12px
HeadlineSemibold - 12/100%
HeadlineMedium - 12/100%
Paragraph
Text
Semibold - 12/140%
Paragraph
Text
Medium - 12/140%

Buttons

Button Variants
Shadcn buttons with iota theme

Standard Variants

Loading State

Disabled State

Cards

Default Card
A simple card component

Card content goes here.

Branded Card
With brand accent
Accent Background
Using skydrop background

Shadows

Shadow Big

0px 8px 32px rgba(0,0,0,0.12)

Shadow Minimal

0px 2px 8px rgba(0,0,0,0.08)