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 government-issued identity 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 is not obvious (e.g., Aadhaar: 1234 5678 9012)
• User needs context (e.g., "As shown on ID card")
• Privacy matters (e.g., "We'll send OTP here")
• Validation is complex (e.g., password requirements)

❌ Don't use helper text when:

• Label is self-explanatory (e.g., "Email Address")
• It repeats the label
• It's too verbose
• Format is obvious from placeholder

Aadhaar Number

12-digit Aadhaar number (spaces optional)

Why:

Format example + space information

Email Address

We'll send updates and confirmations to this email

Why:

Purpose + what happens next

Password

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

Why:

Security requirements upfront

Upload Document

PDF or JPG, maximum 5MB per file

Why:

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 is required. Please enter your email address."
• "Enter a valid 10-digit mobile number"
• "Password must be at least 8 characters"
• "File size exceeds 5MB. Upload a smaller file."
• "Server error. Try again or contact support."

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:

Too short

✅ Right:

Password must be at least 8 characters

❌ Wrong:

Too long

✅ Right:

Comment must not exceed 500 characters

❌ Wrong:

Wrong length

✅ Right:

OTP must be exactly 6 characters

Network & Server Errors

❌ Wrong:

Connection failed

✅ Right:

No internet connection. Please check your network and try again.

❌ Wrong:

500 error

✅ Right:

Server error occurred. Please try again later.

❌ Wrong:

Timeout

✅ Right:

Request timed out. Please try again.

Usage in Code

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

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

// With helper function
const error = formatErrorMessage("Mobile Number", "required");

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

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

// Display error
{error && (
  <div role="alert" className="error">
    <AlertCircle size={14} />
    {error}
  </div>
)}

Success Message Patterns

Success Message Guidelines

Structure:

• Confirm what happened
• Provide reference number if applicable
• Tell user what happens next
• Offer related actions

Tone:

• Be congratulatory but professional
• Use active voice
• Be specific about outcome
• Avoid excessive exclamation marks

Form Submission

Application submitted successfully!

•Your application number is ABC123456
•We'll review it within 7 working days
•You'll receive updates via email and SMS

Payment

Payment successful! Your transaction ID is TXN987654321

•Amount: ₹500
•Receipt sent to your email
•Download receipt

Document Upload

Document uploaded successfully

•Aadhaar card uploaded successfully
•You can upload more documents or continue

Account Creation

Account created successfully! Please verify your email.

•Check your email for verification link
•Sign in after verification

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

Terms & Conditions

Short version (checkbox):

I have read and agree to the terms and conditions

Full version (expanded):

I have read, understood, and agree to be bound by the terms and conditions of this service

Privacy Policy

Short version (checkbox):

I consent to the collection and processing of my personal data as described in the privacy policy

Full version (expanded):

I acknowledge that I have read and understood the privacy policy. I consent to the collection, use, storage, and processing of my personal information for the purpose of this application.

Data Sharing

Short version (checkbox):

I authorize the sharing of my information with relevant government departments for verification and processing

Full version (expanded):

I hereby authorize and consent to the sharing of my personal information, including Aadhaar details, with relevant government departments, agencies, and authorized third parties solely for the purpose of verification, processing, and issuance of the requested service or certificate.

Declaration of Truthfulness

Short version (checkbox):

I declare that all information provided is true and correct to the best of my knowledge

Full version (expanded):

I hereby declare that all the information provided by me in this application is true, complete, and accurate to the best of my knowledge and belief. I understand that any false or misleading information may result in rejection of my application or cancellation of the certificate/service, and may lead to legal consequences.

Aadhaar Consent

Short version (checkbox):

I consent to authenticate my identity using Aadhaar

Full version (expanded):

I hereby voluntarily consent to authenticate my identity through Aadhaar-based authentication. I understand that my Aadhaar details will be used only for verification purposes and will be handled as per the Aadhaar Act, 2016 and related regulations.

Usage Guide

How to Use the Content Library

1

Import the content library

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

2

Use constants instead of hardcoded strings

<label>{LABELS.mobileNumber}</label>

3

Apply consistently across all pages

Use the same labels for the same fields everywhere

Complete Form Example

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

function ContactForm() {
  const [errors, setErrors] = useState({});

  return (
    <form>
      {/* Mobile Number Field */}
      <div>
        <label htmlFor="mobile">
          {getRequiredLabel(LABELS.mobileNumber)}
        </label>
        <input
          id="mobile"
          type="tel"
          placeholder={PLACEHOLDERS.mobileNumber}
          aria-describedby="mobile-help mobile-error"
        />
        <p id="mobile-help" className="helper-text">
          {HELPER_TEXT.mobileNumber}
        </p>
        {errors.mobile && (
          <p id="mobile-error" role="alert" className="error">
            {ERROR_MESSAGES.invalidMobile}
          </p>
        )}
      </div>

      {/* Email Field */}
      <div>
        <label htmlFor="email">
          {getRequiredLabel(LABELS.email)}
        </label>
        <input
          id="email"
          type="email"
          placeholder={PLACEHOLDERS.email}
          aria-describedby="email-help"
        />
        <p id="email-help" className="helper-text">
          {HELPER_TEXT.email}
        </p>
      </div>

      <button type="submit">
        {BUTTON_TEXT.submit}
      </button>
    </form>
  );
}

Quick Reference & Resources

Content Library

Location

/src/app/content/
content-library.ts

Import

import { LABELS }
from '../content/
content-library'

Quick Reference

Total Labels

50+ standardized

Error Messages

40+ templates

Consent Templates

15+ legal-approved

Language Level

Class 8-10 reading

Applied To

Identity & Access Application Submission Payment Transactions Consent & Declaration

Resources

Plain Language Guidelines Content Style Guide Accessibility Writing Tips Legal Language Templates

← Accessibility