Skip to main content
Government Mohindra College, Patiala

Design system

Colours, type and components for the new college website and portal, gathered on one page for review.

Foundations

Logo

The college's official logo, used exactly as it appears on the current website.

On white
Government Mohindra College, Patiala
On navy, on a white panel
Government Mohindra College, Patiala
Emblem for small spaces
Emblem of Government Mohindra College, Patiala Emblem of Government Mohindra College, Patiala Phone home screen icon
Rules
  • Place the logo on white. On dark backgrounds, put it on a white panel.
  • Do not redraw, recolour, stretch or rearrange the logo.
  • Show the full logo at least 190 pixels wide so its text stays readable.
  • Higher-resolution artwork from the college will replace the current file.

Foundations

Colours

Green and gold from the current website, navy for headings, and a few supporting colours for forms and messages.

  • White

    white · #FFFFFF

    Page background, cards and text on dark colours.

  • College green

    primary · #016332

    Top bar, main menu, primary buttons and links.

  • Dark green

    primary-dark · #014A26

    Hover and pressed states of green elements.

  • Light green

    primary-soft · #E3EFE8

    Selected items and success messages.

  • College gold

    accent · #FBD232

    Highlights, gold buttons and the "New" badge. Never text on white.

  • Dark gold

    accent-dark · #E2B812

    Hover state of gold buttons.

  • Light gold

    accent-soft · #FFF7D6

    Warning messages and highlighted rows.

  • Text on gold

    on-accent · #111111

    Text on gold backgrounds.

  • Navy

    heading · #1D2634

    Headings and the footer.

  • Body text

    text · #222222

    Body text.

  • Grey text

    muted · #666666

    Hints, dates and secondary text.

  • Light grey

    surface · #F5F5F5

    Page sections and the portal background.

  • Divider

    border · #E6E6E6

    Dividers and card edges.

  • Control border

    border-strong · #8A8A8A

    Borders of inputs, selects and checkboxes.

  • Error red

    danger · #B42318

    Error messages and failed states.

  • Light red

    danger-soft · #FEF3F2

    Error message backgrounds.

Contrast checks

Each ratio is calculated on this page. Text needs at least 4.5:1 and form control edges at least 3:1 to meet WCAG 2.1 AA.

Contrast checks
Sample Used for Ratio Result
Aa Body text text / white 15.9:1 Meets 4.5:1
Aa Headings heading / white 15.2:1 Meets 4.5:1
Aa Hints and secondary text muted / white 5.7:1 Meets 4.5:1
Aa Secondary text on grey sections muted / surface 5.2:1 Meets 4.5:1
Aa Links and outline buttons primary / white 7.4:1 Meets 4.5:1
Aa Top bar, menu and green buttons white / primary 7.4:1 Meets 4.5:1
Aa Green buttons on hover white / primary-dark 10.4:1 Meets 4.5:1
Aa Selected menu items and badges primary-dark / primary-soft 8.8:1 Meets 4.5:1
Aa Gold buttons and badges on-accent / accent 12.9:1 Meets 4.5:1
Aa Gold headings in the footer accent / heading 10.4:1 Meets 4.5:1
Aa Footer text white / heading 15.2:1 Meets 4.5:1
Aa Error messages danger / white 6.5:1 Meets 4.5:1
Aa Error alerts danger / danger-soft 6.0:1 Meets 4.5:1
Aa Form control borders border-strong / white 3.4:1 Meets 3:1
Aa Focus outline on green accent / primary 5.0:1 Meets 3:1
Aa Gold text on white accent / white 1.4:1 Not allowed

Foundations

Typography

Montserrat for headings and Lato for body text, both served from the college server.

Montserrat

Aa

Admissions are open for session 2026-27

Admissions are open for session 2026-27

Semi-bold and bold, for headings, buttons and menus.

Lato

Aa

Admissions are open for session 2026-27

Admissions are open for session 2026-27

Regular and bold, for body text, forms and tables.

Type scale
Heading 1 30 / 40 px
Admissions are open for session 2026-27
Heading 2 24 / 32 px
Admissions are open for session 2026-27
Heading 3 20 / 24 px
Admissions are open for session 2026-27
Heading 4 18 / 20 px
Admissions are open for session 2026-27
Body 16 px
Admissions are open for session 2026-27
Small 14 px
Admissions are open for session 2026-27
Running text

Body text uses a comfortable line height and stays at least 16 pixels on phones. Links inside a paragraph are underlined so they are easy to spot. See the colour rules

Foundations

Spacing, corners and shadows

Spacing follows a 4-pixel scale. Corners and shadows are kept small and consistent.

Spacing scale
  • 4 px
  • 8 px
  • 12 px
  • 16 px
  • 24 px
  • 32 px
  • 48 px
Corners
  • Buttons and inputs
  • Cards and panels
  • Badges
Shadows
Cards use a light shadow.
Menus and dialogs use a deeper shadow.

Foundations

Icons

Heroicons drawn as inline SVG. Icons sit next to text and are hidden from screen readers.

Outline, 24 pixels
  • academic-cap
  • arrow-down-tray
  • arrow-left
  • arrow-right
  • arrow-right-start-on-rectangle
  • arrow-top-right-on-square
  • banknotes
  • bars-3
  • bell
  • book-open
  • briefcase
  • building-library
  • calendar-days
  • chart-bar
  • check-circle
  • chevron-double-left
  • chevron-double-right
  • clipboard-document-list
  • clock
  • cloud-arrow-up
  • cog-6-tooth
  • document-text
  • envelope
  • exclamation-circle
  • exclamation-triangle
  • home
  • identification
  • inbox
  • information-circle
  • language
  • magnifying-glass
  • map-pin
  • megaphone
  • paper-clip
  • phone
  • squares-2x2
  • swatch
  • user-circle
  • users
  • x-circle
  • x-mark
Solid, 20 pixels
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • minus
  • plus
  • x-mark

Components

Buttons

Four styles in three sizes. Every button comes from one component, so the final button design is applied in one place.

Styles
Sizes
Icons, links and disabled
View courses

Components

Badges

Short labels for status and categories. The text carries the meaning, not only the colour.

Styles and sizes
Draft Verified New Postgraduate Returned
Draft Verified New Postgraduate Returned

Components

Alerts

Messages for information, success, warnings and errors. Errors are announced to screen readers straight away.

Prospectus available

The prospectus for session 2026-27 can be downloaded from the admissions page.

Application submitted

Your application number is GMC-2026-04812. Keep it for future reference.

Documents pending

Upload your Class 12 marksheet to complete your application.

Components

Cards

Cards group related content. A whole card can work as one link, as in the third example.

B.Sc. Medical

Botany, zoology and chemistry, with practical work in the college laboratories.

Undergraduate Three years

Library

Books, journals and a reading hall for students and staff.

Notices

Circulars, date sheets and results from the college office.

Open the notice board

Components

Notices

Each notice shows its date and category, and a "New" badge for its first 7 days.

Notice list

Components

Stat counters

Key numbers with Indian digit grouping. They count up once when they come into view.

7,100

Students

15

Undergraduate courses

17

Postgraduate courses

151

Years since 1875

Components

Section headings

Each page section starts with a heading, an optional short label above it and a gold rule.

With label, description and link

Notice board

Latest notices

Date sheets, fee notices and admission updates from the college office.

View all notices
Heading only

Departments

Components

Accordion

Questions and answers that open one at a time.

Fill in the online form, upload your documents and pay the application fee. You can save the form and finish it later.

Your Class 10 and Class 12 marksheets, a recent photograph and, if it applies to you, a category certificate.

Pay online with a debit card, credit card, UPI or net banking. A receipt is sent to you by SMS and email.

Components

Table and pagination

Tables scroll sideways on phones instead of squeezing their columns. Long lists are split into pages.

Sample applications
Application number Name Course Submitted on Status
GMC-2026-04812 Harpreet Kaur B.A. Submitted
GMC-2026-04811 Gurpreet Singh B.Sc. Medical Verified
GMC-2026-04810 Simranjeet Kaur B.Com. (Hons.) Fee paid
GMC-2026-04809 Arjun Sharma BCA Admitted
GMC-2026-04808 Navneet Kaur M.A. Punjabi Returned

Components

Forms

Every field has a visible label. Hints sit under the label and errors appear next to the field they belong to.

Admission form fields

As written on your Class 12 certificate.

Enter an email address in the correct format, like name@example.com.

Ten digits. Updates about your application are sent here by SMS.

Course type

Choose a file or drag it here

PDF, JPG or PNG, up to 2 MB

Components

Progress

The stepper shows where an applicant is in a long form. On phones it shortens to "Step 3 of 5".

Stepper
  1. Personal details (completed)
  2. Academic details (completed)
  3. 3 Documents (current step)
  4. 4 Fee payment (not started)
  5. 5 Review and submit (not started)
Progress bar
Application complete 60%

Components

Status timeline

A record of what happened to an application, with the time and who acted.

Application GMC-2026-04812

  1. Application submitted

    Done

    Applicant

  2. Documents returned

    Rejected

    Admissions office

    The Class 12 marksheet is not readable. Upload a clearer copy.

  3. Documents verified

    Done

    Admissions office

  4. Fee payment

    In progress
    Waiting for the applicant to pay the admission fee.

  5. Admission confirmed

    Pending

Components

Empty state

Shown when a list has nothing in it yet, with a next step where there is one.

No notices yet

Notices from your department will appear here.

Open the notice board

Layouts

Page layouts

Three layouts share the same components. Log in with the matching account to see the portal previews with sample data.

Public website

Used by this page: top bar, header, main menu and footer.

Apply for admission