Colors

Norio does not ship Bootstrap helpers such as .bg-primary or .text-900. Bind section styles to semantic tokens. Primitive ramps exist only so aliases can resolve.

How to use a color

    
.cta-2 {
  background-color: var(--color-surface-base);
  color: var(--color-text-tertiary);
}

.cta-2__link {
  color: var(--color-accent-base);
}

Because semantic tokens alias primitives per mode, the same rule flips in dark mode. Do not hardcode hex in SCSS.

Semantic tokens

Role	Variable	Resolves to
Surface base	`--color-surface-base`	neutral 0
Surface subtle	`--color-surface-subtle`	neutral 50
Surface raised	`--color-surface-raised`	neutral 100
Surface inverse	`--color-surface-inverse`	neutral 950
Text	`--color-text-tertiary`	neutral 950
Text muted	`--color-text-secondary`	neutral 500
Accent	`--color-accent-base`	brand 1
Accent strong	`--color-accent-strong`	brand 2
Border	`--color-border-base`	neutral 200

Neutral ramp (light)

neutral 0

#FFFFFF

neutral 50

#F4F4F4

neutral 100

#E8E8E8

neutral 200

#D1D1D1

neutral 300

#B3B3B3

neutral 500

#696969

neutral 700

#3A3A3A

neutral 800

#1A1A1A

neutral 900

#0A0A0A

neutral 950

#000000

Brand (light / dark)

brand 1 light

#000000

brand 2 light

#000088

brand 1 dark

#5B8CFF

brand 2 dark

#93B4FF

Change these values only in tokens/tokens.json. Do not replace the dark brand-1 #5B8CFF or dark neutral-500 #A3A3A3 without checking contrast.