Color Palette

Academic-inspired colors with careful attention to contrast and accessibility.

#1a1a1a

Ink

--color-ink

#fafaf9

Paper

--color-paper

#2c5282

Accent

--color-accent

#718096

Secondary

--color-secondary

#4a5568

Ink Light

--color-ink-light

#718096

Ink Lighter

--color-ink-lighter

#1a365d

Accent Dark

--color-accent-dark

#3182ce

Accent Light

--color-accent-light

#e2e8f0

Highlight

--color-highlight

#38a169

Success

--color-success

#d69e2e

Warning

--color-warning

#e53e3e

Error

--color-error

Typography

Type scale and font families for elegant, readable content.

Type Scale

1.25 ratio scale with Crimson Text for headings

Heading 1 - 3xl (3.052rem)

Heading 2 - 2xl (2.441rem)

Heading 3 - xl (1.953rem)

Heading 4 - lg (1.563rem)

Heading 5 - md (1.25rem)

Heading 6 - base (1rem)

Body text - base (1rem) with line-height of 1.6

Small text - sm (0.8rem)

/* Font Families */
--font-heading: 'Crimson Text', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Font Sizes */
--font-size-3xl: 3.052rem;
--font-size-2xl: 2.441rem;
--font-size-xl: 1.953rem;
--font-size-lg: 1.563rem;
--font-size-md: 1.25rem;
--font-size-base: 1rem;
--font-size-sm: 0.8rem;
--font-size-xs: 0.64rem;

Spacing System

8px-based spacing scale for consistent layouts.

Spacing Scale

Consistent spacing units from 4px to 96px

space-1 (4px)

space-2 (8px)

space-3 (16px)

space-4 (24px)

space-5 (32px)

space-6 (48px)

space-8 (64px)

space-10 (80px)

Buttons

Interactive elements for actions and navigation.

Button Variants

Primary, secondary, and text button styles

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-text">Text Button</button>

Cards

Container components for grouped content.

Card Component

Elevated containers with title, description, and metadata

Card Title

This is a card description that provides context about the content. Cards help organize related information.

Updated 2 hours ago

<div class="card">
  <h3 class="card-title">Card Title</h3>
  <p class="card-description">Description text...</p>
  <div class="card-meta">Metadata</div>
</div>

Badges

Small labels for status and categorization.

Badge Variants

Different badge styles for various contexts

Default Primary Success Warning Outline

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-outline">Outline</span>

Timeline

Chronological display of events and experiences.

Timeline Component

Vertical timeline with markers and content

2024 - Present

Senior Developer

Tech Company

Leading development of enterprise applications.

2022 - 2024

Full Stack Developer

Startup Inc.

Built and maintained web applications.

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2024 - Present</div>
    <h4 class="timeline-title">Title</h4>
    <div class="timeline-organization">Organization</div>
    <p class="timeline-description">Description</p>
  </div>
</div>

Text Utilities

Helper classes for text styling and alignment.

Text Classes

Utility classes for quick text modifications

Left aligned text

Center aligned text

Right aligned text

uppercase text

Small text size

Muted text color

Accent color text

/* Text Alignment */
.text-left, .text-center, .text-right

/* Text Transform */
.text-uppercase, .text-lowercase, .text-capitalize

/* Text Styles */
.text-small, .text-large
.text-muted, .text-accent

/* Font Weight */
.font-normal, .font-medium, .font-semibold, .font-bold

Shadows & Borders

Elevation levels and border styles for depth and separation.

Shadow Levels

Subtle shadows for elevation and hierarchy

Shadow SM

--shadow-sm

Shadow LG

--shadow-lg

Shadow XL

--shadow-xl

Border Styles

Border Small (2px)

Border Default (4px)

Accent Border

Tabs

Tab navigation for organizing content into switchable panels.

Tab Component

Interactive tabs with content panels

This is the overview panel content. Tabs help organize complex information into digestible sections.

<div class="tabs">
  <div class="tab-list">
    <button class="tab-button active">Tab 1</button>
    <button class="tab-button">Tab 2</button>
  </div>
  <div class="tab-panel active">Panel 1 content</div>
  <div class="tab-panel">Panel 2 content</div>
</div>

Gallery

Image gallery with lightbox and thumbnail navigation.

Gallery Component

Responsive image gallery with modal viewer

Gallery Features:

✓ Responsive grid layout
✓ Thumbnail navigation
✓ Lightbox modal with zoom
✓ Keyboard navigation (arrow keys)
✓ Touch gesture support
✓ Video support
✓ Captions and descriptions
✓ Lazy loading for performance

{% include mini-gallery.html
  project_name="project-name"
  gallery=site.data.project.gallery
%}

/* Gallery data structure (in _data/project.yml) */
gallery:
  - file: image1.jpg
    caption: "Image caption"
    alt: "Alt text for accessibility"
  - file: video.mp4
    type: video
    caption: "Video description"

Containers

Content containers for consistent max-widths and padding.

Container Sizes

Different container widths for various layouts

.container - Max width: 1200px

.container-narrow - Max width: 720px

.container-medium - Max width: 900px

<div class="container">
  <!-- Content with max-width: 1200px -->
</div>

<div class="container-narrow">
  <!-- Content with max-width: 720px -->
</div>

/* CSS Variables */
--max-width: 1200px;
--content-width: 720px;
--container-medium: 900px;

Grid System

Flexible grid layouts with responsive columns.

Grid Classes

CSS Grid-based layout system

Col 1

Col 2

Col 3

50%

Auto

<div class="grid grid-cols-2">...</div>
<div class="grid grid-cols-3">...</div>
<div class="grid grid-cols-4">...</div>
<div class="grid grid-cols-auto">
  <!-- Auto-fit with min 280px -->
</div>

Flexbox Utilities

Flexible box layout utilities for alignment and distribution.

Flex Classes

Common flexbox patterns

Justify Content:

Start

End

Align Items:

Centered

/* Flex Container */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Alignment */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

/* Justification */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Gap */
.gap-1 through .gap-5

Hero Section

Landing page hero pattern with avatar and content.

Hero Layout

Two-column hero with responsive behavior

Hero Title

Professional tagline here

Hero biography or summary content goes here. This section provides context and introduces the main content.

<section class="hero">
  <div class="hero-content">
    <div class="hero-main">
      <div class="hero-avatar"><img src="..."></div>
      <h1 class="hero-title">Title</h1>
      <p class="hero-tagline">Tagline</p>
      <div class="hero-actions">
        <button class="btn btn-primary">CTA</button>
      </div>
    </div>
    <div class="hero-bio">
      <p class="hero-summary">Biography</p>
    </div>
  </div>
</section>

Navigation Patterns

Header navigation with mobile menu support.

Site Navigation

Responsive navigation with mobile toggle

<header class="site-header">
  <div class="header-inner">
    <a class="site-title">Title</a>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <button class="mobile-menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</header>

Spacing Utilities

Margin and padding utility classes.

Spacing Classes

Quick spacing adjustments

Margin Classes:

.m-0 through .m-5 - All sides
.mt-0 through .mt-8 - Top
.mb-0 through .mb-8 - Bottom
.mx-auto - Horizontal auto

Padding Classes:

.p-0 through .p-5 - All sides
.pt-0 through .pt-8 - Top
.pb-0 through .pb-8 - Bottom

Display Utilities

Control element display and visibility.

Display Classes

Show, hide, and display type utilities

.hidden - Hide element
.block - Display block
.inline-block - Display inline-block
.inline - Display inline

Width:
.w-full - Width 100%
.w-auto - Width auto
.max-w-full - Max-width 100%

Position:
.relative, .absolute, .fixed, .sticky

Overflow:
.overflow-hidden, .overflow-auto, .overflow-scroll

Responsive Design

Breakpoints and responsive utilities for adaptive layouts.

Breakpoints

Mobile-first responsive system

Mobile: < 768px

Tablet: 768px - 1023px

Desktop: 1024px - 1439px

Wide: ≥ 1440px

/* Responsive Utilities */
.hidden-mobile  /* Hide on mobile */
.hidden-tablet  /* Hide on tablet */
.hidden-desktop /* Hide on desktop */

.block-mobile   /* Show on mobile */
.block-tablet   /* Show on tablet */
.block-desktop  /* Show on desktop */

Accessibility

WCAG 2.1 AA compliant patterns and utilities.

Accessibility Features

Built-in accessibility support

✅ Color contrast ratios meet WCAG AA standards
✅ Focus indicators on all interactive elements
✅ Semantic HTML structure
✅ ARIA labels and roles where needed
✅ Keyboard navigation support
✅ Screen reader optimized
✅ Reduced motion support

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}