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.
1200px / 12-col
12-column grid layout with 24px gutters. Standard left-sidebar navigation.
768px / 8-col
8-column grid with 16px gutters. Sidebars shift to hidden toggle drawers.
375px / 4-col
4-column linear layout with 12px gutters. All components stack vertically.
/* 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.
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.
Flat Card Design
Clean 1px borders with zero shadow.
Read More →Use a solid 1px border (`var(--border)`) on white backgrounds to distinguish containers.
Soft Shadows & Radii
Too much shadow, rounded corners.
Read MoreAvoid 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.
Building the Future
Academic Excellence
Department of Computer Science
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.
Spacing Scale
Consistent spacing creates rhythm and hierarchy. We use a base-4 spacing scale for all web components.