UI kit
Design system ported from op-monorepo's shared front-end library, rebuilt on Angular 22 signals and Tailwind v4 — no Angular Material, no CDK.
Palette
Tailwind reads these from the @theme block in src/styles/theme.css.
primary
50
100
200
300
400
500
600
700
800
900
neutral
50
100
200
300
400
500
600
700
800
900
success
50
100
200
300
400
500
600
700
800
900
warning
50
100
200
300
400
500
600
700
800
900
destructive
50
100
200
300
400
500
600
700
800
900
Type scale
Poppins, applied through utility classes.
.display-medium-smallThe quick brown fox
.heading-h3-semi-bold-desktopThe quick brown fox
.heading-h5-semi-bold-desktopThe quick brown fox
.heading-h6-medium-desktopThe quick brown fox
.paragraph-large-regularThe quick brown fox
.paragraph-medium-regularThe quick brown fox
.paragraph-medium-semi-boldThe quick brown fox
.paragraph-small-regularThe quick brown fox
.paragraph-x-small-regularThe quick brown fox
.paragraph-x-small-mediumThe quick brown fox
.paragraph-overline-smallThe quick brown fox
Elevation
.drop-shadow-x-small
.drop-shadow-small
.drop-shadow-medium
.drop-shadow-large
.drop-shadow-x-large
.inner-shadow-small