Skip to content

Writing System

Jason Liu's site works because it does not behave like a portfolio.

It behaves like a public thinking system.

Site Structure Pattern

The homepage does five jobs in a tight sequence:

  1. Say who this is.
  2. State the current role or center of gravity.
  3. Define the range of the site.
  4. Give the reader a small "Start Here" list.
  5. Route durable trust pages into the sidebar.

That structure gives the site momentum without making it feel like a landing page.

The Site Version

Use this spine:

  • Home: the handshake and thesis
  • Writing: the map of published ideas
  • User Manual: how to collaborate with you
  • Books: the taste ledger
  • Resume: the credibility page
  • Domain Playbook: temporary setup notes, later remove from public nav

Visual System

The visual reference is Jason Liu's MkDocs site: simple navigation, generous whitespace, a clear homepage map, and trust pages that sit close to the writing.

This site should not be a clone. It should use the same structural discipline with a more personal palette and type system.

Use:

  • warm paper backgrounds instead of pure white
  • ink text on warm paper
  • dark teal for links and systems language
  • blue for active navigation and current location
  • burnt orange for bullets, marks, and small emphasis
  • soft amber surfaces for code, search, and subtle callouts
  • Newsreader for headings, Libre Franklin for body, and JetBrains Mono for code

Avoid:

  • heavy gradients
  • big card grids
  • generic dark-mode SaaS colors
  • decorative color for its own sake
  • copying Jason's exact color scheme or homepage copy

Layout Rules

The page should feel like a map:

  • compact top navigation
  • durable pages in the left navigation
  • local section structure in the right navigation
  • one clear content column with enough line length for essays
  • no landing-page hero treatment
  • no decorative panels around ordinary sections

Image Rules

Put public images under:

docs/assets/images/

Reference images from top-level pages like this:

![Alt text for the image](assets/images/example.webp)

Reference images from nested writing posts like this:

![Alt text for the image](../../assets/images/example.webp)

Use images when they make the page more legible: a real screenshot, diagram, book cover, system sketch, or product artifact. Avoid purely atmospheric stock images.

Prefer .webp or compressed .jpg for photos and .png for screenshots that need crisp text. Keep filenames lowercase and descriptive.

Sentence Construction

Use plain sentences with visible pressure.

Open with a sentence short enough to stand alone.

Then widen.

Then land the point in a sentence that feels inevitable.

Example pattern:

Most people call this memory.

I think that is too generous.

A larger context window can preserve the working set, but it does not decide what survives restart, what evidence supports a claim, or what state the system is allowed to treat as true.

That is not memory.

That is temporary visibility.

Pacing Rules

Alternate paragraph lengths.

One-sentence paragraphs create stakes. Medium paragraphs explain the mechanism. Bullets should appear only when the reader needs handles.

Use this rhythm:

  • claim
  • distinction
  • concrete failure mode
  • compressed rule
  • implication

What To Avoid

  • throat-clearing
  • "in today's fast-paced world" energy
  • abstract nouns stacked on abstract nouns
  • pretending every post is definitive
  • ending with a generic summary paragraph

What To Steal Ethically

Do not copy wording.

Copy the moves:

  • personal but not confessional by default
  • technical but not bloodless
  • opinionated but willing to name inference boundaries
  • simple navigation
  • posts grouped by problem shape, not chronology alone
  • high-signal pages that make the reader trust the writer faster

Draft Checklist

Before publishing, ask:

  • What claim would I defend in public?
  • What distinction does this essay make sharper?
  • Where does the reader feel the cost of the idea?
  • Can the first screen tell someone why this site exists?
  • Does the ending create a handle they can remember?

Reference Pages