SEC Master Design System v3.0 - State Election Commission

How to Use This Design System

Complete Guide to SEC Master Design System /p>

Quick Start

Copy components & paste into your project

Tailwind CSS

Built with Tailwind utility classes

Lucide Icons

1000+ icons from Lucide library

📚 System Overview

What is SEC Master Design System?

The SEC Master Design System v3.0 is a comprehensive UI component library specifically designed for the State Election Commission, Bihar. It provides a complete set of reusable, accessible, and consistent components for building electoral web applications including voter portals, candidate nomination systems, and administrative dashboards.

Built with modern web technologies and following Indian government design guidelines, this system ensures consistency across all State Election Commission digital properties while maintaining the national identity through the Indian Flag color theme.

Framework & Stack

HTML5 - Pure semantic HTML structure
Tailwind CSS - Utility-first CSS framework (via CDN)
Vanilla JavaScript - No framework dependencies
Lucide Icons - Beautiful, consistent icon library
Google Fonts - Poppins font family

Design Principles

Indian Flag Theme - Saffron, White, Green colors
Accessibility First - WCAG 2.1 compliant
Mobile Responsive - Works on all devices
Government Standard - Formal, professional UI
Copy-Paste Ready - All components have code

🚀 Getting Started

Browse Components

Navigate through the sidebar to explore all available components. Each section is organized by category: General, Navigation, Data Entry, Data Display, Feedback, and Applications.

Tip: Use the sidebar navigation to quickly jump to any component section.

Copy Component Code

Each component section includes a "Copy Code" button. Click it to copy the HTML code to your clipboard. The code is ready to use with proper Tailwind CSS classes and Lucide icons.

Tip: Visual feedback shows "Copied!" when code is successfully copied.

Setup Your Project

Add Tailwind CSS and Lucide Icons to your HTML file. Include these CDN links in your <head> section:

<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Poppins Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

Paste & Customize

Paste the copied code into your HTML file and customize as needed. All components use semantic HTML and utility classes, making them easy to modify. Don't forget to initialize Lucide icons:

<!-- At the end of your HTML, before closing </body> tag -->
<script>
  lucide.createIcons();
</script>

📦 Component Categories

General

Buttons, Colors, Icons, Typography, Shadows, Spacing

Navigation

Links, Breadcrumbs, Pagination, Tabs, Menus, Sidebars

Data Entry

Inputs, Forms, Checkboxes, Radio, Selects

Data Display

Badges, Cards, Tables, Status Indicators

Feedback

Alerts, Messages, Modals, Notifications

Applications

Application Tracking, Status Monitoring

🎨 Indian Flag Color Palette

Saffron

Courage & Sacrifice

#f97316

Use for: Highlights, CTAs, Important actions

Primary Blue

Truth & Justice

#0369a1

Use for: Primary buttons, Headers, Links

Green

Growth & Prosperity

#16a34a

Use for: Success states, Approved status

✅ Best Practices

DO: Use Semantic HTML

Use proper HTML5 elements like <button>, <nav>, <main>

DO: Keep Accessibility in Mind

Add aria-labels, proper contrast, keyboard navigation

DO: Test on Multiple Devices

Ensure responsive design works on mobile, tablet, desktop

DON'T: Override Core Styles

Avoid adding custom CSS that conflicts with Tailwind

DON'T: Use Inline Styles

Prefer Tailwind utility classes over style attributes

DON'T: Forget Icon Initialization

Always call lucide.createIcons() after adding icons

Need Help?

Resources and support for developers

Icon Library

Browse 1000+ Lucide icons

Tailwind Docs

Official Tailwind CSS documentation

Support

Zixie : 6200018839

1. General

Button Variants

<button class="btn btn-primary">Submit Nomination</button>
<button class="btn btn-outline">Search Roll</button>
<button class="btn btn-ghost">Cancel</button>
<button class="btn btn-link">View Guidelines</button>

<!-- Danger Variants -->
<button class="btn btn-danger">Reject Application</button>
<button class="btn btn-danger-outline">Withdraw</button>
<button class="btn btn-danger-ghost">Remove</button>
<button class="btn btn-danger-link">Report Issue</button>

Administrative Action Buttons

<!-- Button Sizes -->
<button class="btn btn-primary btn-sm">Verify OTP</button>
<button class="btn btn-primary">Download PDF</button>
<button class="btn btn-primary btn-lg">Login as Official</button>

<!-- Buttons with Icons -->
<button class="btn btn-primary">
  <i data-lucide="download" class="w-4 h-4"></i> Download Voter Slip
</button>

<button class="btn btn-outline">
  View Affidavit <i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>

<!-- Icon-only Buttons -->
<button class="btn-icon btn-primary rounded-full p-2">
  <i data-lucide="search" class="w-4 h-4"></i>
</button>

SEC Theme Colors (Indian Flag)

Saffron

#f97316

Primary Blue

#0369a1

Green

#16a34a

Lucide Icons (Electoral Context)

vote

users

file-text

download

check-circle

x-circle

alert-triangle

map-pin

Typography (Poppins)

State Election Commission

Electoral Roll 2026

Panchayat & Municipal Elections

Candidate Nomination Portal

Ward No. 12 - Patna Municipal Corporation

Regular body text for forms and documentation

Small text for captions and helper text

Extra small text for labels

Shadow Levels

Level 1

Level 2

Level 3

Level 4

Level 5

Corner Radius Scale

Consistent border radius values for creating cohesive, rounded UI elements

Basic Radius Values

None

rounded-none

0px

rounded-sm

2px

Base

rounded

4px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

2XL

rounded-2xl

16px

3XL

rounded-3xl

24px

Special Radius Values

Full Circle

rounded-full

9999px / 50%

Perfect for: Avatars, badges, circular buttons

Pill Shape

rounded-full

Large fixed value

Perfect for: Pills, tags, status badges

Sharp

rounded-none

0px

Perfect for: Tables, dividers, modern layouts

Common Use Cases

Buttons

Recommended: rounded-md or rounded-lg for government portals

Cards & Containers

Card with rounded-lg

8px - Standard cards

Card with rounded-xl

12px - Featured cards

Card with rounded-2xl

16px - Hero sections

Recommended: rounded-xl for cards, rounded-2xl for hero sections

Form Inputs

Recommended: rounded-md for inputs to match form aesthetics

Badges & Tags

rounded (4px) rounded-md (6px) rounded-lg (8px) rounded-full

Recommended: rounded-full for status badges, rounded-md for tags

Spacing Considerations with Border Radius

Inner Padding Rule

rounded-lg + p-2 (8px padding)

rounded-xl + p-3 (12px padding)

rounded-2xl + p-4 (16px padding)

Rule of Thumb: Inner padding should be equal to or greater than the border radius for visual balance.

Nested Elements Rule

Decreasing radius

• Outer: rounded-2xl (16px)

• Middle: rounded-xl (12px)

• Inner: rounded-lg (8px)

Rule of Thumb: Decrease border radius by one step for each nested level.

Border Radius Best Practices

DO: Maintain Consistency

Use the same border radius for similar components throughout your application

DO: Match Padding to Radius

Larger radius values need proportionally larger padding

DON'T: Mix Too Many Values

Stick to 2-3 border radius values across your entire design system

DON'T: Use Extreme Values

Avoid very large radius on small elements - it looks unprofessional

Quick Reference Guide

Class	Value	Best For	Recommended Padding
`rounded-sm`	2px	Small elements, tight layouts	p-1 to p-2
`rounded`	4px	Default inputs, small buttons	p-2 to p-3
`rounded-md`	6px	Buttons, form elements	p-2 to p-4
`rounded-lg`	8px	Cards, modals, dropdowns	p-3 to p-4
`rounded-xl`	12px	Featured cards, containers	p-4 to p-6
`rounded-2xl`	16px	Hero sections, large panels	p-6 to p-8
`rounded-3xl`	24px	Extra large containers	p-8 to p-12
`rounded-full`	9999px	Avatars, badges, pills	p-2 to p-4

<!-- Border Radius Examples -->

<!-- Basic Radius -->
<div class="rounded">4px radius</div>
<div class="rounded-md">6px radius</div>
<div class="rounded-lg">8px radius</div>
<div class="rounded-xl">12px radius</div>

<!-- Special Cases -->
<div class="rounded-full">Circular/Pill</div>
<div class="rounded-none">Sharp corners</div>

<!-- With Proper Padding -->
<div class="rounded-lg p-3">Balanced spacing</div>
<div class="rounded-xl p-4">Larger spacing</div>
<div class="rounded-2xl p-6">Even larger spacing</div>

<!-- Nested Elements -->
<div class="rounded-2xl p-4">
  <div class="rounded-xl p-3">
    <div class="rounded-lg p-2">Content</div>
  </div>
</div>

Spacing Scale

Base Unit: 4px (0.25rem)

12-Column Grid

Spacing within Elements Guide

Card Title with Icon (gap-4)

This card demonstrates proper spacing: 24px (p-6) padding, 16px (gap-4) between icon and content, 4px (mb-1) between title and subtitle

Spacing Guidelines:

Card Padding: p-6 (24px)
Icon-Content Gap: gap-4 (16px)
Title-Subtitle: mb-1 (4px)
Text-Button Gap: mb-3 (12px)
Button Spacing: gap-2 (8px)

List Item (p-4 padding)

Icon-Content gap: 12px (gap-3)

Vertical Padding: 16px | Horizontal Padding: 16px | Icon Size: 40px | Gap: 12px

Button Internal Spacing

gap-2 (8px)

px-4 py-2

Small: px-3 py-1.5

Buttons with Icons Guide

Icon on Left

Icon on Right

Icon Only Buttons

Loading States with Icons

Different Sizes with Icons

Implementation Guide

Icon Left: <i data-lucide="icon-name" class="w-4 h-4"></i> Text

Icon Right: Text <i data-lucide="icon-name" class="w-4 h-4"></i>

Icon Sizes: Small: w-3 h-3 (12px) | Default: w-4 h-4 (16px) | Large: w-5 h-5 (20px)

Gap: Buttons automatically apply gap-2 (8px) between icon and text

2. Navigation

Electoral Roll & Links

Electoral Roll Candidate Nomination Portal Download Voter Slip View Election Results

Breadcrumbs

Home Electoral Services Candidate Portal Nomination Form

Pagination

...

Service Portal Tabs

<!-- Line Tabs -->
<div class="flex gap-6 border-b border-neutral-200 w-full">
  <button class="px-4 py-2 text-sm font-medium text-[#0369a1] border-b-2 border-[#0369a1]">
    Voter Services
  </button>
  <button class="px-4 py-2 text-sm font-medium text-neutral-500 border-b-2 border-transparent hover:text-neutral-700">
    Candidate Login
  </button>
</div>

<!-- Card Tabs -->
<div class="flex bg-neutral-100 p-1 rounded-lg border border-neutral-200">
  <button class="px-4 py-1.5 bg-white shadow-sm rounded-md text-sm font-medium text-[#0369a1]">
    Electoral Roll
  </button>
  <button class="px-4 py-1.5 text-sm font-medium text-neutral-500 hover:text-neutral-900">
    Results
  </button>
</div>

<!-- Pill Tabs -->
<div class="flex gap-2">
  <button class="px-4 py-2 bg-[#0369a1] text-white rounded-full text-sm font-medium">
    Patna
  </button>
  <button class="px-4 py-2 bg-white border border-neutral-300 text-neutral-700 rounded-full text-sm font-medium">
    Gaya
  </button>
</div>

Dropdown Menus (Primary Blue)

Electoral Services

Candidate Actions

Sidebar with Tabs Element

Vertical Tab Navigation

Voter Services Content

Content area for the selected tab. This demonstrates how sidebar tabs work with content panels.

Pills Style Navigation

<!-- Vertical Sidebar with Tabs -->
<div class="flex gap-4">
  <div class="w-48 flex-shrink-0 space-y-1">
    <button class="w-full flex items-center gap-3 px-4 py-3 bg-[#0369a1] text-white rounded-lg">
      <i data-lucide="vote" class="w-4 h-4"></i>
      <span class="text-sm font-medium">Voter Services</span>
    </button>
    <button class="w-full flex items-center gap-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 rounded-lg">
      <i data-lucide="users" class="w-4 h-4"></i>
      <span class="text-sm font-medium">Candidates</span>
    </button>
  </div>
  <div class="flex-1 bg-neutral-50 rounded-lg p-4">
    <h4 class="font-semibold text-neutral-900 mb-2">Content Area</h4>
    <p class="text-sm text-neutral-600">Content for the selected tab.</p>
  </div>
</div>

3. Data Entry

Inputs & Forms

Candidate Name *

Search Electoral Roll

Address Details

Error State

Please enter a valid EPIC number (e.g., ABC1234567)

Disabled Input

<!-- Basic Input -->
<div class="w-full">
  <label class="block text-sm font-medium text-neutral-700 mb-1">
    Candidate Name *
  </label>
  <input
    type="text"
    class="input"
    placeholder="Enter full name as per Aadhaar"
  />
</div>

<!-- Input with Icon -->
<div class="w-full">
  <label class="block text-sm font-medium text-neutral-700 mb-1">Search</label>
  <div class="relative">
    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"></i>
    <input
      type="text"
      class="input pl-10"
      placeholder="Search by Constituency"
    />
  </div>
</div>

<!-- Textarea -->
<textarea
  class="w-full h-24 px-3 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:border-[#0369a1] focus:ring-1 focus:ring-[#0369a1]"
  placeholder="Enter details"
></textarea>

Check/Radio/Switch

Checkboxes

I accept the terms and conditions Send me updates on nomination status Disabled option

Radio Buttons - Election Type

Panchayat Election Municipal Corporation Election Block Panchayat Election

District Selection

Select District

Select Block

Nomination Form Layout

Candidate Nomination Form - Ward No. 12

Candidate Name *

EPIC Number *

Mobile Number *

Email Address

Select District *

Party Affiliation

I hereby declare that the information provided is true and accurate to the best of my knowledge. I understand that providing false information may result in disqualification.

<div class="bg-white border border-neutral-200 rounded-xl p-6 max-w-2xl">
  <h3 class="text-lg font-semibold mb-4 text-[#0369a1]">
    Candidate Nomination Form - Ward No. 12
  </h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-neutral-700 mb-1">
        Candidate Name *
      </label>
      <input type="text" class="input" placeholder="Enter full name" />
    </div>
    <div>
      <label class="block text-sm font-medium text-neutral-700 mb-1">
        EPIC Number *
      </label>
      <input type="text" class="input" placeholder="Enter EPIC" />
    </div>
  </div>
  <div class="flex gap-3 mt-6">
    <button class="btn btn-primary">Submit</button>
    <button class="btn btn-outline">Save Draft</button>
  </div>
</div>

4. Data Display

Status Badges & Tags

Scrutiny Pending Accepted Rejected Draft Nomination Valid Under Review

<!-- Status Badges -->
<span class="px-3 py-1 bg-orange-100 text-orange-600 rounded-full text-xs font-semibold">
  Scrutiny Pending
</span>
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-xs font-semibold">
  Accepted
</span>
<span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-xs font-semibold">
  Rejected
</span>

<!-- Badge with Icon -->
<span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-xs font-semibold flex items-center gap-1">
  <i data-lucide="check-circle" class="w-3 h-3"></i>
  Nomination Valid
</span>

Candidate Information Cards

Rajesh Kumar

Ward No. 12, Patna Municipal Corp

Party: Independent

Symbol: Bicycle

Status: Nomination Valid

Anjali Devi

Ward No. 8, Gaya Municipal Corp

Party: Political Party A

Symbol: Hand

Status: Scrutiny Pending

<div class="bg-white border border-neutral-200 rounded-xl p-6 hover:shadow-lg transition">
  <div class="flex items-start gap-4">
    <div class="w-12 h-12 bg-gradient-to-br from-[#0369a1] to-[#0284c7] rounded-full flex items-center justify-center text-white font-bold text-lg">
      RK
    </div>
    <div class="flex-1">
      <h3 class="font-semibold text-lg text-neutral-900">Rajesh Kumar</h3>
      <p class="text-sm text-neutral-600 mb-3">Ward No. 12, Patna Municipal Corp</p>
      <div class="space-y-1 text-xs text-neutral-600 mb-4">
        <p><span class="font-medium">Party:</span> Independent</p>
        <p><span class="font-medium">Symbol:</span> Bicycle</p>
        <p class="flex items-center gap-1">
          <span class="font-medium">Status:</span>
          <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-xs font-semibold">
            Nomination Valid
          </span>
        </p>
      </div>
      <div class="flex gap-2">
        <button class="btn btn-primary btn-sm">View Affidavit</button>
        <button class="btn btn-outline btn-sm">Download Slip</button>
      </div>
    </div>
  </div>
</div>

Electoral Data Table

District	Block	Panchayat	Total Voters	Polling Stations
Patna	Patna Sadar	Rampur GP	12,458	8
Gaya	Tekari	Tekari GP	9,823	6
Muzaffarpur	Sahebganj	Minapur GP	15,276	10

<div class="bg-white border border-neutral-200 rounded-xl overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-[#0369a1] text-white">
      <tr>
        <th class="px-6 py-3 text-left">District</th>
        <th class="px-6 py-3 text-left">Block</th>
        <th class="px-6 py-3 text-left">Panchayat</th>
        <th class="px-6 py-3 text-right">Total Voters</th>
        <th class="px-6 py-3 text-right">Polling Stations</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-neutral-100">
      <tr class="hover:bg-neutral-50 transition">
        <td class="px-6 py-3 font-medium">Patna</td>
        <td class="px-6 py-3">Patna Sadar</td>
        <td class="px-6 py-3">Rampur GP</td>
        <td class="px-6 py-3 text-right">12,458</td>
        <td class="px-6 py-3 text-right">8</td>
      </tr>
    </tbody>
  </table>
</div>

5. Feedback

Alerts & Messages

Nomination Accepted

Your nomination for Ward No. 12 has been successfully accepted. The admit card will be available within 48 hours.

Important Information

The last date for nomination filing is January 31, 2026. Please ensure all documents are submitted before the deadline.

Scrutiny Pending

Your nomination is currently under scrutiny. You will be notified of the decision within 48 hours.

Application Rejected

Your nomination has been rejected due to incomplete documentation. Please review the reasons and resubmit if eligible.

<!-- Success Alert -->
<div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-start gap-3">
  <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
  <div>
    <h4 class="font-semibold text-green-900 mb-1">Nomination Accepted</h4>
    <p class="text-sm text-green-700">
      Your nomination for Ward No. 12 has been successfully accepted.
    </p>
  </div>
</div>

<!-- Info Alert -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
  <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5"></i>
  <div>
    <h4 class="font-semibold text-blue-900 mb-1">Important Information</h4>
    <p class="text-sm text-blue-700">
      The last date for nomination filing is January 31, 2026.
    </p>
  </div>
</div>

<!-- Warning Alert -->
<div class="bg-orange-50 border border-orange-200 rounded-lg p-4 flex items-start gap-3">
  <i data-lucide="alert-triangle" class="w-5 h-5 text-orange-600 mt-0.5"></i>
  <div>
    <h4 class="font-semibold text-orange-900 mb-1">Scrutiny Pending</h4>
    <p class="text-sm text-orange-700">
      Your nomination is currently under scrutiny.
    </p>
  </div>
</div>

<!-- Error Alert -->
<div class="bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-3">
  <i data-lucide="x-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
  <div>
    <h4 class="font-semibold text-red-900 mb-1">Application Rejected</h4>
    <p class="text-sm text-red-700">
      Your nomination has been rejected due to incomplete documentation.
    </p>
  </div>
</div>

Modal Example

Confirm Nomination Submission

Are you sure you want to submit this nomination? Once submitted, you will not be able to make changes without contacting the Election Commission office.

Please verify:

All personal details are correct
Required documents are uploaded
Affidavit is properly filled

6. Track Application Status

Track Your Application

Enter Application/Reference Number

Application Status Guide

Submitted

Application received by the Election Commission

Under Review

Application is being processed and verified

Action Required

Additional information or documents needed

Approved

Application successfully processed and approved

Rejected

Application not approved, review rejection reasons

Need Help?

Contact helpline: 1800-XXX-XXXX or email: support@sec.gov.in

Recent Applications

Reference Number	Applicant Name	Ward/Constituency	Submitted Date	Status
SEC2026/001234	Rajesh Kumar	Ward No. 12, Patna MC	Jan 15, 2026	Under Review
SEC2026/001189	Anjali Devi	Ward No. 8, Gaya MC	Jan 12, 2026	Approved
SEC2026/001156	Suresh Yadav	Ward No. 5, Muzaffarpur MC	Jan 10, 2026	Action Required
SEC2026/001098	Priya Singh	Ward No. 3, Bhagalpur MC	Jan 08, 2026	Submitted

<!-- Application Tracking System -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  <!-- Track Form -->
  <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-100 rounded-xl p-6">
    <h4 class="text-lg font-semibold text-[#0369a1] mb-4">Track Your Application</h4>
    <div class="space-y-4">
      <input type="text" class="input" placeholder="Enter Application/Reference Number" />
      <button class="w-full btn" style="background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);">
        Track Status
      </button>
    </div>
  </div>

  <!-- Status Guide -->
  <div class="bg-white border-2 border-neutral-200 rounded-xl p-6">
    <h4 class="text-lg font-semibold text-neutral-900 mb-4">Application Status Guide</h4>
    <div class="space-y-3">
      <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50">
        <div class="w-3 h-3 bg-blue-500 rounded-full mt-1"></div>
        <div>
          <p class="font-medium text-sm">Submitted</p>
          <p class="text-xs text-neutral-600">Application received</p>
        </div>
      </div>
      <!-- More status items... -->
    </div>
  </div>
</div>