4 Shape the reading experience

Design begins after the content tree works. This chapter will connect brand, home-page composition, navigation, typography, page width, and language behavior into one reviewable system.

Establish the visual hierarchy

Start with title, lead, body, headings, and local navigation. A reader should understand which region owns the next action before color or ornament is added. OINK provides the hierarchy; site variables provide the identity.

The completed walkthrough will replace the site title, logo, wordmark, favicon, accent color, and fonts while keeping both color modes legible.

Compose the home page

The home page is data, not a one-off template. Its YAML registry should tell a short story: what the project is, who it serves, what readers can do next, and where they can see the theme in production.

The worked version of this section will build a Hero, a component matrix, a Case gallery, and a final call to action from bilingual data/home files.

Keep navigation predictable

Navbar entries, the shell root switcher, the sidebar, the outline, and the pager answer different questions. Review them together on desktop and mobile, and ensure the same content order remains visible in both languages.

Design both languages at once

Translations are peers, not a finishing pass. Preserve route meaning, explicit heading IDs, menu order, images, and functional parameters while translating reader-facing text into natural Chinese.

Until the full exercise lands, use Brand and appearance, Home and landing pages, and Languages as the reference.