Colors

Our color palette is designed for clarity, accessibility, and visual hierarchy. Each color has been carefully selected to work harmoniously across all interfaces.

Primary Dark

#1a365d

Primary

#2c5282

Primary Light

#3182ce

Text Dark

#333333

Text Medium

#666666

Text Light

#999999

Background

#f7fafc

White

#ffffff

/* CSS Variables */
:root {
  --color-primary-dark: #1a365d;
  --color-primary: #2c5282;
  --color-primary-light: #3182ce;
  --color-text-dark: #333333;
  --color-text-medium: #666666;
  --color-text-light: #999999;
  --color-bg: #f7fafc;
  --color-white: #ffffff;
}

Typography

Typography creates hierarchy and improves readability. We use Crimson Text for headings and Inter for body text.

Display Heading

Academic Excellence

Font: Crimson Text Size: 48px Weight: 700 Line Height: 1.2

Section Heading

Research & Development

Font: Crimson Text Size: 32px Weight: 600 Line Height: 1.3

Subheading

Project Overview

Font: Inter Size: 20px Weight: 600 Line Height: 1.4

Body Text

This is standard body text used throughout the application. It provides optimal readability and maintains consistency across all content areas.

Font: Inter Size: 16px Weight: 400 Line Height: 1.6

Spacing

Consistent spacing creates rhythm and improves visual hierarchy. We use an 8px base unit system.

Token	Size	Pixels	Usage
`--space-xs`	0.25rem	4px	Tight spacing between related elements
`--space-sm`	0.5rem	8px	Small gaps, padding within components
`--space-md`	1rem	16px	Standard spacing between elements
`--space-lg`	1.5rem	24px	Spacing between sections
`--space-xl`	2rem	32px	Large spacing between major sections
`--space-2xl`	3rem	48px	Extra large spacing for major breaks

Elevation

Elevation creates depth and establishes visual hierarchy through shadows.

Shadow Examples

Small
box-shadow-sm

Medium
box-shadow-md

Large
box-shadow-lg

Extra Large
box-shadow-xl

Buttons

Buttons trigger actions and guide users through workflows.

Button Variants

Button Sizes

Forms

Form elements for collecting and validating user input.

Form Elements

Text Input

Email Input

Select Dropdown

Textarea

I agree to the terms and conditions

Cards

Cards contain content and actions about a single subject.

Card Examples

Card Title

This is the card content. Cards are flexible containers.

Image Card

Cards can include images, text, and actions.

Learn More →

Badges

Badges highlight important information and status.

Badge Variants

Default Primary Success Warning Danger Info

Tabs

Tabs organize content into separate views where only one view is visible at a time.

Tab Component

Tab content goes here. Click the tabs above to switch between different views.

Modals

Modals focus user attention on a specific task or information.

Modal Example

Modal Title

This is what a modal looks like. It overlays the main content and requires user interaction.

Alerts

Alerts provide contextual feedback messages for user actions.

Alert Types

Default alert message

Success! Your changes have been saved.

Warning: Please review your input.

Error: Something went wrong.

Info: Here's some helpful information.

Grid System

A flexible 12-column grid system for creating responsive layouts.

12 Column Grid

1

2

3

4

5

6

7

8

9

10

11

12

Common Layouts

6 columns

3 cols

6 columns

3 cols

Sidebar (3)

Main Content (9)



  Column 1
  Column 2




  Item 1
  Item 2
  Item 3

Containers

Containers provide consistent max-widths and padding for page content.

Container Sizes

Small Container - max-width: 640px

Medium Container - max-width: 768px

Large Container - max-width: 1024px

Extra Large Container - max-width: 1280px

Flexbox

Flexbox utilities for creating flexible layouts and aligning content.

Flexbox Examples

Justify Content

Start

Center

End

Align Items

Small

Medium

Large

Flex Direction

Item 1

Item 2

Item 3

Navigation

Navigation patterns for headers, sidebars, and menus.

Horizontal Navigation

Breadcrumb Navigation

Hero Sections

Hero sections create impactful first impressions and communicate key messages.

Hero Example

Welcome to Our Platform

Build amazing experiences with our comprehensive design system

Gallery

Gallery layouts for displaying images and media content.

Image Gallery

Spacing Utilities

Utility classes for controlling margin and padding.

Margin

Add margin to elements

.m-0 { margin: 0 }
.m-1 { margin: 0.25rem }
.m-2 { margin: 0.5rem }
.m-4 { margin: 1rem }
.m-8 { margin: 2rem }

Padding

Add padding to elements

.p-0 { padding: 0 }
.p-1 { padding: 0.25rem }
.p-2 { padding: 0.5rem }
.p-4 { padding: 1rem }
.p-8 { padding: 2rem }

Directional Spacing

Control specific sides

.mt-4 { margin-top: 1rem }
.mr-4 { margin-right: 1rem }
.mb-4 { margin-bottom: 1rem }
.ml-4 { margin-left: 1rem }
.mx-4 { margin-left/right: 1rem }
.my-4 { margin-top/bottom: 1rem }

Display Utilities

Control the display behavior of elements.

Display Types

Change display property

.d-none { display: none }
.d-block { display: block }
.d-inline { display: inline }
.d-inline-block { display: inline-block }
.d-flex { display: flex }
.d-grid { display: grid }

Visibility

Control visibility

.visible { visibility: visible }
.invisible { visibility: hidden }
.opacity-0 { opacity: 0 }
.opacity-50 { opacity: 0.5 }
.opacity-100 { opacity: 1 }

Overflow

Control overflow behavior

.overflow-auto { overflow: auto }
.overflow-hidden { overflow: hidden }
.overflow-visible { overflow: visible }
.overflow-scroll { overflow: scroll }

Text Utilities

Utility classes for text styling and alignment.

Text Alignment

Align text content

.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.text-justify { text-align: justify }

Font Weight

Control font weight

.font-light { font-weight: 300 }
.font-normal { font-weight: 400 }
.font-medium { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold { font-weight: 700 }

Text Transform

Transform text case

.uppercase { text-transform: uppercase }
.lowercase { text-transform: lowercase }
.capitalize { text-transform: capitalize }
.normal-case { text-transform: none }

Borders & Shadows

Utility classes for borders, border radius, and shadows.

Borders

Add borders to elements

.border { border: 1px solid }
.border-0 { border: none }
.border-top { border-top: 1px solid }
.border-right { border-right: 1px solid }
.border-bottom { border-bottom: 1px solid }
.border-left { border-left: 1px solid }

Border Radius

Round corners

.rounded-0 { border-radius: 0 }
.rounded-sm { border-radius: 2px }
.rounded { border-radius: 4px }
.rounded-lg { border-radius: 8px }
.rounded-full { border-radius: 50% }

Box Shadows

Add depth with shadows

.shadow-none { box-shadow: none }
.shadow-sm { small shadow }
.shadow { default shadow }
.shadow-lg { large shadow }
.shadow-xl { extra large shadow }

Accessibility

Guidelines and utilities for creating accessible interfaces.

Accessibility Guidelines

Color Contrast

Ensure text has sufficient contrast against backgrounds (WCAG 2.1 AA compliance):

Normal text: 4.5:1 contrast ratio
Large text: 3:1 contrast ratio
UI components: 3:1 contrast ratio

Keyboard Navigation

All interactive elements must be keyboard accessible:

Use semantic HTML elements
Provide visible focus indicators
Implement logical tab order
Support escape key for dismissible elements

Screen Reader Support

Form submitted successfully

Utility Classes

.sr-only { /* Screen reader only */ }
.focus-visible { /* Visible focus state */ }
.aria-hidden { aria-hidden: true }
.role-button { role: button }