Foundations

Design tokens

Every component reads from these CSS variables. They are the universal layer the React, and eventually native, packages share. The values below come straight from packages/tokens/tokens.

Colour

Primary ramp (violet)

--violet-50 subtle

--violet-100

--violet-200

--violet-300

--violet-400

--violet-500

--violet-600 brand · #613AF5

--violet-700

--violet-800

--violet-900

Semantic

Success --color-success

Danger --color-danger

Warning --color-warning

Info --color-info

Neutrals

--neutral-50

--neutral-100

--neutral-200

--neutral-300

--neutral-400

--neutral-500

--neutral-600

--neutral-700

--neutral-800

--neutral-900

Type scale

Noto Sans across the board for Indic-script coverage. Sizes and line heights are paired tokens.

--display-6-size / --display-6-line Display 6

Good governance, by design

--headline-1-size / --headline-1-line Headline 1

Apply for a scheme

--headline-3-size / --headline-3-line Headline 3

Track your application

--headline-5-size / --headline-5-line Headline 5

Documents needed

--title-1-size / --title-1-line Title 1

Eligibility criteria

--body-1-size / --body-1-line Body 1

Body 1 is the default reading size, set in Noto Sans for broad Indic-script coverage.

--body-2-size / --body-2-line Body 2

Body 2 is used for helper text and dense UI.

Spacing

An 8-point grid with 4px half-steps.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

40px

--space-8

48px

Radius

--radius-xs 4px

--radius-sm 5px

--radius-md 8px

--radius-lg 12px

--radius-xl 16px

--radius-2xl 24px

--radius-full 999px

Shadow

--shadow-xs

--shadow-s

--shadow-md

--shadow-l

--shadow-xl

--shadow-xxl