# Shape the reading experience

> Turn a sound content structure into a recognizable, responsive, and bilingual publication.

---

LLMS index: [llms.txt](/llms.txt)

---

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 {#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 {#home}

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 {#navigation}

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 {#languages}

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](/docs/customize/brand/),
[Home and landing pages](/docs/customize/home/), and
[Languages](/docs/customize/i18n/) as the reference.