LessWrong

Overview

LessWrong is an epistemic commons—a community-driven platform for rigorous intellectual discourse on rationality, artificial intelligence, effective altruism, and complex problem-solving. The design embodies "Scholarly Minimalism," a philosophy that prioritizes clarity and intellectual depth over visual spectacle. The interface uses a warm, paper-like palette (cream #f8f4ee, forest green #5f9b65) to evoke the tradition of academic publishing while remaining digitally native. Users encounter a calm, focused environment where ideas take center stage: the UI recedes, typography breathes, and the green accent—used sparingly on CTAs and key navigation—signals actionable thought leadership.

The brand voice is precise, intellectually honest, and conversational without being casual. LessWrong speaks to its audience as peers: "We're exploring how to think better together." Vocabulary favors technical accuracy over jargon-avoidance; the community values nuance and epistemic humility. Example sentence in brand voice: "This post challenges the assumption that AI alignment is primarily a technical problem—read the 47 comments to see where the disagreement lies."

Colors

The color system reflects a "rationalist's palette"—warm, approachable, and grounded in print tradition. **Primary (#5f9b65)** is a muted forest green used exclusively for interactive elements: button CTAs, link hover states, and active navigation items. This green is neither corporate nor trendy; it echoes the green of academic journals and philosophical texts. **On-Primary (#ffffff)** ensures high contrast (WCAG AAA) for text on green buttons. **Secondary (#757575)** is a neutral gray used for metadata, timestamps, and de-emphasized text; it sits at 60% opacity over the surface to create visual hierarchy without introducing a second brand color. **Tertiary (#9e9e9e)** is a lighter gray for disabled states and tertiary UI elements. **Surface (#f8f4ee)** is a warm cream—not pure white (#ff

Typography

The type system pairs serif and sans-serif in a deliberate hierarchy that mirrors academic publishing. **Display and Headline levels** use ETBookRoman (a serif from Adobe Typekit) at 400 weight, evoking the authority of printed scholarship; these are reserved for post titles and major section headings. **Body text** switches to GreekFallback/Gill Sans (a humanist sans-serif) at 15–18px with 1.33–1.5 line-height, optimizing for screen reading while maintaining the warmth of the serif headlines. **Label and metadata** use the same sans-serif at 12–14px with 0.01–0.05em letter-spacing to add precision to UI chrome. The serif-to-sans transition at the body level creates a visual "shift" that signals the transition from editorial content to interactive UI. Apply `text-shadow: 0 1px 2px rgba(0,0

Layout

The layout uses a 12-column grid with a max-width of 1280px, enabling flexible content arrangement while maintaining readability. The primary content column occupies 8–10 columns on desktop, leaving 2–4 columns for sidebar navigation (tags, filters, user info). Spacing follows a semantic scale: **gutter (24px)** separates major sections; **lg (40px)** creates breathing room between post cards; **md (24px)** is the default padding inside cards and form elements; **sm (12px)** is used for compact UI elements like badges and icon buttons. The warm cream background (#f8f4ee) extends edge-to-edge, creating a unified canvas; content cards use surface-container-lowest (#ffffff) with a 1px border at rgba(72,94,144,0.16) to define boundaries without harsh shadows. Margins between post cards are 16p

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. **Level 1 (Base):** The warm cream surface (#f8f4ee) serves as the foundation, with no shadow. **Level 2 (Standard Cards):** Post cards and comment threads use a 1px solid border at light-dark(rgba(72,94,144,0.16),rgba(255,255,255,.2)) and a soft shadow of `0 1px 5px light-dark(rgba(0,0,0,0.025),rgba(255,255,255,0.025))`, creating a barely-perceptible lift. **Level 3 (Elevated/Modals):** Modals and floating menus use a stronger shadow: `0px 5px 10px light-dark(rgba(0,0,0,0.3),rgba(255,255,255,0.3))` with a 2px border at th

Shapes

The shape philosophy is "Scholarly Precision"—minimal rounding that respects the grid and print tradition. **Buttons and inputs** use 3px border-radius (DEFAULT), a subtle curve that feels intentional without being playful. **Cards and containers** use 8px (lg), providing enough rounding to feel modern while maintaining geometric clarity. **Full-width elements** (badges, pills) use 9999px (full) for a classic pill shape. **Comment threads** use 2px (sm) on the left border to create a visual indent without rounding, echoing the left-margin indentation of nested comments in plain-text forums. Th

Components

Action Elements **Button-Primary** (#5f9b65, 32px height, 4px 8px padding, 3px radius) is used for primary CTAs: "Subscribe," "Post," "Save." Text is white (#ffffff) at 14px, 500 weight. On hover, background darkens to #426c46 over 250ms. On focus, add a 2px outline at rgba(95, 155, 101, 0.5) positioned 2px outside the button. **Button-Secondary** uses a light gray background (#e0e0e0) with a 1px border at #bdbdbd; text is dark (#1b1b1b). On hover, background shifts to #d5d5d5. **Button-Text** has no background; text is green (#5f9b65). On hover, background becomes rgba(95, 155, 101, 0.08) to signal interactivity without a filled state.

Containers & Surfaces **Card** uses surface-container-lowest (#ffffff) background, 8px radius, 24px padding, and a 1px border at rgba(72,94,144,0.

Do's and Don'ts

**Do**

• Do use the forest green (#5f9b65) exclusively for primary CTAs and active states—never use it for decorative elements or backgrounds.
• Do maintain 24px gutter spacing between major sections and 16px between cards to create visual rhythm without overwhelming the page.
• Do pair serif headlines (ETBookRoman) with sans-serif body text (Gill Sans) to signal the transition from editorial to interactive content.
• Do apply the light-dark() function to all shadows and borders to ensure accessibility in both light and dark modes without duplicating tokens.
• Do use 3px radius on buttons and inputs, 8px on cards—never use 4px or 6px as intermediate values; the scale is intentional.
• Do prioritize contrast: ensure all text meets WCAG AAA (18:1 for body, 7:1 for UI text) by testing with a contrast checker.

**Don't**

• Don't use the green accent for backgrounds, secondary UI, or decorative elements—it's reserved for primary actions and focus states.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error) without documented justification.
• Don't use drop shadows larger than `0px 5px 10px rgba(0,0,0,0.3)`; LessWrong uses subtle elevation, not dramatic depth.
• Don't mix serif and sans-serif at the same hierarchy level (e.g., don't use serif for body text or sans-serif for headlines).
• Don't round corners beyond 8px on cards or 3px on buttons—the design system is geometric, not organic.
• Don't use pure white (#ffffff) for the background; always use the warm cream (#f8f4ee) to reduce eye strain and evoke print tradition.