Gravitas '26

Overview

Gravitas '26 is VIT Vellore's flagship annual technical festival, and its design system embodies a "Neon-Minimalist" aesthetic that merges cutting-edge technology with bold, purposeful restraint. The brand personality is energetic yet focused: electric purples (#8051eb primary, #885ff7 secondary) and lime accents (#ccff00 tertiary) punctuate a deep, near-black canvas (#0d0e20), creating a visual language that feels simultaneously futuristic and grounded. The UI celebrates precision through monospace typography (IBM Plex Mono, Aux Mono) paired with geometric display faces (Aldrich), evoking both technical rigor and creative ambition.

The tone is direct, confident, and inclusive—speaking to engineers, designers, and innovators with equal respect. Voice patterns favor imperative clarity: "Explore events," "Join the community," "Build the future." The brand avoids flowery language; every word serves function. Example: "Expo 3.0 is here. 1st September, 2:00 PM – 8:00 PM, Jimmy Carter Road." This is a festival that trusts its audience to understand the stakes without hyperbole.

Colors

The color system operates on a principle of **high-contrast luminosity against deep space**. The primary accent, #8051eb (a saturated, mid-tone purple), is the signature interactive color—deployed on CTAs, focus states, and brand-critical UI elements. It reads as both sophisticated and energetic, never cold. Secondary #885ff7 (a lighter purple) provides hover states and supporting accents, maintaining visual continuity while signaling interactivity. Tertiary #ccff00 (electric lime) is reserved for high-priority badges, alerts, and accent highlights—its neon quality commands attention without overwhelming.

The surface stack anchors the experience in deep, accessible darkness: surface #0d0e20 (near-black with slight blue undertone) prevents eye strain during extended browsing, while surface

Typography

The type system balances **technical precision with visual drama**. Display and headline layers use Aldrich (a geometric, all-caps display face from Google Fonts) at weights 700, set at 72px and 48px respectively with tight line-heights (80px, 56px) and negative letter-spacing (-0.02em, -0.01em) to create compact, commanding presence. Body copy defaults to Inter (a humanist sans-serif) at 16px/400 weight with 24px line-height, ensuring readability on the dark background. Monospace layers—IBM Plex Mono for UI labels and Aux Mono for marquee/banner text—reinforce the technical identity and provide visual hierarchy breaks. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (12px) over gradient backgrounds to maintain legibility. Headings set in Aldrich should never use letter-spa

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1400px, centered with mx-auto. Horizontal padding scales responsively: 24px on mobile (sm), 48px on tablet (md), 64px on desktop (lg). The spacing scale uses semantic tokens: unit (8px) as the baseline, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. Container elements (cards, modals) use md (24px) internal padding; list items and compact controls use sm (12px). The marquee banner at the top runs full-width with py-1 (4px vertical) and ml-12 (48px left margin) to establish rhythm. White-space is generous but purposeful—never cramped—reflecting the brand's confidence in its content. Sections are separated by lg (40px) gaps, creating

Elevation & Depth

Depth is conveyed through **layered backgrounds and subtle shadows** rather than dramatic drop-shadows. The base layer (Level 1) is the surface background #0d0e20 with no shadow. Level 2 (standard cards, input fields) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border at rgba(192, 132, 252, 0.2) to define edges without harshness. Level 3 (modals, elevated cards, hero overlays) applies box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) with a 1px border at rgba(192, 132, 252, 0.3) and backdrop-filter: blur(4px) on overlay elements. Event cards use a semi-transparent background (rgba(72, 0,

Shapes

The shape philosophy is **"Technical Geometry with Selective Softness"**—sharp angles dominate, but strategic rounding humanizes key interactions. Buttons use 0px border-radius (pure rectangles) to reinforce technical precision, except secondary buttons which use 9999px on the left (pill-shaped) to signal alternative action. Cards and modals use 32px (1.5rem / xl) border-radius for a modern, approachable feel—not too soft, not too hard. Input fields default to 0.5rem (DEFAULT) for subtle definition. The marquee banner and badges use 9999px (full) for maximum roundness, emphasizing their role a

Components

Action Elements Primary buttons (CTA) use backgroundColor: #8051eb, textColor: #ffffff, fontFamily: IBM Plex Mono, fontSize: 15.2px, fontWeight: 500, padding: 0px 32px 0px 24px, height: 48px, borderRadius: 0px, and boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, transition backgroundColor to #885ff7 over 150ms. On active/focus, add boxShadow: 0 0 0 3px rgba(128, 81, 235, 0.2) (inset ring). Secondary buttons invert: backgroundColor: #d6c5ff, textColor: #240e56, borderRadius: 9999px 0px 0px 9999px (asymmetric pill), padding: 0px 4px 0px 8px. Hover state shifts to backgroundColor: #c4b5fd. Both button types disable with opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces Standard cards use backgroundColor: {colors.surface-container} (#1a1826), borderRadius: 1.5rem (32px),

Do's and Don'ts

**Do**

• Do use #8051eb (primary) exclusively for primary CTAs and focus states—it is the brand's signature interactive color and must not be diluted.
• Do apply the full 12-column grid with 1400px max-width and responsive padding (24px/48px/64px) to maintain consistent rhythm across breakpoints.
• Do pair Aldrich headlines with Inter body text; never reverse or mix display faces within a single section.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on all elevated surfaces; reserve 0 16px 40px rgba(0, 0, 0, 0.3) for modals and hero overlays only.
• Do transition all interactive states (hover, focus, active) over 150ms–200ms using cubic-bezier(0.4, 0, 0.2, 1) easing.
• Do maintain WCAG AAA contrast: white (#ffffff) on #8051eb is 8.2:1; never reduce opacity below 70% on text over dark backgrounds.

**Don't**

• Don't use rounded corners (border-radius > 0) on primary buttons; they must remain sharp rectangles to signal technical precision.
• Don't apply the tertiary accent #ccff00 to body text or large text blocks—reserve it for badges, alerts, and small highlights only.
• Don't mix monospace and sans-serif fonts within a single heading; Aldrich headlines must stand alone without Inter interference.
• Don't use drop-shadows larger than 0 16px 40px rgba(0, 0, 0, 0.3); excessive shadow depth contradicts the neon-minimalist aesthetic.
• Don't reduce padding below 12px (sm) on interactive elements; the brand values breathing room and clarity over density.
• Don't apply background colors from the surface-container stack to text; on-surface (#ffffff) and on-surface-variant (#d6c5ff) are the only approved text colors.