System Overview

Why Content Design Matters

Inconsistent labels, confusing error messages, and unclear helper text create friction for users. The Content Design System provides a single source of truth for all text across government services—ensuring every citizen gets the same clear, helpful guidance regardless of which service they use.

Plain Language

Simple words everyone understands

Consistency

Same labels across all services

Accessibility

Works for all citizens and assistive tech

What's Included

Standardized field labels50+

Helper text templates30+

Error message patterns40+

Success message templates20+

Validation messages25+

Consent language templates15+

Button text standards30+

Placeholder text examples20+

Benefits

Faster Development

No need to write labels and messages from scratch every time

Better User Experience

Consistent, familiar language reduces cognitive load

Easier Translation

Single content library makes multilingual support simpler

WCAG Compliance

All content tested for accessibility and plain language

Content Design Principles

1

Use Plain Language

Write for a reading level of Class 8-10. Avoid jargon, technical terms, and government acronyms.

Examples:

•❌ 'Domicile Certificate' → ✅ 'Certificate proving you live in this state'
•❌ 'As per Section 4(2)' → ✅ 'According to the rules'
•❌ 'Authentication failed' → ✅ 'The password you entered is incorrect'

2

Be Specific and Actionable

Tell users exactly what to do. Don't just identify problems—provide solutions.

Examples:

•❌ 'Invalid input' → ✅ 'Enter a 10-digit mobile number'
•❌ 'Error' → ✅ 'Email is required. Please enter your email address.'
•❌ 'Check format' → ✅ 'Enter Aadhaar as 1234 5678 9012'

3

Be Concise

Respect user's time. Use the fewest words possible while remaining clear.

Examples:

•❌ 'Please enter your complete full legal name as it appears on your official documents' → ✅ 'Full name as shown on your ID'
•❌ 'Click on the button below to proceed' → ✅ 'Continue'
•❌ 'In order to submit' → ✅ 'To submit'

4

Use Positive Language

Frame messages positively. Focus on what users can do, not what they can't.

Examples:

•❌ 'Don't use special characters' → ✅ 'Use only letters and numbers'
•❌ 'You can't proceed without...' → ✅ 'To continue, please provide...'
•❌ 'Missing required field' → ✅ 'Please enter your email address'

5

Maintain Consistent Terminology

Use the same words for the same concepts everywhere. Don't vary just for style.

Examples:

•✅ Always 'Mobile Number' (not 'Phone', 'Cell', 'Contact Number')
•✅ Always 'Sign In' (not 'Log In', 'Login', 'Enter')
•✅ Always 'Aadhaar Number' (not 'UID', 'UIDAI Number', 'Aadhaar ID')

6

Respect User Dignity

Be respectful and empathetic. Avoid blame. Assume users are trying their best.

Examples:

•❌ 'You entered the wrong password' → ✅ 'The password is incorrect'
•❌ 'You failed to...' → ✅ 'Please provide...'
•❌ 'Invalid' → ✅ 'Enter a valid...'

Standardized Field Labels

Label Writing Rules

✅ DO:

• Use sentence case (not Title Case)
• Be concise (1-4 words ideal)
• Use familiar everyday language
• Mark required fields with asterisk *
• Add (Optional) for optional fields

❌ DON'T:

• Use colons after labels
• Use abbreviations (except widely known ones)
• Use ALL CAPS or Title Case
• Include instructions in labels
• Use technical jargon

Personal Information

Label	Example
Full Name	Priya Sharma
Date of Birth	15/05/1990
Gender	Female
Father's Name	Rajesh Kumar Sharma
Mother's Name	Sunita Sharma

Contact Information

Label	Example
Mobile Number	9876543210
Email Address	priya@example.com
Address Line 1	45, MG Road
City / Town	Bangalore
PIN Code	560001

Government IDs

Label	Example
Aadhaar Number	1234 5678 9012
PAN Number	ABCDE1234F
Voter ID Number	ABC1234567
Passport Number	K1234567
Driving License Number	DL-0123456789

Usage in Code

import { LABELS, getRequiredLabel } from '../content/content-library';

// Simple usage
<label>{LABELS.fullName}</label>

// With required indicator
<label>{getRequiredLabel(LABELS.mobileNumber)}</label>
// Outputs: "Mobile Number *"

// With optional indicator
<label>{LABELS.alternateEmail} (Optional)</label>
// Outputs: "Alternate Email Address (Optional)"

Helper Text Patterns

When to Use Helper Text

✅ Use helper text when:

• Format or syntax is not obvious (e.g. DD/MM/YYYY)
• User needs extra context about why data is collected
• Privacy or security concerns need immediate clarification
• Complex validation requirements apply

❌ Don't use helper text when:

• The field is self-explanatory
• It merely repeats the label
• It is too verbose or creates clutter
• It is already obvious from the placeholder

Aadhaar Number

12-digit Aadhaar number (spaces optional)

Why this helper text:

Format example + space information

Email Address

We'll send updates and confirmations to this email

Why this helper text:

Purpose + what happens next

Password

Minimum 8 characters with uppercase, lowercase, number, and special character

Why this helper text:

Security requirements upfront

Upload Document

PDF or JPG, maximum 5MB per file

Why this helper text:

File type + size constraints

Error Message Standards

Error Message Formula

[Problem] + [What to do about it]

❌ Bad Error Messages:

• Error
• Invalid input
• Validation failed
• Error code 400
• Something went wrong

✅ Good Error Messages:

• Email Address is required. Please enter your email.
• Enter a valid 10-digit mobile number starting with 6-9.
• Password must be at least 8 characters with 1 number.
• File exceeds 5MB limit. Please upload a smaller file.
• Unable to connect. Please check your internet and try again.

Required Field Errors

❌ Wrong:

This field is required

✅ Right:

Mobile Number is required

❌ Wrong:

Missing field

✅ Right:

Email Address is required

❌ Wrong:

Cannot be empty

✅ Right:

Full Name is required

Format Validation Errors

❌ Wrong:

Invalid email

✅ Right:

Enter a valid email address (e.g., name@example.com)

❌ Wrong:

Wrong mobile

✅ Right:

Enter a valid 10-digit mobile number

❌ Wrong:

Aadhaar error

✅ Right:

Enter a valid 12-digit Aadhaar number

❌ Wrong:

Bad PAN

✅ Right:

Enter a valid PAN in format ABCDE1234F

Length Validation Errors

❌ Wrong:

Password too short

✅ Right:

Password must be at least 8 characters

❌ Wrong:

Character limit exceeded

✅ Right:

Comment must not exceed 500 characters

❌ Wrong:

Invalid OTP length

✅ Right:

Enter the 6-digit OTP sent to your mobile

Network & Server Errors

❌ Wrong:

Network failure

✅ Right:

Unable to connect. Please check your connection and retry.

❌ Wrong:

500 Internal Error

✅ Right:

Our service is temporarily unavailable. Please try again in a few minutes.

❌ Wrong:

Request timeout

✅ Right:

The request timed out. Please check your submission and try again.

Usage in Code

import { ERROR_MESSAGES, formatErrorMessage } from '../content/content-library';

// Direct usage
if (!email) {
  setError(ERROR_MESSAGES.required("Email Address"));
}

// Format validation
if (!/^\d{10}$/.test(mobile)) {
  setError(ERROR_MESSAGES.invalidMobile);
}

// Length validation
if (password.length < 8) {
  setError(ERROR_MESSAGES.passwordTooShort);
}

// Accessible error alert
{error && (
  <div role="alert" className="ux4g-text-error ux4g-fs-14 ux4g-d-flex ux4g-ai-center ux4g-gap-4xs ux4g-mt-xs">
    <AlertCircle size={14} />
    <span>{error}</span>
  </div>
)}

Success Message Patterns

Success Message Guidelines

Structure:

• State clearly what action was completed
• Provide tracking or reference number (if applicable)
• Inform the user what happens next and timelines
• Provide clear next actions or download options

Tone:

• Professional, reassuring, and helpful
• Use active voice (e.g. "Application Submitted")
• Avoid unnecessary exclamation marks
• Give exact next steps rather than generic praise

Form Submission

Application submitted successfully!

•Application reference: APP-2026-89412
•Verification will be completed within 3 working days
•Status updates will be sent via SMS and Email

Payment

Payment successful! Your transaction ID is (TXN987654321)

•Amount paid: ₹250.00
•Receipt generated and sent to your registered email
•Click below to download official PDF receipt

Document Upload

Document uploaded successfully

•File: aadhaar_card_masked.pdf (1.2 MB)
•Digital signature verified successfully
•You may continue filling the remaining form sections

Account Creation

Account created successfully! Please verify your email.

•Your citizen profile is now active
•A verification link has been sent to your email
•Sign in to access personalized citizen services

Consent & Legal Language

Legal Language Requirements

Consent language must be legally sound while remaining understandable. All templates reviewed by legal and plain language experts. Use standard templates unless you have specific legal requirements.

✅ Must include:

• What data is collected
• Why it's collected
• How it will be used
• Who it will be shared with
• User's rights

❌ Avoid:

• Legal jargon and Latin phrases
• Excessively long sentences
• Double negatives
• Pre-checked consent boxes
• Buried terms in fine print