01 Design Philosophy
This design system embodies the thesis: legitimate knowledge emerges from unexpected, democratized sources. The zine aesthetic connects TikTok's creator-educators to a longer history of grassroots publishing—zines, pamphlets, samizdat—where barrier-free entry and DIY production challenged institutional gatekeeping.
Core Tension: Intentional imperfection that still communicates clearly.
Guiding Principles
- Democratic over polished — The aesthetic should feel accessible, not exclusive
- Energetic over static — Rotation, collage, and visual "noise" create movement
- Mixed over uniform — Typography and elements should feel assembled, not templated
- Readable over decorative — Accessibility always wins; imperfection shouldn't impede comprehension
- Meaningful over random — Every "messy" element should serve communication
Rise/Mighty Note: Rise has clean, minimal defaults. Use Mighty's CSS injection and custom blocks strategically—don't fight every default, but disrupt key moments (headers, callouts, section transitions) to establish the zine personality.
02 Typography
Font Stack
Display / Headers / Emphasis — Permanent Marker
The algorithm is the syllabus
Use for: Section headers, pull quotes, handwritten annotations, emotional emphasis
Google Fonts: family=Permanent+Marker
Impact / Headlines / Labels — Work Sans Black
Democratizing Education
Use for: Major headlines, bold statements, UI labels, buttons
Google Fonts: family=Work+Sans:wght@400;500;600;700;800;900
Body / Content / Instructions — Courier Prime
Content creators intuitively apply principles that took educational psychologists decades to codify. The constraint of short-form video forces pedagogical precision.
Use for: Body copy, instructions, longer-form content, captions
Google Fonts: family=Courier+Prime:ital,wght@0,400;0,700;1,400
Type Scale
| Name |
Size |
Use Case |
--text-xs |
12px / 0.75rem |
Labels, captions, metadata |
--text-sm |
14px / 0.875rem |
Secondary text, annotations |
--text-base |
16px / 1rem |
Body copy (Courier Prime) |
--text-lg |
18px / 1.125rem |
Lead paragraphs, emphasis |
--text-xl |
20px / 1.25rem |
Subheadings |
--text-2xl |
24px / 1.5rem |
Section headers |
--text-3xl |
32px / 2rem |
Page titles |
--text-4xl |
40px / 2.5rem |
Hero headlines |
--text-5xl |
56px / 3.5rem |
Display / Cover |
Line Height & Spacing
- Marker font: line-height: 1.1–1.2 (tight)
- Work Sans headlines: line-height: 0.9–1.0 (very tight, uppercase)
- Courier Prime body: line-height: 1.7–1.8 (generous for readability)
- Paragraph spacing: 1em between paragraphs
Accessibility Note: The typewriter font at body size (16px+) with generous line-height maintains readability. Never use Permanent Marker for body copy or long passages—it's for impact moments only.
03 Color System
Core Palette
Paper
#f5f0e6
Primary background
Newsprint
#e8e3d9
Cards, sections
Ink
#1a1a1a
Text, borders
Gray
#888888
Secondary text
Riso Accent Colors
Inspired by risograph printing—saturated, slightly imperfect, limited palette. Use intentionally, not everywhere.
Riso Pink
#ff6b9d
Primary accent, alerts, emphasis
Riso Blue
#0078bf
Links, info, secondary accent
Riso Yellow
#ffe042
Highlights, labels, tape
Riso Green
#00a95c
Success, stamps, tertiary
Color Usage Rules
- Limit to 2–3 accent colors per screen — Zine ≠ rainbow explosion
- Pink for primary calls-to-action and key emphasis
- Yellow for highlights and "tape" elements — it reads as annotation
- Blue for informational content and links
- Green sparingly — success states, stamps, variety
- Never use riso colors for body text — readability first
Contrast Ratios: Ink (#1a1a1a) on Paper (#f5f0e6) = 12.6:1 ✓ | Riso Pink on white = 3.5:1 (use for large text/decorative only) | Always pair colored backgrounds with appropriate text contrast.
04 Spacing System
Based on an 8px grid. Use consistent spacing to create rhythm even within the "chaotic" aesthetic.
| Token |
Value |
Use Case |
--space-xs |
4px / 0.25rem |
Tight gaps, inline spacing |
--space-sm |
8px / 0.5rem |
Related element spacing, padding |
--space-md |
16px / 1rem |
Default spacing, card padding |
--space-lg |
24px / 1.5rem |
Section padding, generous gaps |
--space-xl |
32px / 2rem |
Major section spacing |
--space-2xl |
48px / 3rem |
Page sections |
--space-3xl |
64px / 4rem |
Major page divisions |
05 Rotation & Imperfection
The "messy" zine feeling comes from controlled imperfection. Use rotation and offset deliberately.
Rotation Tokens
--rotate-slight: 1.5deg — Subtle, almost subconscious tilt. Use for: body elements that need slight energy--rotate-medium: 3deg — Noticeable but not distracting. Use for: callout boxes, stickers, labels--rotate-strong: 6deg — Clear intention. Use for: hero elements, feature callouts, phone mockups
Rules for Rotation
✓ Do
- Rotate decorative elements (stickers, tape, stamps)
- Tilt callout boxes and pull quotes
- Offset elements from strict grid alignment
- Vary rotation direction (mix positive/negative)
- Use rotation on hover states for interactivity
✗ Don't
- Rotate body text blocks
- Rotate navigation or critical UI
- Use the same rotation angle for everything
- Rotate to the point of illegibility
- Overdo it—chaos should be orchestrated
Technical Note: In CSS, use transform: rotate(). Combine with box-shadow for the cut-out effect. In Figma, rotate frames and use drop shadows to simulate layering.
06 Content Guidance
Voice & Tone
The People's Professors voice is:
- Confident but not academic — Make claims, but accessibly
- Enthusiastic but not hype-y — Genuine excitement, not marketing speak
- Direct — Short sentences. Clear points. No hedging.
- Occasionally irreverent — Emoji, asides, personality welcome
Writing Style
✓ Do
- Use active voice
- Front-load key information
- Break up long passages with visuals
- Use annotations/marginalia for asides
- Include the occasional emoji for tone 💡
- Reference the platform naturally (TikTok, algorithm, FYP)
✗ Don't
- Use jargon without defining it
- Write dense academic paragraphs
- Be condescending about the subject matter
- Over-explain or pad content
- Use corporate/marketing language
Content Structure (for Rise)
Recommended lesson flow:
- Hook — Bold statement, question, or provocative framing (use Marker font)
- Context — Brief setup, 2–3 sentences max
- Core Content — Chunked into digestible blocks
- Example/Evidence — Embedded video or case study
- Application — How does this connect to their work?
- Takeaway — One clear thing to remember (use callout component)
07 Accessibility
The zine aesthetic can coexist with accessibility. Here's how:
Non-Negotiables
- Color contrast: All text must meet WCAG AA (4.5:1 for body, 3:1 for large text)
- Don't convey info by color alone: Pair with icons, labels, or patterns
- Keyboard navigation: All interactive elements must be focusable
- Alt text: Decorative elements can be empty alt, but meaningful images need descriptions
- Reduced motion: Respect
prefers-reduced-motion for any animations
Rotation & Screen Readers
CSS rotation is purely visual—screen readers read content in DOM order regardless of rotation. The only concern is if rotation causes text clipping or overflow issues.
Rise Note: Rise has solid baseline accessibility. When adding custom HTML/CSS, test with keyboard navigation and VoiceOver/NVDA to ensure you haven't broken anything.
08 Rise + Mighty Notes
What to Customize
- Lesson headers — Replace with custom HTML using Marker font + rotation
- Continue buttons — Style with cut-out shadow treatment
- Quote blocks — Restyle as "tape" callouts
- Dividers — Replace with torn paper SVG
- Knowledge checks — Add sticker decorations, zine-style feedback
What to Leave Alone
- Navigation — Rise's nav works; don't break it
- Video embeds — Let Rise handle responsive video
- Accordion/tabs — Functionality first; light styling only
- Form inputs — Focus states and accessibility are critical
CSS Injection Strategy: Use Mighty to inject the CSS variables and font imports globally. Then use class-based overrides for specific components. Keep specificity low to avoid fighting Rise's defaults.