Foundations

Typography

Badho DS uses Inter for Latin script and Noto Sans Devanagari for Hindi (देवनागरी). Type sizes are defined as primitive tokens in the design token export.

Font Families

Latin — Inter

Inter

Light · Regular · Medium · SemiBold · Bold · ExtraBold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Hindi — Noto Sans Devanagari

नोटो

Light · Regular · Medium · SemiBold · Bold

अ आ इ ई उ ऊ ए ऐ ओ औ क ख ग घ ङ च छ ज झ ञ ट ठ ड ढ ण त थ

० १ २ ३ ४ ५ ६ ७ ८ ९

Font Weights — Inter

Light

300

Design is intelligence made visible.

Regular

400

Design is intelligence made visible.

Medium

500

Design is intelligence made visible.

SemiBold

600

Design is intelligence made visible.

Bold

700

Design is intelligence made visible.

ExtraBold

800

Design is intelligence made visible.

Letter Spacing Tokens

Tight

-0.5px

Tight letter-spacing — large display text

Normal

0px

Normal letter-spacing — body and UI text

Wide

0.5px

Wide letter-spacing — labels and captions

Wider

1px

WIDER TRACKING — OVERLINES AND TAGS

Type Scale

Role

Sample

Token

Size

Weight

Display XL

Badho Design System

--typography-size-28

28px

600

Display LG

Badho Design System

--typography-size-24

24px

600

Heading XL

Component Library

--typography-size-20

20px

600

Heading LG

Component Library

--typography-size-18

18px

600

Heading MD

Section Heading

--typography-size-16

16px

600

Body LG

The quick brown fox jumps over the lazy dog.

--typography-size-16

16px

400

Body MD

The quick brown fox jumps over the lazy dog. Default UI text.

--typography-size-15

15px

400

Body SM

Helper text, captions, and secondary information.

--typography-size-14

14px

400

Label LG

Form label · Strong emphasis

--typography-size-16

16px

500

Label MD

Button label · Field label

--typography-size-14

14px

500

Label SM

Chip · Tag · Small button

--typography-size-13

13px

500

Caption

Metadata · Timestamps · Supporting copy

--typography-size-12

12px

400

Overline

SECTION LABEL · OVERLINE TEXT

--typography-size-11

11px

600

Micro

Badge numbers · Tiny labels

--typography-size-10

10px

400

Usage Guidelines

Display

Hero headlines and marketing sections only. Never use for body copy or UI labels.

Heading

Section titles, card headers, modal headings. Follow XL → SM hierarchy.

Body

Primary reading text. LG for comfort, MD for UI copy, SM for dense or secondary content.

Label

Buttons, form labels, chips, nav items. Always Medium (500) or SemiBold (600).