Salt Paayasam

Design system primitive gallery

This homepage now demonstrates every primitive available in the repository: shared design tokens, utility classes, typography labels, shadows, focus treatment, and motion behaviors.

Token primitives

Values from components/design-system.ts

  • Heading weight: 600
  • UI weight: 500
  • Body weight: 400
  • Card radius: 24px
  • Section radius: 40px
  • Pill radius: 1584px
  • Clay shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px, rgba(0, 0, 0, 0.04) 0px -1px 1px inset, rgba(0, 0, 0, 0.05) 0px -0.5px 1px
  • Hover shadow: rgb(0, 0, 0) -7px 7px
  • Hover transform: rotateZ(-8deg) translateY(-80%)

Utility primitives

ds-label-uppercase

ds-hard-offset-shadow

Color primitives

Background

#faf9f7

Text

#000000

Border

#dad4c8

Matcha 600

#078a52

Slushie 500

#3bd3fd

Lemon 500

#fbbd41

Ube 800

#43089f

Pomegranate 400

#fc7981