Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with muted secondary text

Body text

This is a standard paragraph. The theme uses Atkinson Hyperlegible, a typeface designed for maximum legibility by the Braille Institute. Body text is set at 1rem (16px) with a line-height of 1.7 for comfortable reading. The maximum prose width is 42rem (~672px) to maintain an optimal line length of roughly 60–75 characters.

This is a second paragraph showing the vertical rhythm between elements. Notice how bold text and italic text and bold italic text each render clearly. The typeface was specifically designed so that characters like 1, l, I and 0, O are unambiguous.

This is small text, useful for fine print, captions, and supplementary information.

This is muted text, rendered in the theme’s secondary colour.

Inline elements

This text contains strong emphasis and regular emphasis and a hyperlink to an example page and inline code and highlighted text and abbr and ~~deleted text~~ and inserted text and H₂O and x².

Lists

Unordered list

First item in the list
Second item with a bit more text to show how wrapping looks when the content extends beyond a single line on smaller viewports
Third item
- Nested item one
- Nested item two
  - Deeply nested item
Fourth item

Ordered list

First step in the process
Second step with additional context to demonstrate line wrapping behaviour across different screen widths
Third step
1. Sub-step one
2. Sub-step two
Fourth step

Definition list

Term one: Definition for term one, providing context and explanation.
Term two: Definition for term two. Definitions can be longer and may contain links or emphasis.
Term three: A shorter definition.

Blockquotes

Blockquotes are for citing content from other sources.

This is a blockquote. It is styled with a left border accent, subtle background, and italicized text. Blockquotes are commonly used in Markdown with the > prefix.

Multi-paragraph blockquotes work too.

This is the second paragraph within the same blockquote, separated by a blank > line.

— Attribution line

Callouts

Callouts highlight important information or key insights. They use larger text and optional icons to draw attention.

Basic Callout

Use the Kramdown attribute syntax:

Key insight: Solution-focused approaches outperform problem-focused ones across five dimensions.

Or use HTML:

Callout with Icons

Add modifier classes for different callout types with icons:

Usage

HTML approach (works everywhere):

<aside class="callout">
Your callout text here
</aside>

<aside class="callout callout--info">
Informational callout with icon
</aside>

Kramdown approach (Jekyll only):

Your callout text here
{: .callout}

Available modifiers: callout--info, callout--note, callout--success, callout--warning, callout--danger

Icons

This site uses Lucide Icons - a beautiful, open-source icon library. Icons are loaded individually as SVG files for optimal performance and sustainability.

Icon System Overview

Sustainability: Each icon is ~300-450 bytes and loaded only when used. Pages only load the icons they need, keeping the site fast and efficient.

Design: Clean line icons that inherit text color and scale perfectly at any size.

Using Icons

Icons are used automatically throughout the site in various contexts:

Action Links (Presentations, Publications, Projects)

Slides Recording Handout Event Page

Metadata Icons (Tags & Categories)

Icons appear inline with metadata:

thoughts, design learning, research February 2024

Note Title Icons

Notes can have optional icons in their front matter:

---
title: "My Brilliant Idea"
icon: "lightbulb"
---

Common note icons: <span class=”icon icon–lightbulb “ aria-hidden=”true”

  style="width: 20px; height: 20px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> lightbulb, <span class=”icon icon–book-open “ aria-hidden=”true”

  style="width: 20px; height: 20px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> book-open, <span class=”icon icon–calendar “ aria-hidden=”true”

  style="width: 20px; height: 20px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> calendar

Callout Icons

Callouts automatically include icons based on their type:

Info/Note: <span class=”icon icon–info “ aria-hidden=”true”

style="width: 20px; height: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >

</svg></span> Information icon

Success: <span class=”icon icon–circle-check “ aria-hidden=”true”

style="width: 20px; height: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >

</svg></span> Check circle

Warning: <span class=”icon icon–triangle-alert “ aria-hidden=”true”

style="width: 20px; height: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >

</svg></span> Triangle alert

Danger: <span class=”icon icon–circle-alert “ aria-hidden=”true”

style="width: 20px; height: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >

</svg></span> Circle alert

Available Icons

Action & Navigation: <span class=”icon icon–external-link “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> external-link, <span class=”icon icon–link “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> link, <span class=”icon icon–file-down “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> file-down

Content Types: <span class=”icon icon–file-text “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> file-text, <span class=”icon icon–video “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> video, <span class=”icon icon–presentation “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> presentation, <span class=”icon icon–book-open “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> book-open, <span class=”icon icon–clipboard-list “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> clipboard-list

Organization: <span class=”icon icon–folder “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> folder, <span class=”icon icon–tag “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> tag, <span class=”icon icon–calendar “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> calendar

Callouts: <span class=”icon icon–info “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> info, <span class=”icon icon–circle-check “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> circle-check, <span class=”icon icon–triangle-alert “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> triangle-alert, <span class=”icon icon–circle-alert “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> circle-alert

Note Icons: <span class=”icon icon–lightbulb “ aria-hidden=”true”

  style="width: 18px; height: 18px;"><svg   xmlns="http://www.w3.org/2000/svg"   width="24"   height="24"   viewBox="0 0 24 24"   fill="none"   stroke="currentColor"   stroke-width="2"   stroke-linecap="round"   stroke-linejoin="round" >

</svg></span> lightbulb

Size Guidelines

14px - Small metadata (tags, categories, dates)
16px - Inline with text, action buttons
18px - Larger action buttons, summary labels
20px - List page titles, standalone usage
24px+ - Detail page headings

Adding New Icons

Visit lucide.dev/icons
Find the icon you want
Download the SVG file
Save to assets/icons/
Use with {% include icon.html name="icon-name" %}

Manual Usage

To use icons in your content:

{% include icon.html name="lightbulb" %}
{% include icon.html name="video" size="24" %}
{% include icon.html name="external-link" class="custom-class" %}
{% include icon.html name="info" aria-label="Important information" %}

Code

Inline code

Use bundle exec jekyll serve to start the development server. The --port flag lets you specify a custom port like 4001.

Code block

# Example front matter for a presentation
---
title: "Scaling Student Success Through Learner-Led Design"
presenters: "Worsham, D."
meeting_name: "LOEX Conference"
meeting_short_name: "LOEX"
location: "Houston, TX"
date: 2019-05-10
sort_date: 2019-05-10
abstract: |
  This presentation explores the WI+RE model
  for learner-led design.
slide_url: "https://example.com/slides"
---

/* Example CSS showing theme custom properties */
:root {
  --color-bg: #fdfaf8;
  --color-text: #2c1810;
  --color-accent: #a47864;
  --color-link: #8b5e3c;
}

<!-- Example HTML structure -->
<article class="cv-entry">
  <h3 class="cv-entry__title">Position Title</h3>
  <div class="cv-entry__meta">
    <span>Organization</span>
    <span class="cv-entry__date">2021 – Present</span>
  </div>
</article>

Tables

Year	Award	Organization
2018	Librarian of the Year	LAUC-Los Angeles
2017	Top Twenty Article	ALA-LIRT
2011	Staff Excellence Award	UW-Madison L&S

Wide table

Collection	Output	Sort Field	Grouped By	Component Include
`_experience`	No	`sort_date`	Organization	`experience-entry.html`
`_education`	No	`sort_date`	Category	`education-entry.html`
`_publications`	Yes	`sort_date`	—	`publication-entry.html`
`_presentations`	Yes	`sort_date`	—	`presentation-entry.html`
`_awards`	No	`sort_date`	—	`award-entry.html`
`_grants`	No	`sort_date`	—	`grant-entry.html`
`_teaching`	No	`sort_date`	Category	`teaching-entry.html`
`_service`	No	`sort_date`	Organization	`service-entry.html`

Horizontal Rules

Content above the rule.

Content below the rule.

Images

Standard images in markdown or HTML are rendered responsively with max-width: 100% and a subtle border-radius.

![Alt text describing the image](/assets/images/photo.jpg)

<img src="/assets/images/photo.jpg" alt="Alt text describing the image" />

Image Grid

Use .image-grid utility classes for responsive multi-column photo layouts in note and presentation body content. Images fill their cell with object-fit: cover.

Two-column grid

<div class="image-grid image-grid--2">
  <img src="/assets/images/photo-a.jpg" alt="Description of photo A" />
  <img src="/assets/images/photo-b.jpg" alt="Description of photo B" />
</div>

Image A

Image B

Three-column grid

<div class="image-grid image-grid--3">
  <img src="/assets/images/photo-a.jpg" alt="Description" />
  <img src="/assets/images/photo-b.jpg" alt="Description" />
  <img src="/assets/images/photo-c.jpg" alt="Description" />
</div>

Image A

Image B

Image C

The three-column grid collapses to two columns below 480px. All images should have meaningful alt text.

Featured Images

Featured images appear on individual content detail pages as a full-width hero — they do not appear on collection listing pages.

Detail page hero (`collection-detail__feature-image`)

Used on note, presentation, and project detail pages when the relevant image field is set in front matter. The image renders between the page header and the abstract/body content, full-width within the prose container, capped at 480px height with object-fit: cover.

Feature image — max-height 480px, object-fit: cover

Front matter fields by collection:

Notes & Projects: featured_image: "/assets/images/..." + featured_image_alt: "..."
Presentations: banner: "/assets/images/..." + banner_alt: "..."

The alt field falls back to the page title if absent. Images are always optional — entries without the field (or with an empty value) render without any image.

Project Tiles

Project tile cards display projects on the homepage (featured projects section) and on the /projects/ listing page. They are text-forward — no image zone. The whole card is clickable via the stretched-link technique applied to the title <a> element.

Card structure: category label (homepage only, omitted on listing page) → title (linked, stretched to full card) → subtitle → institution

Learning Design

Example Project Title

A concise tagline or subtitle describing what this project is about and what makes it distinct.

Example University Library

Service Design

Another Project Example

Subtitle text showing how longer content wraps within the card body at various viewport widths.

Another Institution

Organizational Design

Third Project Card

Third Institution

Classes:

.project-tiles — CSS grid container: 1 column → 2 columns at 480px → 3 columns at 1024px, gap: $space-6
.project-tile — bordered card with border-radius and hover shadow; position: relative required for the stretched link
.project-tile__body — padded flex column with gap: $space-3
.project-tile__category — uppercase accent-colored label; used on homepage tiles (ungrouped context), omitted on /projects/ listing page tiles (the cv-section__heading already provides the category)
.project-tile__title — bold title; the a::after { inset: 0; position: absolute } stretched link makes the entire card surface clickable while keeping the accessible label to the title text only
.project-tile__subtitle — muted smaller text; flex: 1 pushes the institution line to the bottom of the card
.project-tile__institution — smallest muted text, pinned to card bottom with margin-top: auto and a top border

Front matter fields rendered in tiles: title, subtitle, institution, category (homepage only). Fields like abstract, role, skill_themes, tags, and collaborators render on the project detail page inside the .project-meta box. The impact field is defined in front matter but is not currently rendered in tiles or on detail pages.

Project Detail Page

The project detail page (_layouts/project.html) uses three components not used elsewhere: .collection-detail__subtitle, .collection-detail__byline, and .project-meta.

Subtitle and Byline

The page title renders as H1 (.collection-detail__title). The subtitle field renders as a separate paragraph below it. The institution and date range render as a compact .collection-detail__byline beneath the subtitle.

Example Project Title

A concise tagline that provides context for the project without repeating the title.

Example University Library · 2020–2024

Classes:

.collection-detail__title — project H1; same class used on all detail pages (notes, presentations, projects)
.collection-detail__subtitle — lead paragraph below H1: clamp(1.05rem, 1rem + 0.3vw, 1.2rem), font-weight: 400, color: var(--color-text-muted)
.collection-detail__byline — institution and date range joined by “ · “: 0.85rem, color: var(--color-text-muted); built from institution, start_date/end_date (or date as fallback)

Project Meta Box

The .project-meta definition list renders summary, collaborators, role, capabilities, and tags as labeled rows. It is responsive: two-column grid (label value) on screens ≥ 480px, single-column stacked (label above value) below.

Summary: A 2–3 sentence description of the project, its goals, and its outcomes. This is the most prominent field and should stand alone as an elevator pitch for the work.
With: Co-designer Jane Smith and the Example Team
My role: Lead designer and program architect: established the service model, built the team, and embedded the work into ongoing organizational practice.
Core capabilities: Participatory design · Service design · Community partnership development · Organizational culture change
Tags: accessibility · inclusive design · service design · student employment

Classes:

.project-meta — display: block (stacked) below $bp-sm (480px); display: grid; grid-template-columns: auto 1fr; gap: $space-2 $space-5; align-items: baseline above; background-color: var(--color-bg-alt), padding: $space-5, border-radius: 4px
.project-meta__label — 0.8rem, uppercase, font-weight: 700, letter-spacing: 0.05em, color: var(--color-text-muted); white-space: nowrap
.project-meta__value — 0.95rem, line-height: 1.6; margin-top: $space-1 on mobile (stacked gap), margin-top: 0 on grid; margin-left: 0 resets <dd> browser default indent

Front matter → label mapping:

Front matter field	Label in meta box
`abstract`	Summary
`collaborators`	With
`role`	My role
`skill_themes` (array)	Core capabilities (joined with “ · “)
`tags` (array)	Tags (joined with “ · “)

Any row whose field is absent or empty is silently omitted.

Buttons

Primary Button Default Button

Badges & Tags

Article Book Chapter Interview

Submitted Funded

CV Components

These are the custom components used throughout the CV page and collection listings. They demonstrate how structured content renders.

Experience Entry

Example University Library

Senior Designer

San Diego, CA 2021 – Present

Lead a team of designers creating inclusive digital experiences for a diverse academic community.
Develop and maintain the institution's design system and web component library.
Facilitate participatory design workshops with students, staff, and faculty stakeholders.

Education Entry

M.A. English - Teaching English to Speakers of Other Languages

San Francisco State University 2002

Publication Entry

The WI+RE Way: A manifesto and a process for learner-led design

Harper, T., Mody, N., Ravaei, K., Romero, R., & Worsham, D. Journal of New Librarianship, 5(1) 2020

Presentation Entry

Scaling Student Success Through Learner-Led Design

Worsham, D. LOEX Houston, TX May 2019

Slides Handout Recording

Grant Entry with Status Badge

Learning Assistants and Learner-Led Design

UCLA Center for the Advancement of Teaching 2019 funded

Co-authored with Shanna Shaked, Renee Romero

Service Entry

WI+RE - Writing Instruction + Research Education

Co-founder and Co-Lead 2015 – 2021

CV Table of Contents

Action Links

Slides Handout Recording Event Page

Colour Tokens

Use the theme switcher in the header to preview how these tokens change across all five colour schemes.

--color-bg

--color-bg-alt

--color-text

--color-text-muted

--color-accent

--color-accent-dark

--color-border

--color-link

--color-link-hover

--color-focus-ring

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with muted secondary text

Body text

Inline elements

Links

Lists

Unordered list

Ordered list

Definition list

Blockquotes

Callouts

Basic Callout

Callout with Icons

Usage

Icons

Icon System Overview

Using Icons

Action Links (Presentations, Publications, Projects)

Metadata Icons (Tags & Categories)

Note Title Icons

Callout Icons

Available Icons

Size Guidelines

Adding New Icons

Manual Usage

Code

Inline code

Code block

Tables

Wide table

Horizontal Rules

Images

Image Grid

Two-column grid

Three-column grid

Featured Images

Detail page hero (collection-detail__feature-image)

Project Tiles

Example Project Title

Another Project Example

Third Project Card

Project Detail Page

Subtitle and Byline

Example Project Title

Project Meta Box

Buttons

Badges & Tags

CV Components

Experience Entry

Example University Library

Senior Designer

Education Entry

M.A. English - Teaching English to Speakers of Other Languages

Publication Entry

The WI+RE Way: A manifesto and a process for learner-led design

Presentation Entry

Scaling Student Success Through Learner-Led Design

Grant Entry with Status Badge

Learning Assistants and Learner-Led Design

Service Entry

WI+RE - Writing Instruction + Research Education

CV Table of Contents

Action Links

Previous / Next Navigation

Colour Tokens

Detail page hero (`collection-detail__feature-image`)