Foundations
Foundations make the interface recognisable without making every page look like a campaign poster.
- Version
- 4.0
- Status
- Public standard
Equal Threshold identity
Two equal bars pass through an opened boundary: equality is not waiting outside the door. The mark is direct, civic and legible at favicon size without reducing women to a symbol or stereotype.
- 01
Identity
Use the Equal Threshold mark with the English name on English pages and the Hindi name on Hindi pages. Its two equal bars open a vertical boundary; preserve its geometry, clear space and canonical mulberry, ink and paper colours. Never combine both languages in one decorative lockup.
- 02
Colour
A warm neutral foundation with semantic accents. Sage signals care, indigo signals learning and law, mulberry signals movement and primary action, and red is reserved for immediate danger or serious errors.
- 03
Page modes
Care, learning and movement use distinct canvases, accents and entry priorities. Colour follows meaning, never array order or decoration.
- 04
Typography
Newsreader for English display, Source Sans 3 for English body and interface, Noto Serif Devanagari for Hindi display and Mukta for Hindi body. Devanagari display leading never falls below 1.4, including at 18 / 20 / 22 text sizes. Sentence case, no all caps, no monospace, no tracked Hindi.
- 05
Scrolling and overflow
The document never scrolls sideways. Genuine page, menu, navigation and table scrollers use the same visible high-contrast track and thumb, work with pointer and keyboard input, preserve forced-colour system controls, and never hide overflow defects.
- 06
Grid and spacing
12 / 8 / 4 columns, up to 1376px site width, 704px reading width, and variable section density based on purpose. Space and tonal fields carry more hierarchy than borders.
- 07
Imagery and illustration
The current release is deliberately image-free. A future image enters only through a separate human approval process with consent, provenance and intergenerational representation. Never stage harm.
- 08
Iconography
Icons clarify an action or status and always have a text label when meaning is essential. No default circles, fists, shields or decorative symbols.
- 09
Motion
Use 150–220ms motion only to explain a state, feedback or orientation. Reduced motion removes it; sensitive pages work without it.
- 10
Language
Build English and Hindi from the first wireframe. Do not shrink Hindi, force line breaks, or put both languages into one unlabelled paragraph.
Canonical tokens
Colour
Warm canvas #F6F1E9Default page background
Soft canvas #EEE7DDAlternate editorial field
Paper #FFFDF9Reading surfaces and controls
Aubergine ink #211A20Primary text and civic masthead
Muted ink #625A5ESupporting text
Editorial rule #CFC4BBDividers and component outlines
Brand coral #C52D57Identity and primary action
Deep coral #8F1738Hover and selected states
Civic blue #3F4F87Links and legal information
Support sage #42675CSupport, guidance and reassurance
Warm highlight #F1AD62Small editorial emphasis
Emergency red #B42318Immediate danger and critical errors only
Use no more than two accents in one viewport. Emergency red is reserved for immediate danger; colour never carries legal or safety meaning alone.
Typography
Newsreader gives English headings editorial warmth; Source Sans 3 keeps English body and interface text direct. Noto Serif Devanagari and Mukta give Hindi the same expressive hierarchy with its natural line height and no tracked styling.
| Role | Desktop | Mobile | Weight |
|---|---|---|---|
| Editorial display | 44–86/42–83 | 39–76/44–86 | 600 |
| Page title, H1 | 37–59/38–61 | 37–54/38–55 | 600 |
| Section title, H2 | 30–42/32–45 | 30–42/32–45 | 600 |
| Subsection, H3 | 23–29/27–34 | 23–29/27–34 | 600 |
| Intro text | 20/32 | 20/32 | 400 |
| Body | 18/29 | 18/29 | 400 |
| Navigation | 16/24 | 16/24 | 600 |
| Supporting text | 16/25 | 16/25 | 400 |
| Source metadata | 15/23 | 15/23 | 400 |
Spacing
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128
Section spacing: 80–96px desktop, 64–72px tablet, 48–56px mobile.
Shape and depth
- Primary controls: 3px
- Maximum control radius: 6px
- Content panels: 0px
- Rules and contrast create hierarchy. No decorative shadows; menus use an opaque field and a clear border.