Style guide

Component reference for cwimpy.com — not linked from anywhere, used to iterate on the design system.

This page is for internal reference only — every component used across the site is rendered here so I can iterate on the design system without hunting through pages. Not linked from the navbar.

Typography

heading scale

h1 display

Heading One

h2 display

Heading Two

h3 display

Heading Three

h4 display

Heading Four

body serif

This is a body paragraph in Source Serif 4. Long-form prose for posts and research. Italic and bold both pull from the same variable family. Line height 1.65 so a wall of text still breathes.

caption sans

Tracked uppercase metadata · Inter

mono

code uses JetBrains Mono

Color tokens

CSS custom properties — set in styles.scss / custom-dark.scss

–color-bg

page background

–color-bg-muted

cards, form fields

–color-bg-subtle

badges, callouts

–color-surface

base panel/table

–color-text

body

–color-text-muted

secondary copy

–color-primary

headings, brand

–color-accent

links, CTAs, hover

–color-border

hairlines

Toggle dark mode (moon icon, top right) to see dark-theme values applied to the same component rules.

Spacing scale

space-1 … space-9 — defined in _tokens.scss

`$space-1`	`0.25rem`
`$space-2`	`0.5rem`
`$space-3`	`0.75rem`
`$space-4`	`1rem`
`$space-5`	`1.5rem`
`$space-6`	`2rem`
`$space-7`	`3rem`
`$space-8`	`4rem`
`$space-9`	`6rem`

Radius

sm 4px

md 8px

lg 12px

xl 16px

full

Buttons

.btn-social — homepage hero, contact page

.publication-buttons + .btn-pub — segmented pill (research entries)

PDF DOI Data Code Cite

single-button case

Cite

.cv-button — primary CTA (CV page)

Download PDF Open in new tab

.course-quick-link — pill row (course pages)

Schedule Weekly content Assignments Resources

.week-action — active and disabled state

Slides Code Recording

Cards & containers

.software-card — software / list / quick info

A software card heading

This is a software card. It uses a muted background, soft border, lifts on hover. Used on the software page and re-used elsewhere when a tile/box is needed.

Source Docs

.course-meta-bar — at-a-glance strip (course pages)

Credits 3

Meets 1×/wk

Format Seminar

Office HSS 3007

.social-card — contact page

Callouts & accents

.section-eyebrow + .section-title — homepage section heads

Latest

Recent writing

.course-chip — pill above course/week titles

PLSC 66003 · Fall 2026

.learning-goals — tinted callout (week pages)

Learning goals

Articulate what quantitative methods can (and cannot) do for political science
Walk through course expectations, grading, and weekly rhythm
Have a working install of R, RStudio/Positron, and Quarto by week’s end

.search-suggestion — accent-bordered callout (404 page)

Looking for something specific?

Try using the search function in the navigation bar above, or browse through the main sections of the site.

Schedule table

.course-schedule — sticky-header syllabus table

Wk	Date	Topic	Due
01	Aug 19	Introduction & course overview
02	Aug 26	R fundamentals and the tidyverse
03	Sep 2	Data visualization with ggplot2	PS 1
	Oct 14	Fall break — no class
04	Oct 21	Dummy variables and interactions	Midterm

Readings list

.readings-list — annotated reading list (week pages)

Kellstedt and Whitten, The Fundamentals of Political Science Research, ch. 1 Sets up the empirical-theory loop and why we care about systematic inquiry.
Wickham et al., R for Data Science, ch. 2 Tidy data — read carefully. Most everything in the course assumes you’ve internalized this.

Course hero

.course-hero — full hero block (course landing pages)