Doujian homepage: design plan

Assumptions to confirm: I read the name as 豆间 ("among the beans"), so the page is bilingual-capable. The audience is home brewers who order online, plus a smaller group of cafés buying wholesale. The page's main job is to get someone to buy a bag or start a subscription.

Concept

The page is organized around the roast curve. Green coffee turns yellow, then gold, then chestnut, then near-black as it roasts. That color progression is the palette, the navigation and the product filter. Most coffee sites use cream paper and a clay accent, which could belong to any café. Doujian's colors come from the bean's own stages.

Color

The five colors are used only as the bean spectrum and as ink. There are no gradients as decoration, and no grey shadows. Text on Green bean uses Chestnut, which passes AA easily. Straw is never used for text on light.

Typography

• Display: Big Shoulders Stencil (condensed stencil). It echoes the stencils on jute sacks and roaster batch tags. It is used large for origin names and the hero line, in sentence case with slightly tightened tracking. The face itself carries the personality, so nothing in the headline gets a single-word highlight.
• Body: Literata. It is a warm, readable serif. Body text is 18px with 1.65 line-height and a 62–68 character measure, which is a little looser than a sans would get.
• Chinese: Noto Serif SC (Black for the wordmark, Regular for secondary text). The wordmark sets 豆间 large with "Doujian" in Literata italic beside it.
• Scale: 14 / 18 / 24 / 40 / 72 / 144px, roughly a 1.6 ratio. The 144px size is used only for the hero.
• Labels: sentence case in Literata italic. There are no tracked caps, no monospace data tags and no eyebrow labels. Product facts such as process, altitude and roast date are written as plain lines.

Layout

Everything is left-aligned on a 12-column grid with a wide left margin, so text is never centered or justified. The one exception is the slider's value, which sits under the thumb.

┌──────────────────────────────────────────────────────┐
│ 豆间 Doujian            Shop  Subscribe  Roastery  Bag│
├──────────────────────────────────────────────────────┤
│ [green ░░░░ straw ▒▒▒▒ cinnamon ▓▓▓▓ chestnut ████ ]  │ ← full-bleed
│                                                      │   spectrum hero
│ Every coffee has a roast                             │
│ it tastes best at.                                   │
│                                                      │
│ Light ○────────●──────────○ Dark   ← draggable       │
│ Medium · chestnut. Cacao, orange peel, brown sugar.  │
│ Ethiopia Guji, 250g   [Add to bag]                   │
├──────────────────────────────────────────────────────┤
│ This week's roasts (ledger rows, ordered light→dark) │
│ ● Name, origin, process   notes     250g ¥  [Add]   │
│ ● …                                                  │
├────────────────────────┬─────────────────────────────┤
│ Subscription: plain    │ photo of the roaster        │
│ frequency picker       │ caption: Batch 0412, 12 kg, │
│                        │ dropped at 205°C            │
├────────────────────────┴─────────────────────────────┤
│ Farms we buy from (horizontal list, no cards)        │
├──────────────────────────────────────────────────────┤
│ Drop-colored footer: address, hours, wholesale       │
└──────────────────────────────────────────────────────┘

• Hero (the one bold move): the slider is a roast-level control. Dragging it shifts the band's color through the five stages and swaps in the matching coffee and tasting notes. It does the real job of helping someone choose, rather than just decorating the page.
• Ledger rows: each row has a dot in its roast color, so the list reads as a spectrum. The dot encodes information, so it isn't decoration. Rows are separated by whitespace and one thin rule, not by cards.
• Roastery photo: the caption gives real batch data, which does the job of a trust badge.
• Numbering: none, since nothing on the page is a sequence.

Motion

There is one orchestrated moment. On load, the hero band "roasts" from green to chestnut over about 2 seconds and settles on the featured coffee's level. Everything else responds only to user action: slider dragging, the add-to-bag confirmation, and the row hover state. Reduced-motion users get the final state immediately.

Copy voice

The voice is plain and specific, in sentence case with active verbs.

• Buttons: "Add to bag," "Start subscription."
• Confirmation: "Added to bag," matching the button.
• Empty bag: "Your bag is empty. Pick a roast to start."

Review against defaults

The first draft was cream paper, a high-contrast serif and a terracotta accent. That is the generic specialty-coffee look, so I changed three things:

1. Palette: the ground is now green-tinted, and the accent is the straw gold of first crack instead of clay. The brown family appears only as roast stages.
2. Type: the display face is now a stencil tied to sack and batch-tag lettering, instead of a refined serif.
3. Layout: the product grid is now a ledger ordered by roast level, and the hero is a functioning roast selector instead of a photo with a headline.

I also kept out numbered steps, all-caps eyebrows, monospace tags, arrow-suffixed links and uniform rounded cards.

Quality floor

• Layout is responsive: the hero stacks on mobile and the slider becomes full width.
• Keyboard users get visible focus rings in Chestnut with a Straw offset, and the slider supports arrow keys.
• The slider announces the roast level and tasting notes to screen readers.

If you'd like me to build it, tell me whether to adjust anything first, or confirm the 豆间 reading and the audience.