Sadrazam – Colors Showcase

Complete color system: theme, neutral, semantic, background, text, and interaction colors

Primary Palette

Core brand colors used across all primary UI elements

Light #54B4CB
Base #0A96B7
Dark #025B70
CSS Variables --color-pri-300 --color-pri-500 --color-pri-700
BG Classes .tbc-pri-300 .tbc-pri-500 .tbc-pri-700
Text Classes .tc-pri-300 .tc-pri-500 .tc-pri-700

Secondary Palette

Warm accent colors for secondary actions and highlights

Light #FCEEBF
Base #FEA360
Dark #F1651D
CSS Variables --color-sec-300 --color-sec-500 --color-sec-700
BG Classes .tbc-sec-300 .tbc-sec-500 .tbc-sec-700
Text Classes .tc-sec-300 .tc-sec-500 .tc-sec-700

Tertiary Palette

Purple accent colors for distinctive UI elements

Light #EBDAFF
Base #A062E3
Dark #5E2D91
CSS Variables --color-ter-300 --color-ter-500 --color-ter-700
BG Classes .tbc-ter-300 .tbc-ter-500 .tbc-ter-700
Text Classes .tc-ter-300 .tc-ter-500 .tc-ter-700

Neutral Palette

Full grey scale from white to near-black, used for backgrounds, borders, and text

13-unit RGB intervals. Dark mode swap: N ↔ (900 − N + 50)

Zero #FFFFFF
Grey 50 #FAFAFA
Grey 100 #EDEDED
Grey 150 #E0E0E0
Grey 200 #D3D3D3
Grey 250 #C6C6C6
Grey 300 #B9B9B9
Grey 350 #ACACAC
Grey 400 #9F9F9F
Grey 450 #929292
Grey 500 #858585
Grey 550 #787878
Grey 600 #6B6B6B
Grey 650 #5E5E5E
Grey 700 #515151
Grey 750 #444444
Grey 800 #373737
Grey 850 #2A2A2A
Grey 900 #1D1D1D
Grey 910 #171717
Grey 950 #101010
Constants --color-white --color-black --color-white--f --color-black--f

Semantic Colors

Interaction feedback: safe, notice, caution, warning, and danger states in three tints

Safe
Safe 50 #EEF9D8
Safe 500 #7A963D
Safe 800 #44581E
BG Variables --bg-safe-50 --bg-safe-500 --bg-safe-800
Text Variables --color-safe-50 --color-safe-500 --color-safe-800
Notice
Notice 50 #EEF3FB
Notice 500 #043C96
Notice 800 #051F48
BG Variables --bg-notice-50 --bg-notice-500 --bg-notice-800
Text Variables --color-notice-50 --color-notice-500 --color-notice-800
Caution
Caution 50 #FBE6F4
Caution 500 #E600A0
Caution 800 #922774
BG Variables --bg-caution-50 --bg-caution-500 --bg-caution-800
Text Variables --color-caution-50 --color-caution-500 --color-caution-800
Warning
Warning 50 #FFF8E1
Warning 500 #FFB300
Warning 800 #A17416
BG Variables --bg-warning-50 --bg-warning-500 --bg-warning-800
Text Variables --color-warning-50 --color-warning-500 --color-warning-800
Danger
Danger 50 #FFEBEE
Danger 500 #D32F2F
Danger 800 #9A2424
BG Variables --bg-danger-50 --bg-danger-500 --bg-danger-800
Text Variables --color-danger-50 --color-danger-500 --color-danger-800
Border Variables --color-border-safe --color-border-notice --color-border-caution --color-border-warning --color-border-danger

Background Colors

Light and dark grey background variables with their theme-adaptive behavior

Adaptive variants swap in dark mode. Fixed (--f) variants stay constant.

Light BGs (adaptive)
Zero #FFFFFF
50 #FAFAFA
100 #EDEDED
150 #E0E0E0
200 #D3D3D3
Classes .tbc-grey-zero .tbc-grey-50 .tbc-grey-100 .tbc-grey-150 .tbc-grey-200
Dark BGs (fixed)
700 #515151
800 #373737
850 #2A2A2A
900 #1D1D1D
Classes .tbc-grey-700--f .tbc-grey-800--f .tbc-grey-850--f .tbc-grey-900--f

Text Colors – Light Theme

Text hierarchy for light backgrounds: primary, secondary, hint, and divider

Primary The quick brown fox --text-dark-1 #171717
Secondary The quick brown fox --text-dark-2 #505050
Hint The quick brown fox --text-dark-3 #848484
Divider The quick brown fox --text-dark-4 #B9B9B9
Classes .tc-text-dark-1 .tc-text-dark-2 .tc-text-dark-3 .tc-text-dark-4
Special .tc-text-black .tc-text-black--f

Text Colors – Dark Theme

Text hierarchy for dark backgrounds: primary, secondary, hint, and divider

Primary The quick brown fox --text-light-1 #EBE7DE
Secondary The quick brown fox --text-light-2 #C8C3B8
Hint The quick brown fox --text-light-3 #A59EA5
Divider The quick brown fox --text-light-4 #7B7B7B
Classes .tc-text-light-1 .tc-text-light-2 .tc-text-light-3 .tc-text-light-4
Special .tc-text-white .tc-text-white--f

Link Colors

Dedicated link colors for light and dark themes, including blue link variants

Dark Link Click this link --color-link-dark #171717
Dark Hover Click this link --color-link-dark-hover #1C1C1C
Blue Link Click this link --link-blue-dark #0066CC
Light Link Click this link --color-link-light #EBE7DE
Blue Light Click this link --color-link-blue-light #8282FF
Class .tc-link-blue-dark

Border Colors

Light and dark border variables for cards, inputs, and dividers

Light Borders
100 #EDEDED --color-grey-100
150 #E0E0E0 --color-grey-150
250 #C6C6C6 --color-grey-250
400 #9F9F9F --color-grey-400
Dark Borders
700 #515151 --color-grey-700--f
800 #373737 --color-grey-800--f
850 #2A2A2A --color-grey-850--f

Action & Brand Colors

Action feedback colors and third-party brand colors

Actions
Delete #EF8177 --color-action-delete
Insert #A6E094 --color-action-insert
Red #FF0000 --color-red
Brand
Facebook #4267B2 --color-facebook-dark
Google #DD4B39 --color-google-dark
Twitter #55ACEE --color-twitter-dark

Backdrop & Overlay

Semi-transparent overlays for modals and drawers

Light Backdrop rgba(25,25,25, 0.4) --backdrop-background
Dark Backdrop rgba(25,25,25, 0.8) --backdrop-background (dark)
Blur --backdrop-blur: 1px

Semantic Colors – Live Preview

How semantic colors look as alert-style cards using actual CSS variables

Safe: Your changes have been saved successfully.
Notice: A new version is available for download.
Caution: This action requires elevated permissions.
Warning: Your session will expire in 5 minutes.
Danger: This action cannot be undone. Proceed with caution.