Skip to content
lectern.tv
Design system · lectern.tv

Lectern Brand & Interface Specification

A calm, single-typeface academic design system built on Inter and the architectural Lectern glyph—prioritizing generous spacing, clear three-tier hierarchy, and active lecture study.

Brand identity & lockups

Architectural lectern glyph · 24×24 grid · Inter wordmark
01 · Primary horizontal
lectern.tv
Masthead & primary nav
Used in the sidebar header, mobile bar, and external embeds.
02 · Stacked vertical
lectern.tv
University Lectures & Syllabi
Centered auth & hero cards
Centered mark above lectern.tv for sign-in, square cards, and splash screens.
03 · Two-deck editorialColophon
Lecternlectern.tv
University Lectures & Syllabi
Syllabus & notebook header
Pairs the formal name with the domain and catalog descriptor.
04 · Minimal & pill altsInline
lectern.tvlectern.tv
Citations & watermarks
Unboxed glyph lockup and compact pill for study exports.
Archival UltramarinePrimary
lectern.tv
#2563EB → #172554 · Alabaster #FAF8F5
Press VermilionEditorial Alt
lectern.tv
#E11D48 → #4C0519 · Warm Ivory #FFFDF9
Seminar SlateSyllabus Alt
lectern.tv
#0D9488 → #134E4A · Chalk #F8FAFC
Glyph anatomy (24×24 grid)
1. Open folio: Upward wings (100% / 76%)
2. Beveled flutes: Parallel shafts (92% / 68%)
3. Split plinth: Upward base (95% / 72%)
Low-angle amphitheater perspective with unbroken central spine.
Icon size scale & container treatments
6 optical steps · Accent, Surface & Outline tones
xs18px · 11px
Footer colophon & inline badges
sm22px · 13px
Sidebar masthead & top bar
md32px · 18px
Auth header & modal lockups
lg44px · 24px
Stacked vertical brand cards
xl56px · 30px
Hero splash & touch icon
2xl80px · 42px
App icon & social avatar

Core principles

01 · Typography

One Inter type ramp

Zero monospace fonts anywhere in the product. Seven deliberate steps of Inter handle editorial titles, body abstracts, controls, and aligned tabular timestamps.

02 · Information architecture

Calm spacing & hairline rhythm

Open hairline lists and spacious two-column cards replace nested boxes and micro-badges, keeping speaker provenance and syllabus structure effortless to scan.

03 · Complementary utility

Active study workbench

YouTube streams the video; Lectern adds A–B derivation loops, pause-while-typing notes, synthesis prompts, ordered queues, and portable Markdown export.

Inter type ramp

Single family · cv02, cv03, cv04, cv11 · Zero monospace
.type-display
30–38px · 600 · -0.03em
Distributed Systems & Consensus
.type-h1
24–30px · 600 · -0.024em
Fault-Tolerant Raft Log Replication
.type-h2
20px · 600 · -0.018em
University curricula & syllabi
.type-title
17px · 500 · -0.014em
Lecture 6: Election safety and log matching invariants
.type-body
15px · 400 · 1.62lh
Derives leader completeness, log matching invariants, and linearizable client semantics from first principles.
.type-ui
14px · 500 · -0.006em
Courses · Institutions · Speakers · Study Desk
.type-meta + .tabular-nums
13px · 400 · tabular figures
MIT 6.824 · Lecture 6 of 20 · 1h 22m · ~2.0h study · Rigor 97

Semantic surface & polarity tokens

Switch Dark Studio and Paper above to preview live tokens
--bg-canvas
Primary page ground
--bg-surface
Cards & panels
--bg-elevated
Hover & active rails
--bg-subtle
Muted fills
--accent-bg
Primary high-contrast CTA
--status-done
Completion & note pins

Controls, badges & form fields

Buttons
Badges, keycaps & channel favicons (14–20px)
Featured lectureMIT 6.824 · 06Locked 28:40Pin⌘KJ
MIT (14px)Stanford (16px)3Blue1Brown (20px)Fallback
Segmented navigation & inputs
28:40

Study signal primitives

Academic rigor indicator
Seminal98Graduate89Undergraduate78
Syllabus progress70%
Proportional chapter scrubber with note markers and A–B loop range (click any chapter)Playhead 28m
2909
Indexed lectures
Full-length sessions
105
University courses
Ordered syllabi
22
Curated study paths
Multi-course tracks
2
Theme polarities
Dark Studio & Paper

Transactional email system

Resend API · Verified DKIM/SPF on lectern.tv · HTML + Plain-Text
From Envelope
Lectern <noreply@lectern.tv>
Subject Line
Welcome to Lectern (lectern.tv) — Academic Video Index
Dispatch Header
DISPATCH // ARCHIVE ACCESS
welcomePOST /api/auth/register

Sent on scholar registration with affiliation & archive pass confirmation.

password_resetPOST /api/auth/forgot-password

Delivers single-use 256-bit SHA-256 recovery link (30m TTL).

password_changedPOST /api/auth/password & /reset-password

Confirms password update and reports count of revoked sessions.

email_changedPOST /api/auth/email

Dual-dispatch alert to both the previous address and new address.

two_factor_changedPOST /api/auth/two-factor

Alerts on RFC 6238 TOTP authenticator enablement or removal.

submission_evaluatedPOST /api/submit

Notifies signed-in scholars when a lecture nomination is published or queued.