CyprusAcc ColorPalette

Design tokens and color system for the CyprusAcc platform.

Admin Dashboard

Light Mode

Core

#F9F7F4

background

#4A4639

foreground

#C45D35

primary

#FFFFFF

primary-fg

#EDE9E1

secondary

#6B6559

secondary-fg

#EDE9E1

accent

#3C3830

accent-fg

UI Elements

#F3F0EB

card

#25231F

card-fg

#FFFFFF

popover

#38352E

popover-fg

#EBE7DF

muted

#807B72

muted-fg

#DDD9D1

border

#B5B1A8

input

Status & Charts

#25231F

destructive

#C45D35

ring

#A8512D

chart-1

#9D6ADB

chart-2

#E2DED5

chart-3

#D9C9EB

chart-4

#A65430

chart-5

Sidebar

#F4F1EC

sidebar

#545149

sidebar-fg

#C45D35

sidebar-primary

#EDE9E1

sidebar-accent

#EBEBEB

sidebar-border

#C0C0C0

sidebar-ring

Dark Mode

Core

#2E2D2A

background

#F2F1EF

foreground

#D97850

primary

#25231F

primary-fg

#F9F7F4

secondary

#3F3D38

secondary-fg

#282520

accent

#F4F1EC

accent-fg

UI Elements

#343230

card

#F9F7F4

card-fg

#3A3835

popover

#E4E3E0

popover-fg

#262422

muted

#C2BBB0

muted-fg

#4D4A44

border

#67635A

input

Status & Charts

#E5503C

destructive

#D97850

ring

#A8512D

chart-1

#9D6ADB

chart-2

#282520

chart-3

#3D2E5C

chart-4

#A65430

chart-5

Sidebar

#29281F

sidebar

#C9C4B8

sidebar-fg

#474747

sidebar-primary

#1C1B19

sidebar-accent

#EBEBEB

sidebar-border

#C0C0C0

sidebar-ring

Border Radius

12px

sm

rounded-sm

14px

md

rounded-md

16px

lg

rounded-lg

20px

xl

rounded-xl

24px

2xl

rounded-2xl

28px

3xl

rounded-3xl

9999px

full

rounded-full

Box Shadows

2xs

2xs

shadow-2xs

xs

xs

shadow-xs

sm

sm

shadow-sm

md

md

shadow-md

lg

lg

shadow-lg

xl

xl

shadow-xl

2xl

2xl

shadow-2xl

Shadow Values

2xs0 1px 3px 0 rgba(0,0,0,0.05)
xs0 1px 3px 0 rgba(0,0,0,0.05)
sm0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)
md0 1px 3px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.1)
lg0 1px 3px rgba(0,0,0,0.1), 0 4px 6px -1px rgba(0,0,0,0.1)
xl0 1px 3px rgba(0,0,0,0.1), 0 8px 10px -1px rgba(0,0,0,0.1)
2xl0 1px 3px 0 rgba(0,0,0,0.25)

Typography

Font Families

Outfit

font-sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Geist Mono

font-mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Font Sizes

xsThe quick brown fox12px / 16px
smThe quick brown fox14px / 20px
baseThe quick brown fox16px / 24px
lgThe quick brown fox18px / 28px
xlThe quick brown fox20px / 28px
2xlThe quick brown fox24px / 32px
3xlThe quick brown fox30px / 36px
4xlThe quick brown fox36px / 40px
5xlThe quick brown fox48px / 1

Font Weights

Aa

normal

400

Aa

medium

500

Aa

semibold

600

Aa

bold

700

Spacing Scale

0
0px
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Quick Links

Admin DashboardClient DashboardProduct Plan