Design Info — Corporate & Information Sites
A subtype lens for design-core. Load this after design-core has run its three entry steps and confirmed the goal is trust and clarity.
This file does not redefine the eight elements, the four layers, the two modes, or the two phases. It only adds what is specific to info sites.
Focus
Trust and structure. A lot of content, and it must be easy to find. Navigation is deep but never scary — the visitor should always know where they are and how to go back. Readability on long text is the primary craft. Design serves clarity; it does not perform.
Marketing does not run as a filter here — but a clear path to action (contact, sign-up, download) is part of the frame, not an afterthought.
Typical failures
- Wall of text. Unbroken blocks with no hierarchy, no subheads, no air. Fix: break into sections, give every section one job, let space do the separating.
- Five-level navigation. The menu nests deeper than the visitor will follow. Fix: no more than three levels; use search for depth.
- No hierarchy inside sections. Every paragraph has the same weight, so nothing is skimmed. Fix: a real subhead system with visible hierarchy.
- Buried dates or contacts. The two facts a visitor often needs first (what's current, how to reach you) are hidden. Fix: surface them.
Layer-by-layer
Frame (composition, space). The frame is a reading grid — 65–75 characters per line. Space separates sections, and section boundaries are felt, not just seen. Navigation is persistent and honest about current location. The composition serves comprehension; it does not try to impress.
Body (form, color). Color carries trust: restrained palettes, high contrast, no accent color used for decoration. Form is minimal — cards and containers serve grouping, not styling. Radius is small or absent; large radii read as playful and undermine authority.
Surface (texture, typography). Typography is the main tool. A clear type scale, readable body size, generous line height, and a real heading system. Texture is absent or near-absent; grain, gradient, and photographic ornament distract from reading.
Accent (point, line). Minimal. Dividers may be used to separate sections, but only if they carry structural meaning. Icons support navigation, not decoration. The accent color, if present, is reserved for links and calls to action.
Reading order
Info sites have two reading modes, and both matter:
- Scan — a visitor lands, understands what the site is, and finds their entry point in under 10 seconds. Hierarchy in headings, sections, and nav makes this possible.
- Read — a visitor settles on a page and reads long content. Line length, line height, contrast, and subheads make this bearable.
A page that serves only one of these modes fails the other.
Audit specifics
Beyond the common grid, these are the info-site breakages to hunt:
- Space → Frame → navigation nests deeper than three levels → three levels max; search carries the depth.
- Typography → Surface → paragraphs carry equal weight, nothing skimmable → a real subhead system with visible hierarchy.
- Color → Body → accent used decoratively → accent is reserved for links and actions; trust reads from restraint.
- Line → Accent → dividers between every section → rules only where boundaries carry structure.
- Typography → Surface → dates and contacts buried at page end → the current/contact facts surface where visitors look first (in docs: TOC and search stay visible).
Return to core
For the method, see design-core/SKILL.md. For the words on long pages — headings, dates, links — see design-core/references/copy.md. For the layers protocol, see design-core/references/layers.md. For the audit grid — which is especially useful for large info sites — see design-core/references/audit-grid.md.
