EGS Pillay Logo
Home/Web Guidelines

EGS Pillay Brand Guidelines · Web & UI

Layout Breakpoints

We employ a responsive, mobile-first grid system based on the Carbon Design System principles. Ensure designs are fluid, scaling gracefully across viewports.

Desktop

1200px / 12-col

12-column grid layout with 24px gutters. Standard left-sidebar navigation.

Tablet

768px / 8-col

8-column grid with 16px gutters. Sidebars shift to hidden toggle drawers.

Mobile

375px / 4-col

4-column linear layout with 12px gutters. All components stack vertically.

Button Components

Buttons drive actions. We use sharp, borderless buttons with solid fills. Always provide hover states and distinct focus rings.

Default Action
Alternative Action
Low Priority
Destructive
State: Unavaliable
/* CSS Blueprint */
.btn-primary {
  background-color: var(--primary); /* #001c70 */
  color: #ffffff;
  font-family: var(--font-jost);
  padding: 12px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--primary-hover); /* #001050 */
}

Form Input States

Inputs must have obvious focus and validation states. Do not rely solely on color for errors; include clear messaging.

Must be a 10 digit valid mobile number

Accessibility Rule

When validating forms, do not rely on red borders alone. Always pair an error state with an explicit, readable error message below the field, and use icons to reinforce meaning for colorblind users.

Alerts & Notifications

Use inline alerts to convey system status. Do not overuse toast notifications. Alerts use left-border highlights.

Information

Registration for the upcoming semester begins on August 1st.

Success

Your application has been submitted successfully.

Error

Connection timed out. Please check your internet connection and try again.

Cards & Containers

We do not use drop-shadows for elevation. We use flat borders, background colors, and typography to create hierarchy.

Do

Flat Card Design

Clean 1px borders with zero shadow.

Read More →

Use a solid 1px border (`var(--border)`) on white backgrounds to distinguish containers.

Don't

Soft Shadows & Radii

Too much shadow, rounded corners.

Read More

Avoid heavy drop shadows and large rounded corners. We follow the Carbon Design sharp-edge aesthetic.

Typography Hierarchy

Web specific typography scales. We use fluid typography scaling to ensure readability across all devices.

Display Large (H1)

Building the Future

Size: 42pxLine-height: 1.2Weight: 800 (ExtraBold)Font: Montserrat
Heading (H2)

Academic Excellence

Size: 28pxLine-height: 1.3Weight: 700 (Bold)Font: Montserrat
Subheading (H3)

Department of Computer Science

Size: 20pxLine-height: 1.4Weight: 600 (SemiBold)Font: Jost
Body Regular (P)

The EGS Pillay Group of Institutions has a rich legacy of academic excellence and community service. We believe in nurturing talent and fostering an environment of continuous learning.

Size: 16pxLine-height: 1.6Weight: 400 (Regular)Font: IBM Plex Sans

Spacing Scale

Consistent spacing creates rhythm and hierarchy. We use a base-4 spacing scale for all web components.

0.25rem (4px)
Micro adjustments, inline icons
0.5rem (8px)
Inner component spacing, small gaps
1rem (16px)
Standard padding, list items
1.5rem (24px)
Card padding, minor section gaps
2rem (32px)
Major component gaps, grid gutters
3rem (48px)
Section headings, outer margins
4rem (64px)
Major section breaks