B.Sc. Medical
Botany, zoology and chemistry, with practical work in the college laboratories.
Undergraduate
Three years
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.
- 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·#FFFFFFPage background, cards and text on dark colours.
-
College green
primary·#016332Top bar, main menu, primary buttons and links.
-
Dark green
primary-dark·#014A26Hover and pressed states of green elements.
-
Light green
primary-soft·#E3EFE8Selected items and success messages.
-
College gold
accent·#FBD232Highlights, gold buttons and the "New" badge. Never text on white.
-
Dark gold
accent-dark·#E2B812Hover state of gold buttons.
-
Light gold
accent-soft·#FFF7D6Warning messages and highlighted rows.
-
Text on gold
on-accent·#111111Text on gold backgrounds.
-
Navy
heading·#1D2634Headings and the footer.
-
Body text
text·#222222Body text.
-
Grey text
muted·#666666Hints, dates and secondary text.
-
Light grey
surface·#F5F5F5Page sections and the portal background.
-
Divider
border·#E6E6E6Dividers and card edges.
-
Control border
border-strong·#8A8A8ABorders of inputs, selects and checkboxes.
-
Error red
danger·#B42318Error messages and failed states.
-
Light red
danger-soft·#FEF3F2Error 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.
| 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.
Aa
Admissions are open for session 2026-27
Admissions are open for session 2026-27
Semi-bold and bold, for headings, buttons and menus.
Aa
Admissions are open for session 2026-27
Admissions are open for session 2026-27
Regular and bold, for body text, forms and tables.
- 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
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.
- 4 px
- 8 px
- 12 px
- 16 px
- 24 px
- 32 px
- 48 px
- Buttons and inputs
- Cards and panels
- Badges
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.
-
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
-
check -
chevron-down -
chevron-left -
chevron-right -
chevron-up -
minus -
plus -
x-mark
Components
Badges
Short labels for status and categories. The text carries the meaning, not only the colour.
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.
Payment not completed
No money was deducted. Try again or use another payment method.
Components
Cards
Cards group related content. A whole card can work as one link, as in the third example.
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.
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.
Notice board
Latest notices
Date sheets, fee notices and admission updates from the college office.
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.
| Application number | Name | Course | Submitted on | Status |
|---|---|---|---|---|
| GMC-2026-04797 | Arjun Sharma | M.A. English | Submitted | |
| GMC-2026-04796 | Navneet Kaur | B.A. | Verified | |
| GMC-2026-04795 | Manpreet Singh | B.Sc. Medical | Fee paid | |
| GMC-2026-04794 | Ishita Bansal | B.Com. (Hons.) | Admitted | |
| GMC-2026-04793 | Karanveer Singh | BCA | Returned |
Components
Forms
Every field has a visible label. Hints sit under the label and errors appear next to the field they belong to.
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.
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".
- Personal details (completed)
- Academic details (completed)
- 3 Documents (current step)
- 4 Fee payment (not started)
- 5 Review and submit (not started)
Application complete
60%
Components
Status timeline
A record of what happened to an application, with the time and who acted.
-
Application submitted
DoneApplicant
-
Documents returned
RejectedAdmissions office
The Class 12 marksheet is not readable. Upload a clearer copy. -
Documents verified
DoneAdmissions office
-
Fee payment
In progressWaiting for the applicant to pay the admission fee. -
Admission confirmed
Pending
Components
Empty state
Shown when a list has nothing in it yet, with a next step where there is one.
Components
Dialog
Dialogs ask for confirmation. Focus stays inside the dialog and the Esc key closes it.
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.
Staff and admin portal
Sidebar navigation for office staff, teachers and administrators.
Student and applicant portal
A simple top menu, built for phones first.