Design System Elements

A comprehensive showcase of all typography, components, and design elements used in my site's theme. This reference guide demonstrates consistent styling and implementation patterns.

Color Palette

The theme uses a sophisticated color palette emphasizing deep blues, warm grays, and accent golds that convey professionalism and clarity.

Primary Colors

#1e3a8a
Primary
#3b82f6
Primary Light

Accent Colors

#d97706
Accent
#f59e0b
Accent Light

Text Colors

#1f2937
Text Primary
#4b5563
Text Secondary

Background Colors

#ffffff
Background
#f9fafb
Background Alt

Typography Scale

Serif typography optimized for reading with carefully calibrated sizes, line heights, and spacing for optimal readability and thoughtful presentation.

Heading Hierarchy

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Heading 5 - Element Title
Heading 6 - Detail Title

Body Text

This is standard body text using our theme's typography. The text is set in Georgia serif at 18px (1.125rem) with a relaxed line height of 1.625 for optimal reading comfort. This size and spacing combination has been carefully calibrated for content consumption.

This is secondary body text, used for supporting information and metadata. It uses the same font and size but with reduced color opacity to create visual hierarchy while maintaining readability.

This is muted text in the sans-serif font family, typically used for metadata, timestamps, and supplementary information.

Font Size Scale

5XL - 48px
4XL - 36px
3XL - 30px
2XL - 24px
XL - 20px
LG - 18px (Body)
Base - 16px
SM - 14px
XS - 12px

Text Elements

Common text formatting elements styled for presentation and discourse.

Links and Citations

This paragraph contains a standard text link and a citation-style reference[1]. Links use the primary color with subtle underlines on hover, while citation links are styled as superscript numbers in the accent color.

Multiple citations can be grouped[2][3][4] and standard links can be interspersed naturally within the text.

Lists

Unordered List

  • Primary research methodologies in cognitive science
  • Experimental design considerations for memory studies
  • Statistical analysis approaches for learning research
  • Nested list items:
    • Quantitative measurement techniques
    • Qualitative assessment methods
    • Mixed-methods integration strategies

Ordered List

  1. Hypothesis formation and theoretical framework development
  2. Experimental design and methodology selection
  3. Data collection and measurement procedures
  4. Statistical analysis and interpretation
  5. Results discussion and conclusion synthesis

Blockquotes

The intersection of memory and learning represents one of the most fascinating and practically relevant areas of cognitive research. Understanding how these processes interact can fundamentally transform our approach to education and knowledge acquisition.

Dr. Fancy Pants, Journal of Cognitive Science (2025)

Code Elements

Inline code elements like console.log() and calculateMean() are styled for contexts discussing computational methods.

// Example code block for methodology documentation
function calculateMemoryRetention(initialScore, delayedScore) {
    const retentionRate = (delayedScore / initialScore) * 100;
    return {
        retentionPercentage: retentionRate,
        forgettingCurve: 100 - retentionRate
    };
}

Buttons

Clean, neat button styles

Tables

Data presentation tables styled for easy consumption of dense information.

Study Sample Size Methodology Effect Size Significance Citation Count
Memory Consolidation Study A 245 Randomized Controlled Trial 0.73 p < 0.001 89
Learning Transfer Research B 182 Quasi-Experimental 0.58 p < 0.01 67
Cognitive Load Investigation C 320 Mixed Methods 0.64 p < 0.001 124
Spaced Repetition Meta-Analysis 1,247 Systematic Review 0.81 p < 0.001 203

Cards and Content Blocks

Card components for displaying research articles, author information, and content organization.

Research Article12 min read

Memory Consolidation in Learning Contexts

An examination of how memory consolidation processes influence learning efficiency across multiple cognitive domains and educational contexts.

[1]
AS

John Turner

Some fancy title

Wouldn't it be nice if I could write a short bio here about me? ¯\_(ツ)_/¯

Form Elements

Professional form styling for research interfaces, contact forms, and search functionality.

Utility Classes

Helpful utility classes for common styling needs and responsive adjustments.

Text Utilities

Center-aligned text for headings and emphasis

Muted text for secondary information

Secondary text for supporting content

Primary colored text for emphasis

Accent colored text for highlights

Spacing Utilities

Element with mb-4 (margin-bottom: 1rem)
Element with mb-6 (margin-bottom: 1.5rem)
Element with mb-8 (margin-bottom: 2rem)
Element with mt-8 (margin-top: 2rem)

This design system showcase demonstrates the theme's typography, colors, and component styling used throughout the website.