DESIGN.md · Analysis

SarkariFlash

sarkariflash.com · 2 Sept 2026 · 47 colors · DM Sans

SarkariFlash

A high-velocity government exam portal delivering real-time notifications, results, and admit cards for 300+ Indian exams. The design combines authoritative navy depth with golden accent energy, creating urgency and trust.

Colors

surface#ffffff

surface-dim#f7f8fa

surface-bright#ffffff

surface-container-lowest#f9fafb

surface-container-low#f3f4f6

surface-container#eeeff2

surface-container-high#e9ecef

surface-container-highest#e1e4e8

on-surface#11161f

on-surface-variant#6c757d

inverse-surface#1a1f2e

inverse-on-surface#f0f4f8

outline#cccccc

outline-variant#d0d5dd

surface-tint#073264

primary#073264

on-primary#ffffff

primary-container#0f3778

on-primary-container#e8f0ff

inverse-primary#f7b83d

secondary#f7b83d

on-secondary#1a1a19

secondary-container#fde8b8

on-secondary-container#3d2f0a

tertiary#05893e

on-tertiary#ffffff

tertiary-container#a8e6c1

on-tertiary-container#001f0f

error#ee7b00

on-error#ffffff

error-container#ffe4cc

on-error-container#4d2600

primary-fixed#e8f0ff

primary-fixed-dim#c6d9ff

on-primary-fixed#001a4d

on-primary-fixed-variant#0f3778

secondary-fixed#fde8b8

secondary-fixed-dim#f5d896

on-secondary-fixed#3d2f0a

on-secondary-fixed-variant#8b6d00

tertiary-fixed#a8e6c1

tertiary-fixed-dim#7ccfa3

on-tertiary-fixed#001f0f

on-tertiary-fixed-variant#004d2a

background#ffffff

on-background#11161f

surface-variant#e9ecef

Typography

display: fontFamily: DM Sans · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: DM Sans · fontSize: 48px · fontWeight: 700 · lineHeight: 56px · letterSpacing: -0.02em
headline-md: fontFamily: DM Sans · fontSize: 32px · fontWeight: 600 · lineHeight: 40px · letterSpacing: -0.01em
title-lg: fontFamily: DM Sans · fontSize: 24px · fontWeight: 600 · lineHeight: 32px
body-lg: fontFamily: DM Sans · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: DM Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: DM Sans · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: DM Sans · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

SarkariFlash is India's fastest government exam notification and results platform, serving millions of exam aspirants tracking 300+ competitive exams (SSC, UPSC, Banking, Railway, State PSC). The design aesthetic is 'Authoritative Velocity'—a fusion of deep navy institutional trust with golden accent urgency. The UI evokes precision, speed, and reliability: every element is positioned to minimize cognitive load and maximize scanning efficiency. The brand personality is direct, factual, and action-oriented. Voice: urgent but never breathless, informative but never condescending. Example: 'NEET UG 2026 Registration Deadline Extended to March 20 — Apply Now.'

Colors

The color system balances institutional authority with dynamic urgency. Primary (#073264, deep navy) anchors the hero, headers, and CTAs—it signals government credibility and focus. Secondary (#f7b83d, golden-amber) is the accent of urgency: it highlights exam updates, deadlines, and key metrics. Tertiary (#05893e, forest green) is reserved for success states and positive notifications. The surface stack (white to light gray, #ffffff to #e1e4e8) provides neutral breathing room for dense exam listings and results tables. On-surface text (#11161f, near-black) ensures 7:1+ contrast on all backgrounds. Error (#ee7b00, warm orange) is used sparingly for critical alerts. The inverse-primary (#f7b83d) creates a secondary accent pair when layered over primary backgrounds. All interactive elements

Typography

The type system prioritizes scannability and hierarchy. DM Sans (Google Fonts) is the sole typeface—a geometric sans-serif with high legibility at small sizes and strong personality at display scales. Headline-lg (48px, 700 weight, -0.02em tracking) anchors the hero with 'India's Fastest Govt Exam Portal.' Body-md (16px, 400 weight, 24px line-height) is the workhorse for exam descriptions and metadata. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and tags—the 600 weight ensures they pop against lighter backgrounds. Label-sm (12px, 500 weight, 0.02em tracking) is used for timestamps ('Updated 2 minutes ago') and secondary metadata. All small labels over busy backgrounds receive a text-shadow: 0 1px 2px rgba(0,0,0,0.08) to maintain legibility.

Layout

The layout follows a 12-column fluid grid with a 1280px max-width container. The hero section spans full-width with 80px vertical padding and 32px horizontal padding, creating a 'breathing room' effect. Section separation uses lg spacing (40px) between major blocks. The exam cards grid uses md spacing (24px) as the gutter. The search bar sits 24px below the hero headline, with 48px left padding to accommodate a search icon. All text content maintains a 28px line-height minimum for body copy to support rapid scanning. The mobile breakpoint (< 768px) reduces padding to 16px and stacks the search input full-width. Container max-width is enforced at 1280px on desktop; on tablet (768–1024px), padding increases to 24px per side.

Elevation & Depth

Depth is achieved through subtle layering and shadow hierarchy. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Inputs): 1px solid border in outline-variant (#d0d5dd) + box-shadow: 0 4px 12px rgba(0,0,0,0.1). Level 3 (Hovered Cards & Modals): same border + box-shadow: 0 16px 40px rgba(0,0,0,0.12). The hero section uses no shadow—it's a solid primary (#073264) block with a subtle radial gradient overlay (opacity 0.05) to add depth without visual noise. Focus states on inputs and buttons use a 3px inset box-shadow: 0 0 0 3px rgba(7, 50, 100, 0.1) to indicate keyboar

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners signal approachability and modernity while maintaining the institutional precision of a government portal. Buttons and search inputs use rounded.lg (1rem, 16px) for a friendly, clickable appearance. Cards and exam tags use rounded.md (0.75rem, 12px) for a balanced, professional look. The badge-update component uses rounded.full (9999px) to create a pill shape, emphasizing urgency and timeliness. Input fields use rounded.lg (16px) to match button styling and create visual cohesion. The header and footer use rounded.DEFAULT (0.5rem, 8px) f

Components

Action Elements Buttons are the primary interaction driver. button-primary uses primary (#073264) background with white text, 48px height, 16px vertical padding, and rounded.lg (16px). On hover, the background shifts to primary-container (#0f3778) with a smooth 200ms transition. button-secondary is transparent with a 2px primary border and primary text; on hover, it fills with primary-container background. Both buttons use label-md typography (14px, 600 weight). The Search CTA button is a special case: it uses primary background, white text, and sits 8px to the right of the search input with a 14px border-radius to align with the input's rounded.lg.

Containers & Surfaces Cards (exam listings, results, notifications) use surface background (#ffffff) with a 1px outline-variant borde

Do's and Don'ts

**Do**

Do use primary (#073264) for all CTAs, focus states, and interactive elements—it's the brand's signature trust color.
Do apply secondary (#f7b83d) sparingly to highlight urgency: exam deadlines, 'Updated X minutes ago' badges, and key metrics.
Do maintain 24px gutter spacing between sections and 12px between card elements—this rhythm prevents cognitive overload on dense exam listings.
Do use label-md (14px, 600 weight) for all buttons and tags to ensure they're scannable at a glance.
Do apply the 3px rgba(7, 50, 100, 0.1) focus glow to all interactive elements for keyboard accessibility.

**Don't**

Don't use secondary (#f7b83d) as a background for large sections—it's an accent, not a surface. Reserve it for badges, highlights, and small CTAs.
Don't apply shadows heavier than md (0 16px 40px rgba(0,0,0,0.12))—the design is institutional and clean, not layered or dramatic.
Don't mix typefaces. DM Sans is the sole font family. Avoid system-ui, Inter, or serif fallbacks in component definitions.
Don't reduce padding below 12px (sm spacing) on cards or inputs—the interface must breathe to support rapid scanning of 300+ exam listings.

---
version: alpha
name: SarkariFlash
description: >-
  A high-velocity government exam portal delivering real-time notifications, results, and admit cards for 300+ Indian
  exams. The design combines authoritative navy depth with golden accent energy, creating urgency and trust.
logo:
  src: https://sarkariflash.com/icon.svg?icon.3n5k4p73zpl9i.svg
colors:
  surface: '#ffffff'
  surface-dim: '#f7f8fa'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f9fafb'
  surface-container-low: '#f3f4f6'
  surface-container: '#eeeff2'
  surface-container-high: '#e9ecef'
  surface-container-highest: '#e1e4e8'
  on-surface: '#11161f'
  on-surface-variant: '#6c757d'
  inverse-surface: '#1a1f2e'
  inverse-on-surface: '#f0f4f8'
  outline: '#cccccc'
  outline-variant: '#d0d5dd'
  surface-tint: '#073264'
  primary: '#073264'
  on-primary: '#ffffff'
  primary-container: '#0f3778'
  on-primary-container: '#e8f0ff'
  inverse-primary: '#f7b83d'
  secondary: '#f7b83d'
  on-secondary: '#1a1a19'
  secondary-container: '#fde8b8'
  on-secondary-container: '#3d2f0a'
  tertiary: '#05893e'
  on-tertiary: '#ffffff'
  tertiary-container: '#a8e6c1'
  on-tertiary-container: '#001f0f'
  error: '#ee7b00'
  on-error: '#ffffff'
  error-container: '#ffe4cc'
  on-error-container: '#4d2600'
  primary-fixed: '#e8f0ff'
  primary-fixed-dim: '#c6d9ff'
  on-primary-fixed: '#001a4d'
  on-primary-fixed-variant: '#0f3778'
  secondary-fixed: '#fde8b8'
  secondary-fixed-dim: '#f5d896'
  on-secondary-fixed: '#3d2f0a'
  on-secondary-fixed-variant: '#8b6d00'
  tertiary-fixed: '#a8e6c1'
  tertiary-fixed-dim: '#7ccfa3'
  on-tertiary-fixed: '#001f0f'
  on-tertiary-fixed-variant: '#004d2a'
  background: '#ffffff'
  on-background: '#11161f'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: DM Sans
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: DM Sans
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: DM Sans
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 12px rgba(0,0,0,0.1)
  lg: 0 16px 40px rgba(0,0,0,0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 16px 24px
    height: 48px
    fontWeight: '600'
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 16px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.primary}'
  search-input:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    padding: 14px 48px 14px 48px
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  search-input-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(7, 50, 100, 0.1)
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.md}'
  badge-update:
    backgroundColor: rgba(247, 184, 61, 0.15)
    textColor: '#8b6d00'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 6px 12px
    border: 1px solid rgba(247, 184, 61, 0.3)
  tag-exam:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: 8px 12px
    border: 1px solid {colors.outline-variant}
  tag-exam-hover:
    backgroundColor: '{colors.surface-container-highest}'
    borderColor: '{colors.primary}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  header:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    boxShadow: 0 1px 3px rgba(0,0,0,0.08)
    padding: 12px {spacing.gutter}
  hero-section:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    padding: 80px 32px
  hero-accent:
    color: '{colors.secondary}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction driver. button-primary uses primary (#073264) background with white text, 48px height, 16px vertical padding, and rounded.lg (16px). On hover, the background shifts to primary-container (#0f3778) with a smooth 200ms transition. button-secondary is transparent with a 2px primary border and primary text; on hover, it fills with primary-container background. Both buttons use label-md typography (14px, 600 weight). The Search CTA button is a special case: it uses primary background, white text, and sits 8px to the right of the search input with a 14px border-radius to align with the input's rounded.lg.

### Containers & Surfaces
Cards (exam listings, results, notifications) use surface background (#ffffff) with a 1px outline-variant borde

## Do's and Don'ts

**Do**
- Do use primary (#073264) for all CTAs, focus states, and interactive elements—it's the brand's signature trust color.
- Do apply secondary (#f7b83d) sparingly to highlight urgency: exam deadlines, 'Updated X minutes ago' badges, and key metrics.
- Do maintain 24px gutter spacing between sections and 12px between card elements—this rhythm prevents cognitive overload on dense exam listings.
- Do use label-md (14px, 600 weight) for all buttons and tags to ensure they're scannable at a glance.
- Do apply the 3px rgba(7, 50, 100, 0.1) focus glow to all interactive elements for keyboard accessibility.

**Don't**
- Don't use secondary (#f7b83d) as a background for large sections—it's an accent, not a surface. Reserve it for badges, highlights, and small CTAs.
- Don't apply shadows heavier than md (0 16px 40px rgba(0,0,0,0.12))—the design is institutional and clean, not layered or dramatic.
- Don't mix typefaces. DM Sans is the sole font family. Avoid system-ui, Inter, or serif fallbacks in component definitions.
- Don't reduce padding below 12px (sm spacing) on cards or inputs—the interface must breathe to support rapid scanning of 300+ exam listings.

Edit, then copy or download.