CC
CollegeCentreDesign System
Design System & Project Foundation

One link for everything you've built, achieved, and are.

A restrained, modern design system built for the CollegeCentre student identity platform. Crafted with typographic restraint, accessible Radix primitives, and resilient design tokens.

Student-First Architecture
Next.js App Router
Tailwind CSS
TypeScript Strict
Design System Active
01 / Foundation

Typography System

High-legibility sans-serif paired with precision monospace accents. Clear hierarchical contrast without exaggerated sizes.

Display

Alex Rivera, CS & AI

Heading 1

Published Research & Open Source Projects

Heading 2

National Hackathon Winner — 2026

Heading 3

Autonomous Drone Navigation Firmware

Heading 4

Stanford AI Summer Fellowship Fellow

Lead

Building distributed systems and real-time inference kernels. Undergraduate researcher at ACM SIGKDD.

Body Regular

CollegeCentre enables builders to showcase verified repositories, hackathon awards, and research papers with zero fluff.

Monospace / Code

collegecentre.in/alex-rivera

Deterministic vanity links for student portfolios.

02-06 / Visual Tokens

Colors, Radii & Shadows

Calibrated semantic tokens reacting cleanly across light and dark modes.

Foreground / Primary
hsl(var(--primary))
Student Cobalt
hsl(var(--brand))
Achievement Emerald
hsl(var(--success))
Muted Surface
hsl(var(--muted))
rounded-sm (4px)

Tags, checkboxes, badges

rounded-md (6px)

Buttons, inputs, dropdowns

rounded-lg (8px)

Cards, dialogs, showcases

07 / Actions

Buttons

Restrained variants with tactile active-compression feedback, loading spinners, and icon alignment.

08-12 / Form Primitives

Inputs, Selects & Toggles

Accessible, keyboard-navigable form inputs with precision error states and helper notes.

collegecentre.in/

This will be your universal student showcase URL.

Please enter a valid email address.

Visible on your showcase card.

96/180

Showcase public commits and starred work on your profile.

Partially verified credentials.

Make your identity discoverable via your CC link.

Display active builder badge on your header.

13-16 / Identity Cards & Micro-UI

Cards, Avatars, Badges & Tabs

Foundational building blocks for student showcase profiles and achievement blocks.

AR
Verified Builder

Alex Rivera

MIT • Class of 2026

Building next-gen distributed file systems and LLM eval pipelines.
12 ProjectsView
National Award
HackMIT '26

1st Place — AI & Robotics

Autonomous drone visual SLAM in GPS-denied tunnels.

PyTorch
ROS2
C++
Academic Publication

IEEE Transactions '26

Low-latency consensus mechanisms for edge robotics networks.

DOI: 10.1109/TMC.2026
Underline Tabs

Selected repositories, live web apps, and embedded firmware artifacts.

Segmented Pill Tabs
17-20 / Overlays & Feedback

Dropdowns, Dialogs, Toasts & Tooltips

Smooth popovers with backdrop blurs, instant notifications, and keyboard trap protection.

22-26 / System States

Loading, Skeleton, Empty & Error States

First-class system states so the application never feels broken or unresponsive.

Syncing repos...
Verifying credentials
Profile completion
68%
Skeleton Placeholder

No projects published yet

Connect your GitHub, Behance, or add custom showcase cards to complete your profile.