Brandon Lambert Design System

Academic aesthetic for portfolio & project showcase

Loading...
🔍 ×
Foundation Components Patterns Utilities

Foundation Design Tokens & Variables

Core design system primitives: color palette, typography, spacing, and layout patterns

🎨 Color Palette
12 semantic colors with light/dark variants
12 colors ▼
Ink (Primary Text)
--color-ink
#1a1a1a
Paper (Background)
--color-paper
#fafaf9
Accent (Academic Blue)
--color-accent
#2c5282
Secondary
--color-secondary
#718096
Ink Light
--color-ink-light
#4a5568
Ink Lighter
--color-ink-lighter
#718096
Accent Dark
--color-accent-dark
#1a365d
Accent Light
--color-accent-light
#3182ce
Highlight
--color-highlight
#e2e8f0
Success
--color-success
#38a169
Warning
--color-warning
#d69e2e
Error
--color-error
#e53e3e
/* Usage */
color: var(--color-ink);
background: var(--color-paper);
border-color: var(--color-accent);
✍️ Typography
1.25 ratio scale with Crimson Text headings
8 sizes ▼

H1 - 3xl (3.052rem)

H2 - 2xl (2.441rem)

H3 - xl (1.953rem)

H4 - lg (1.563rem)

H5 - md (1.25rem)

Body - base (1rem)

Small - sm (0.8rem)

Extra Small - xs (0.64rem)

/* Font Families */
--font-heading: 'Crimson Text', Georgia, serif;
--font-body: -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
📏 Spacing System
8px-based spacing grid (4px to 96px)
10 steps ▼
space-1: 4px
space-2: 8px
space-3: 16px
space-4: 24px
space-5: 32px
space-6: 48px

Components UI Building Blocks

Reusable components: buttons, cards, badges, timeline, tabs, and gallery

🔘 Buttons
Primary, secondary, and text button variants
3 variants ▼ 
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-text">Text Link</button>
🃏 Cards
Content containers with title, description, metadata
1 variant ▼

Project Title

A brief description explaining the project's purpose and key features. Cards organize related information with subtle elevation.

Last updated: 2025-09
<div class="card">
  <h3 class="card-title">Title</h3>
  <p class="card-description">Description</p>
  <div class="card-meta">Metadata</div>
</div>
🏷️ Badges
Small labels for status, categories, and tags
5 variants ▼
Default Primary Success Warning Outline 
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
📅 Timeline
Chronological event display with visual markers
1 variant ▼
2024 - Present

Current Position

Company Name

Description of responsibilities and achievements.

2022 - 2024

Previous Position

Another Company

Key accomplishments during this period.

🖼️ Gallery Component
Image gallery with thumbnails and modal lightbox
1 variant ▼

Sophisticated gallery system with thumbnail navigation, modal lightbox, video support, captions, and full accessibility features. See implementation in _includes/mini-gallery.html and _sass/_gallery.scss. 

<!-- Jekyll Include -->
{% include mini-gallery.html
  project_name="project-name"
  gallery=site.data.project.gallery
%}

Patterns Layout Patterns

Common page patterns: navigation, hero sections, and responsive breakpoints

🧭 Navigation
Sticky header with mobile menu and language toggle
1 pattern ▼

Responsive navigation with desktop horizontal menu and mobile overlay. Includes language switcher and smooth scroll behavior.

🎯 Hero Section
Two-column layout with avatar, bio, and actions
1 pattern ▼

Flexible hero pattern adapting from single-column mobile to two-column desktop. Includes avatar, title, tagline, language pills, and call-to-action buttons.

📱 Responsive Design
Mobile-first with 4 breakpoints
4 breakpoints ▼
< 768px: Mobile - Single column, touch-friendly
768px - 1023px: Tablet - Two columns, adapted nav
1024px - 1439px: Desktop - Multi-column, full features
≥ 1440px: Wide Desktop - Expanded layout

Utilities Helper Classes

Single-purpose utility classes for common styling needs

🛠️ Utility Classes
Text, spacing, display, and layout utilities
50+ classes ▼ 
/* Text Utilities */
.text-left, .text-center, .text-right
.text-uppercase, .text-lowercase
.text-small, .text-muted, .text-accent

/* Spacing - Margin */
.m-0 through .m-5
.mt-0 through .mt-8
.mb-0 through .mb-8
.mx-auto

/* Spacing - Padding */
.p-0 through .p-5
.pt-0 through .pt-8
.pb-0 through .pb-8

/* Display & Layout */
.hidden, .block, .inline-block
.w-full, .max-w-full
.relative, .absolute, .fixed, .sticky

/* Accessibility */
.sr-only /* Screen reader only */
♿ Accessibility
WCAG 2.1 AA compliance features
Built-in ▼
  • Color Contrast: All text meets 4.5:1 minimum ratio
  • Focus States: Visible 2px outlines on interactive elements
  • Keyboard Navigation: Full keyboard support, logical tab order
  • Screen Readers: Semantic HTML, ARIA labels, skip links
  • Reduced Motion: Respects prefers-reduced-motion query
  • High Contrast: Enhanced in high-contrast mode
  • Touch Targets: Minimum 44×44px on mobile