← Home

UI System

Reference gallery for the SCB design system: colors, typography, and components. Light scheme only.

Colors

Palette lives in src/styles/_colors.scss. Every shade exists as both an SCSS variable ($color-{family}-{shade}) and a CSS custom property (var(--color-{family}-{shade})), so it works in modules and inline styles.

Main Color — Brand SCB
Primary
base#8F63DB
100#F1EDFB
200#CEC0F1
300#AD92E7
400#8F63DB
500#6E39B9
600#462279
700#220D3E
Secondary
base#FFCB62
100#FFEED9
200#FFCB62
300#D7A400
400#A98000
500#7D5D00
600#533D00
700#2D2000
Use Base Color for Main Categories
Orange
base#FE9000
100#FFEDE6
200#FFC7AA
300#FE9000
400#C87000
500#945100
600#633500
700#371B00
Green
base#4DAF90
100#B7FBE2
200#61D9B4
300#4DAF90
400#39866E
500#27604E
600#163C30
700#061B14
Blue
base#00C3D0
100#00EEFE
200#00C3D0
300#0099A4
400#00727A
500#004D52
600#002A2E
700#001416
Font Color
Grey
base#38363C
100#EFEFF0
200#C8C6CA
300#A19FA6
400#7D7A83
500#59565F
600#38363C
700#1A181C
Base
Black#000000
White#FFFFFF
// SCSS variable — inside a .scss file after @use
@use "styles/colors" as *;
.tag { background: $color-primary-100; color: $color-primary-600; }

// CSS custom property — anywhere (module SCSS or inline style)
.card {
  background: var(--color-white);
  color: var(--color-grey-base);
  border: 1px solid var(--color-grey-200);
}

// Inline style in JSX
<div style={{ background: "var(--color-orange-base)" }} />