CampusKit Design System

CampusKit Design System mockup preview
Click to expand

CampusKit is a collegiate, structured, and official design system purpose-built for university portals and academic management platforms. It reflects the gravitas of institutional environments while remaining usable for students, faculty, and staff alike. The maroon-and-gold palette conveys tradition and authority, while the structured layout system ensures dense academic data remains scannable and accessible.

Primary#7F1D1D
Secondary#CA8A04
Tertiary#1E3A5F
Surface Base#F8FAFC
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Vollkorn · 32px · bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Vollkorn · 26px · bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Vollkorn · 21px · semibold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Vollkorn · 18px · semibold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyDM Sans · 16px · regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smDM Sans · 14px · regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsDM Sans · 12px · medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoSource Code Pro · 14px · regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

CampusKit is a collegiate, structured, and official design system purpose-built for university portals and academic management platforms. It reflects the gravitas of institutional environments while remaining usable for students, faculty, and staff alike. The maroon-and-gold palette conveys tradition and authority, while the structured layout system ensures dense academic data remains scannable and accessible.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Default Filter ChipSelected Filter ChipHover Filter ChipEnrolled Status ChipPending Status ChipDropped Status ChipWaitlisted Status Chip

List

Default List Item

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-focus

Do's & Don'ts

Do

Give the academic calendar prominence -- surface upcoming deadlines, registration windows, and semester milestones on every dashboard.
Display grades with clarity -- use large, well-spaced grade indicators with clear scales (letter, percentage, GPA) and sufficient contrast.
Maintain a formal, institutional tone -- use serif headings and professional language that matches the academic environment.
Follow institutional branding guidelines -- ensure the maroon-and-gold palette is applied consistently and that university logos have proper clearance space.
Support dense data tables -- academic portals are data-heavy; use alternating row backgrounds, sticky headers, and clear column alignment.

Don't

Don't use casual or playful language -- this is an official institutional tool; avoid slang, excessive exclamation marks, and informal phrasing.
Don't hide critical deadlines -- registration and assignment due dates must always be visible, never buried in sub-menus.
Don't use color alone to indicate grade status -- always pair color with text labels or icons for accessibility.
Don't overcrowd navigation -- university portals have many sections; use a well-structured sidebar with collapsible groups rather than a flat mega-menu.
Don't auto-delete or auto-archive -- academic records are sensitive; always require explicit user confirmation for destructive actions.
Don't neglect print stylesheets -- students and faculty frequently print transcripts, syllabi, and schedules; ensure clean print layouts.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.7 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/campuskit and implement it in my code

Don't have the MCP? Install it here