Color Palette
The theme uses a sophisticated color palette emphasizing deep blues, warm grays, and accent golds that convey professionalism and clarity.
Primary Colors
Accent Colors
Text Colors
Background Colors
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.
Font Size Scale
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
- Hypothesis formation and theoretical framework development
- Experimental design and methodology selection
- Data collection and measurement procedures
- Statistical analysis and interpretation
- 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.
Memory Consolidation in Learning Contexts
An examination of how memory consolidation processes influence learning efficiency across multiple cognitive domains and educational contexts.
Featured Article
This featured article represents a highlighted contribution that should stand out.
Read ArticleForm 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
This design system showcase demonstrates the theme's typography, colors, and component styling used throughout the website.