Writing Style Guide

•3 min read
WritingFormattingReference

A quick reference for maintaining consistent formatting across all writing on this site. This covers the technical formatting elements - fonts, sizes, spacing, and visual styles.

Typography

  • Font Family: Domine (serif) at 400 weight for body text, 700 weight for headings and emphasis
  • Base Size: 1rem (16px default) - scales globally via the font scale slider in admin panel
  • Headings: Use text-base or text-lg with font-semibold or font-bold
  • Body Text: Default size with font-normal (400 weight)
  • Dates/Tags: text-sm with font-normal
  • Line Height: Use leading-relaxed (1.625) for body text for readability

Links

  • Always underline links with underline class
  • Use thin underlines: decoration-1 for 1px thickness
  • Add subtle offset: underline-offset-2 for 2px spacing between text and underline
  • Hover effect: hover:opacity-70 for subtle feedback
  • External links: Add target="_blank" and rel="noopener noreferrer"
  • Example: This is a link

Lists

  • Bullet lists: list-disc list-inside space-y-2 ml-2
  • Numbered lists: list-decimal list-inside space-y-2 ml-2
  • Keep 2px spacing between list items for breathing room
  • Indent lists with minimal left margin (ml-2) to maintain alignment

Spacing

  • Section headings: mt-8 mb-3 (32px top, 12px bottom)
  • Paragraphs: mb-4 or natural spacing (16px between paragraphs)
  • Content padding: px-6 pt-24 pb-12 on mobile, increase to px-12 or px-24 on larger screens
  • Keep consistent spacing between related elements

Borders & Lines

  • All borders use dynamic width: style={borderWidth: 'var(--border-width)'}
  • Default border width is 0.5px but adjustable via admin panel slider
  • Border color is always white: border-foreground or #ffffff
  • Use borders for tables, boxes, timelines, and structural elements

Tables

  • Use table-fixed layout for consistent column widths
  • Define column widths with colgroup elements
  • Standard proportions: 30/50/20 or 50/30/20 depending on content
  • Always left-align text: text-left
  • Table borders use dynamic width via borderWidth: 'var(--border-width)'
  • Row dividers: divide-y with dynamic width

Dates & Metadata

  • Date format: YYYY/MM/DD (e.g., 2024/12/15)
  • Use forward slashes, not hyphens or other separators
  • Display at text-sm size with opacity-70 for subtle presence
  • Group with tags using slash separators

Code & Technical Content

  • Inline code: Use code tags with subtle background
  • Keep code snippets minimal and focused on what matters
  • Include interactive examples when demonstrating UI components
  • Use proper syntax highlighting for code blocks

Final Note

These formatting guidelines ensure visual consistency across all content. The goal is to maintain a cohesive aesthetic that matches the site's minimal, geometric design system. When in doubt, refer to existing pages and match their formatting patterns.