Zillion Visionary
Design Guide
Zillion Design Guide

Living Clarity.

A cultivated, quiet workspace where intelligence becomes tangible.

Explore the identity

Soft Precision

Living Clarity is the brand idea. Soft Precision is how the interface behaves: calm structure, stable geometry and useful details.

Interface direction

Four choices that can be checked in any Zillion interface.

ChooseLet meaningful content carry the visual energy.

AvoidLet containers, borders and effects compete with the content.

ChooseKeep navigation and actions predictable while working content adapts.

AvoidRearrange the whole interface whenever a new result appears.

ChooseUse champagne to identify selection, progress or completion.

AvoidDecorate every surface with gold borders or glow.

ChooseShow source, freshness and available authority beside AI results.

AvoidPresent intelligence as unexplained or automatically authoritative.

Logo & wordmark

Use the complete lockup for primary identity. Use the symbol alone only after Zillion is already established.

Approved backgrounds

Zillion VisionaryLight canvas · primary
Zillion VisionaryQuiet surface
Zillion VisionaryDark canvas · reverse mark

Clear space & size

1×Zillion Visionary

Keep one symbol width (1×) clear on every side.

32pxnavigation symbol24pxminimum symbol120pxminimum full lockup

Family lockups

The symbol and Zillion name stay fixed. A service name is a quiet descriptor, never a redesigned logo.

Naming model · not exported marks
ZillionVisionary
ZillionKnowledge
ZillionAgents

Keep the mark intact

Do not stretch
Do not rotate
Do not add effects
Do not lose contrast

Approved source assetspublic/logo.svgpublic/logo-reverse.svg

Shared or service-owned

Use this boundary before adding a product rule. Shared rules protect recognition and trust; service-owned rules shape the work.

DecisionOwnerWhat it controls
Logo systemSharedUse the approved mark, spacing and contrast rules.
Color & type rolesSharedUse the same semantic roles, not one identical layout.
Shared primitive behaviorSharedActions, inputs, navigation chrome and feedback use the same contracts.
Responsive & accessibilitySharedDesktop, tablet, mobile and input access are required.
AI trust & authoritySharedSource, freshness, permission and action state stay visible.
Information architectureServiceEach service organizes its own work.
Product voice & contentServiceProduct teams define language for their audience and context.
Domain workflowsServiceThe shared guide does not prescribe product tasks.
Domain componentsServiceServices compose specialized records and tools from shared primitives.
Layouts & data densityServiceEach service chooses workflow composition and information density.

A service may extend the system. It may not silently redefine a shared rule.

02

Foundations

Color, type, layout, surfaces, imagery, icons and motion.

Color

Neutral structure. Restrained champagne signals. Independent colors for status.

Canvas--canvas#F7F7F5 / #141517
Surface--surface#FFFFFF / #202123
Ink--ink#222525 / #F2F2EC
Accent--accent#81602D / #DCB87A
FD-01

Color has ownership

Keep neutral structure quiet so content, intelligence and status remain legible.

Use when

Use canvas and surface colors for structure, champagne for meaningful intelligence signals, and semantic colors for status.

Do not use when

Do not use color merely to make an empty area feel designed.

Always
Pair semantic color with text, shape or icon meaning and verify contrast in both themes.
Usually
Let porcelain and charcoal occupy most of the interface.
Never
Use champagne as warning, error, destructive action or decorative perimeter.
Exception
Media may contribute stronger color when the foreground is independently protected.

Typography

Sans-serif for headings, content and controls. Reserve editorial serif for short notes and the wordmark.

Clear tools make room for the work. 清晰的工具，让内容成为主角。

Typography is one bilingual system with different script-aware families. Application UI stays sans-serif; editorial serif is limited to short notes, and Cormorant is reserved for the Latin wordmark.

Roles and metrics

Size / weight / line height are explicit. Chinese uses the same hierarchy with roomier line boxes and no compressed tracking.

Application title--type-title32px / 600 / 1.25 Latin · 1.35 ChineseOne concise page or module title.
Workspace overview · 工作区概览
Section heading--type-section24px / 600 / 1.3 Latin · 1.4 ChineseStarts a distinct content group.
Recent activity · 最近动态
Reading--type-reading16px / 400 / 1.7Paragraphs, guidance and long-form content.
Make the next action easy to understand. 让下一步操作容易理解。
Interface--type-ui14px / 500 / 1.5Controls, card content and concise labels.
Save changes · 保存更改
Metadata--type-meta12px / 400 / 1.5Dates, state labels and supporting context.
Updated 14:30 · 更新于 14:30

Use tabular numerals for aligned data. Do not reduce Chinese below the role size to imitate narrower Latin text.

Chinese platform stacks

Use familiar native glyphs by default. The CSS stack chooses the first installed family; test line wrapping on every supported platform.

PlatformUI / readingEditorialNote
ApplePingFang SC → Hiragino Sans GBSongti SC → STSongPrimary for macOS and iOS.
WindowsMicrosoft YaHeiSimSunAvoid faux-light weights on older systems.
Android / LinuxNoto Sans CJK SC → Source Han Sans SCNoto Serif CJK SC → Source Han Serif SCAvailability varies by image or distribution.
Deterministic webSubsetted Noto Sans SC / Source Han Sans SCSubsetted Noto Serif SC / Source Han Serif SCSelf-host only after payload and license review.

Chinese composition

Line breaking

Use language-aware line breaking. Avoid a line beginning with closing punctuation or ending with opening punctuation.

Punctuation

Use full-width Chinese punctuation in Chinese sentences. Keep paired quotation marks and book-title marks together where practical.

Paragraph rhythm

Use line-height around 1.7 for reading text and spacing between paragraphs. Do not add first-line indentation in compact product UI.

Tracking

Keep Chinese tracking natural. Do not use Latin all-caps letter spacing or negative tracking to force a line fit.

Emphasis

Prefer weight, color or a short label. Avoid long italic Chinese passages and synthetic oblique glyphs.

Mixed Chinese and Latin

Spacing

Do not insert spaces around ordinary inline Latin words or Arabic numerals in Chinese. Add separation only when ambiguity or a product convention requires it.

Numbers & units

Use tabular numerals in columns. Keep values with compact units such as 24px, 12GB and 14:30; localize user-facing measurement conventions.

Dates & currency

Use Intl with zh-CN and the product’s explicit time zone/currency. Do not assemble dates or money with string concatenation.

Product names

Keep registered Latin product names unchanged. Translate the surrounding role or action, not the mark itself.

Fallback matching

Choose Latin and CJK families with compatible visual size and weight; test baseline, punctuation and wrapping rather than matching CSS weight numbers alone.

Application specimens

Today’s priorities · 今日重点

Review the release notes before sharing. 分享前请检查版本说明，并确认中英文表达的信息一致。

Use a short, recognizable name. 使用简短且容易识别的名称。
PlanStatus

Visionary 网站Ready / 已就绪

Use 2–40 characters. 请输入 2–40 个字符。
Updated 14:30 · 9月11日更新
Prepare the bilingual release · 准备双语版本

Check wrapping, controls and status messages on a narrow screen. 检查窄屏下的换行、控件与状态反馈。

Font distribution and performance

The guide locally hosts its Latin families. Chinese is native-first because the available regular-only test font is not a complete production family and full upstream sans/serif variable files add roughly 42 MB before optimization.

Governed alternative

Use OFL-licensed Noto CJK or Source Han CJK when a product needs deterministic rendering.

Subset

Create product-specific WOFF2 subsets from the approved upstream source; retain required Chinese, punctuation, Latin and numeral glyphs.

Load

Preload only the primary above-the-fold face. Declare unicode ranges and font-display: swap; keep the native stack as fallback.

License

Ship the upstream license and provenance beside every vendored font. Never copy an unexplained build artifact from another repository.

Measure

Record compressed bytes, requested faces, layout shift and slow-network behavior before adoption.

Contrast & focus

Text ≥ 4.5:1. Large text and essential control boundaries ≥ 3:1. Check both themes.

Aa 字--ink / --canvas—
Aa 字--muted / --surface—
Aa 字--accent / --canvas—
Aa 字--field-line / --surface—

Field focus: a neutral 2px edge; other controls keep a visible keyboard outline. Status always includes a label. Glass needs a separate check over its actual background.

Surfaces

Quiet solid surfaces. Soft card edges; clear boundaries for inputs.

Content surface

A quiet card on the canvas. Use the same surface in forms, lists and modules.

Nested content · subtle tonal separation

Interactive boundary

Fields keep a clear edge. Focus strengthens it without an outer glow.

Space & shape

4px grid · 8px fields · 24px cards · 16px gaps.

4
8
12
16
24
32
48
64

Space, radius & hierarchy

Soft geometry is a shared invariant. Use a small radius scale, then show ownership with space before adding another boundary.

Radius by role

81220∞
Use · rounded by roleBanned · hard 90° corner

No hard outer corners

Prefer spacing

✓ Related content stays open

× Avoid boxes inside boxes

Icon construction

Simple stroke icons support labels; they do not replace unfamiliar meaning.

16px inline20px control1.5px stroke44px touch target

Foreground follows the image

Choose overlay contrast from the actual crop. Page theme never decides image text color.

Bodega Bay✓ Correct · protected foreground
Bodega Bay× Wrong · theme-derived ink
FD-02

Layout is a constraint, not a template

Give services dependable proportions while leaving their task architecture open.

Use when

Use shared frames, gutters, reading widths and module limits before choosing a service-specific composition.

Do not use when

Do not prescribe the same dashboard, sidebar or column count for every service.

Always
Keep the primary task first in DOM and visual order; preserve it through reflow.
Usually
Use 68ch reading width, 400px form width and 360px supporting modules as starting limits.
Never
Stretch reading text, forms or dialogs merely because the viewport is wide.
Exception
Data canvases and media may expand when their internal structure benefits from width.
FD-03

Boundaries follow purpose

Create hierarchy through spacing, tonal difference and a small number of meaningful edges.

Use when

Use a surface when content needs ownership, interaction, state or separation from its surroundings.

Do not use when

Do not card every paragraph or nest containers to decorate hierarchy.

Always
Give every visibly bounded control and independently owned surface a role-based rounded outer corner.
Usually
Keep explanatory prose open and frame specimens, tools and stateful modules.
Never
Ship hard 90-degree outer corners on fields, buttons, cards, navigation rows, standalone data rows, dialogs or drawers; viewport edges and internal grid seams are not component corners.
Exception
A dark contextual surface may interrupt the neutral system when media or focused work requires it.

Motion rules

UseTimingProperties
Feedback / overlay exit160ms--duration-feedback
Navigation drawer200ms--duration-navigation
Content replacement240ms--duration-replace
Font preview360ms--duration-font
Panel entrance280msopacity + translateY(10px → 0)
Theme700msOne page crossfade

Finish exactly at the resting state. Never animate font size, weight or container height for feedback. Reduced motion switches instantly. Rapid input must settle on the latest choice.

Theme switching

700ms fade. Follows the system until you choose a theme.

Same geometry. Different light.

Feedback & entrance

160ms feedback · 280ms entrance.

Panel preview

Fade in and settle.

Panel · fade and rise
Colors
Typography
Surfaces
List · staggered entrance
Changes saved

Your workspace is up to date.

Feedback · settle into place
Your reduced-motion preference is respected.

Route transition preserves presence

Use the Visionary transition for meaningful page changes. Fast routes complete silently; delayed routes reveal a branded, accessible progress state.

Delay400ms

Suppress flashes on fast routes

Intro680ms

Veil, mark and wordmark arrive

Hold≥560ms

Keep visible progress legible

Outro760ms

Release after the destination is ready

Reduced motion keeps the same information and uses 140 / 180 / 180ms without decorative looping.

FD-06

Motion explains change

Make state, relationship and presence easier to understand without delaying work.

Use when

Use motion for feedback, entrance, spatial continuity, assembly progress and dismissal.

Do not use when

Do not animate static decoration or make AI feel intelligent through glow and drift.

Always
Keep interactions interruptible, preserve focus and provide a reduced-motion result.
Usually
Use 160ms for feedback, 240–280ms for content and longer transitions only for ambient theme change.
Never
Block input while decorative motion finishes, bounce controls or scale whole cards on hover.
Exception
A contextual media transition may be slower when it preserves spatial continuity and remains interruptible.
03

Components

Reusable controls and content boundaries, defined by purpose and state.

Shared primitive families

The shared system defines the repeatable parts. Services decide what those parts say, contain and accomplish.

FamilyShared decisionService decision
Actions & inputsAnatomy, state, feedback and accessible interaction.Fields, validation rules and consequences.
Navigation & shellBrand position, orientation, selected state and reflow.Destinations, hierarchy and product utilities.
Content & dataSurface, list, table, status and progress language.Domain records, density and comparison model.
Feedback & overlaysPlacement, urgency, focus, dismissal and recovery.Trigger, message and product consequence.
AI trust controlsSource, freshness, permission, proposal and receipt.Tools, authority and domain-specific action.
CP-01

Every component is a complete contract

Make a component reproducible from purpose and behavior, not appearance alone.

Use when

Use a shared component when the purpose, anatomy, variants and state model repeat across services.

Do not use when

Do not promote a product-specific composition into the shared library after one use.

Always
Define default, hover, focus, active, disabled, loading, error and completion behavior where relevant.
Usually
Keep variants semantic—primary, quiet, destructive—not named after color or placement.
Never
Use a line or bar attached to one edge as a selection indicator on any component, including navigation, buttons, cards, rows and tabs; selection must change the object itself.
Exception
A familiar icon-only utility is acceptable with an accessible name, tooltip and sufficient target size.

Actions

One primary action per group.

Buttons are complete controls

A button owns one continuous hit area. Use a filled, outlined or quiet variant; never attach a side rail, tab edge or selection stripe.

PrimarySecondaryQuiet
Default
Hover
Focus
Pressed
Loading
Disabled

Field states

One primitive across default, filled, invalid, disabled and read-only states. Tab through available fields to compare focus.

Status & selection

Shape and words carry state so color never works alone.

○ Draft◉ In progress✓ Complete On

Selection changes the whole object

Use a whole-surface change, stronger label or icon, and explicit state when needed. Never attach an edge bar to show selection.

Use · whole-object state
Navigation rowSelectedCardSelectedData rowSelectedTabSelected
Banned · attached edge bar
Navigation rowSelectedCardSelectedData rowSelectedTabSelected

Extended inputs

Use native controls and one visible label. Help, error and availability stay attached to the field.

Reference filesPDF or image · 20 MB maximum
ControlRequired statesNarrow-screen behavior
Search / comboboxEmpty, results, no results, loading, error.Results align to the field and stay onscreen.
Text / textareaDefault, filled, invalid, disabled, read-only.Labels and messages wrap above actions.
Date / timeEmpty, selected, unavailable, invalid.Picker may become a focused sheet.
UploadIdle, drag, uploading, complete, failed.Files become a readable vertical list.
CP-02

Inputs expose their condition

Make entering, reviewing and correcting information predictable across services.

Use when

Use the shared field structure for text, search, selection, date, upload and other direct input.

Do not use when

Do not invent a new field frame for each data type or separate help and error text from the control they explain.

Always
Keep a visible label, input value, availability, help or error message and required state programmatically connected.
Usually
Use native controls where they provide reliable keyboard, touch and platform behavior.
Never
Use placeholder text as the only label or remove a person's input when validation fails.
Exception
A complex picker may open a focused sheet on narrow screens when the original field and return path remain clear.

Choose a view to change the module below. Keep the label visible.

Summary view selected.

Workspace overview
3Modules2Ready

44px minimum height · 16px field text · 8px corners. Arrow keys browse; Enter selects; Escape closes. Searchable comboboxes and action menus need separate patterns.

Content-module anatomy

A module is a reusable information boundary, not a fixed card template. Its purpose, state, source and available action must remain legible as its interior changes.

01

Purpose

One clear question or job gives the module its title and hierarchy.

02

Content

The interior may be prose, data, media, a list or an editable tool.

03

Context

State, source and freshness appear at the depth needed to judge the result.

04

Action

Controls stay close to the object they affect and preserve direct user authority.

Use a boundary only when it owns something

Stateful work needs a module. Explanatory prose usually needs spacing, not another card.

✓ Owned module
× Unnecessary container

Form workflow

Edit a draft, then apply it. The table changes only after a successful save.

No pending changes

Readable data

Example workspace · Notifications on

ItemStatusUpdated
ColorReady9 Sept 2026
TypographyReady9 Sept 2026
SurfacesDraft9 Sept 2026

Content, status & progress

Use the smallest structure that supports scanning, comparison and a clear next action.

Zillion VisionaryUpdated todayReady
Migration progress64%64%
  1. 1Review
  2. 2Approve
  3. 3Apply

Feedback & overlays

Match interruption to urgency. Preserve context, name what happened and keep one recovery path.

PatternUse whenMust provide
Inline noticeThe message belongs to nearby content.Meaning, affected area and next action.
ToastA completed low-risk action needs confirmation.Short status; no essential recovery only here.
TooltipA familiar control needs brief supporting detail.Keyboard and pointer access; nonessential content.
Menu / popoverSeveral contextual actions share one origin.Clear trigger, focus order, Escape and dismissal.
Dialog / drawerA focused decision or temporary workspace is required.Title, consequence, focus containment and return.

Loading & recovery

Keep the card in place. Explain what happened and offer one next step.

Module ready

Local simulation · retry returns sample content.

Dialogs

480px maximum width · 20px padding · 24px corners. One clear decision.

Create a module

Add an overview to this example workspace. This demo does not save data.

Focus stays inside. Escape or Cancel closes and returns focus. Open: 280ms. Close: 160ms. Reduced motion: instant.

04

Patterns

Compose tasks, decisions, collections, states and responsive layouts.

Page composition, at a glance

Choose hierarchy from the task instead of defaulting to equal cards.

Editorial

Knowledge

Workspace

Overview

One page, one protagonist

A page may contain several regions, but only one owns the current task.

Research brief
Primary work

Prepare the evidence review

The primary work stays wider, brighter and earlier than supporting context.

6 sources · refreshed today
  1. 1Location
  2. 2Current task
  3. 3Next action
Exact rule

Make the current purpose visible before supporting information competes for attention.

Always
Place the primary result or task first and keep its main action unambiguous.
Usually
Let supporting modules explain, compare or enable the protagonist.
Never
Create a dashboard of equally loud cards without a governing question.
Exception
Exploratory collections may begin without one selected object, but still need a clear browsing purpose.

Decisions stay beside their consequence

Labels, help, validation and the resulting action form one readable sequence.

Visible to invited collaborators.
  1. 1Explain before input
  2. 2Summarize consequence
  3. 3Keep actions together
Exact rule

Reduce uncertainty in forms, reviews and consequential actions.

Always
Preserve entered data, identify the affected field and explain the next valid action.
Usually
Place the primary action after the content it commits and show progress for staged work.
Never
Use disabled controls without explaining how they become available.
Exception
Autosave may omit a submit action when state, failure and recovery remain visible.

Choose a collection by the comparison task

Narrative objects need cards. Repeated attributes need aligned rows.

Distinct objectsApproved
01Research brief

Source review

02Knowledge map

Access policy

Comparable recordsApproved
Source reviewReadyToday
Access policyDraftYesterday
Exact rule

Choose list, grid or table according to what a person must scan and compare.

Always
Treat the table as one card: use one outer frame, aligned columns, consistent cell padding and one line weight for the header and row separators.
Usually
Preserve column meaning on narrow screens through scroll, priority columns or a deliberate row view.
Never
Turn a table into unlabeled stacked values or hide selection state during reflow.
Exception
A small visual collection may use cards when imagery or independent action is the primary comparison.

Every state keeps a path forward

Loading, empty, error and complete are designed states, not leftover whitespace.

Loading01

Name the work in progress

Empty02

Explain what belongs here

Error03

Name the failure and recovery

Complete04

Show the result and next step

Exact rule

Make loading, absence, failure, staleness and completion part of the designed experience.

Always
State what happened, what remains safe and what the person can do next.
Usually
Preserve surrounding structure so a state change does not destroy orientation.
Never
Erase stale content before a replacement is ready or imply completion from animation alone.
Exception
A silent skeleton is acceptable for a brief first load when no user action or prior result is at risk.

Sign-in is a calm threshold

Give identity one focused task, one contextual image and the same soft geometry as the product beyond it.

Contextual media

Images are windows into a place, object or body of knowledge. Their own luminance and composition determine overlay treatment.

Bodega BaySonoma County, California · Context owns contrast

Foreground

Choose text and control contrast against the actual crop; do not derive it from the global theme.

Crop

Preserve the subject and a stable text-safe region at every breakpoint.

Protection

Use a restrained local scrim only when the image cannot provide reliable contrast on its own.

Meaning

Prefer real context, material detail and useful evidence over generic atmospheric decoration.

Width & responsive layout

Every interface supports Desktop, Tablet and Mobile. Available CSS width—not physical resolution, device detection or orientation—selects the mode. Reading, forms and modules keep their own limits.

Reading

68ch

Form

400px

Page frame

1600px

Side module

360px

Dialog

480px
Main content
ViewportGutterBehavior
≥ 1200px32pxDesktop · 1920×1080 primary; persistent navigation; centered 1600px shell; bounded reading width at 4K.
681–1199px24pxTwo columns when space permits; collapse optional context.
≤ 680px20px + safe areaMobile · one task-first column; drawer navigation; overlays own scrolling and preserve page position.

Cards: minimum 240px. Long tables scroll inside their own region. Check 320, 390, 768, 1024, 1920×1080 and 3840×2160 CSS viewports, plus 200% zoom.

Three responsive modes

Every Zillion interface supports Desktop, Tablet and Mobile. Available CSS width chooses the mode; capability and content decide the final composition.

Desktop

≥ 1200px
  • Compose primarily for a 1920×1080 CSS viewport. Use a persistent 240px navigation region, 32px outer gutters and a centered shell capped at 1600px.
  • At 4K, keep reading measures and control sizes bounded. Use the larger canvas for balanced structure and supporting context; never scale typography from physical resolution alone.
  • Support pointer and keyboard equally. A main-plus-context layout may remain visible when both regions retain useful width; essential actions cannot depend on hover.

Project status

Waiting for review.

Supporting context

Review typography and spacing before sharing.

Secondary content never overtakes the primary task.

Check 1920×1080 first, then 3840×2160 and 200% zoom. The composition grows; the reading line does not.

Tablet

681–1199px
  • Use 24px gutters and drawer navigation. Treat portrait, landscape and split view as normal width changes, not separate device designs.
  • Use two columns only when each region keeps enough room for its content; stack in narrow split-screen windows without changing reading order.
  • Support touch, trackpad and keyboard equally. Keep focus visible, targets at least 44px and local overflow inside a named region.

Project status

Waiting for review.

Supporting context

Review typography and spacing before sharing.

Secondary content never overtakes the primary task.

Resize or enter split view. Content reflows from available width and preserves task, state and order.

Mobile

≤ 680px
  • Use one task-first column with 20px gutters plus safe-area insets. Supporting modules follow the primary content or open as a focused view.
  • Use 44px touch targets and at least 16px input text. Keep focused fields above the keyboard and expose every essential action without hover.
  • An open drawer or dialog owns scrolling. Freeze the page at its exact position, prevent scroll chaining and restore position and focus when it closes.

Project status

Waiting for review.

Supporting context

Review typography and spacing before sharing.

Secondary content never overtakes the primary task.

Check narrow and tall screens, landscape and the on-screen keyboard. The page must never scroll behind an overlay.

05

AI-native

A stable workspace that assembles useful interfaces around the current intention.

Stable frame, assembled work

Keep orientation and authority stable while the agent assembles the smallest useful module.

Why this appeared2 sources · updated today
Review before apply
  1. 1Proposed
  2. 2Ready
  3. 3Acting
  4. 4Receipt

One conversation, three ways to work

Ready to type. A compact conversation over the page. Or an integrated conversation alongside your work.

Local demonstration · no model connection or saved data

Documents
AssistantQuarterly review
Enter to send · Shift+Enter for a new line
Draft · kept while layouts change

Quarterly review

Try editing these notes, drafting a message, and switching layouts. Both areas keep their place.

48 characters

Overview

Review the summary before sharing with the team.

Source: example document

Workspace

Try editing these notes, drafting a message, and switching layouts. Both areas keep their place.

Review the summary before sharing with the team.

Zillion

Navigation

Explore navigation and responsive layouts →

Stable frame, changing work

Location, authority and primary controls stay put while useful modules change inside the canvas.

ZillionResearch workspace
Assembled module

Evidence summary

  1. 1Stable location
  2. 2Assembled module
  3. 3Stable authority
Exact rule

Let intelligence change useful content without destabilizing the workspace around it.

Always
Preserve current task, user input and a clear return path through every assembly change.
Usually
Update an existing module when its purpose remains the same instead of adding another.
Never
Rearrange persistent navigation, submit an action or discard a draft because the model inferred a new intention.
Exception
A person may explicitly enter a focused mode that temporarily hides supporting structure.

Every module explains why it exists

Purpose, content, context and action are visible in the module itself.

Suggested from your request

Evidence summary

Three sources agree; one newer source needs review.

4 sources · newest 12 min ago
  1. 1Purpose
  2. 2Result
  3. 3Provenance
  4. 4Action
Exact rule

Make generated interfaces judgeable without requiring the conversation transcript.

Always
Expose why it appeared, purpose, lifecycle state, source, freshness, uncertainty and available actions at the level needed for judgment.
Usually
Compose from known semantic modules and keep one primary result per assembled view.
Never
Present generated data as canonical or hide the difference between a proposal and a completed action.
Exception
Low-risk transient suggestions may use compact provenance when full detail remains one action away.

One module, visible lifecycle

The object keeps its identity while status, available control and certainty change.

  1. 01
    Evidence summaryProposed

    Review scope

  2. 02
    Evidence summaryApproved

    Ready to run

  3. 03
    Evidence summaryWorking

    3 of 4 sources

  4. 04
    Evidence summaryComplete

    Receipt available

Conversation guides; the canvas holds work

Conversation establishes intent. Persistent work moves into a module that can be inspected and edited directly.

Suggested from your request

Conflict review

4 sources · 1 needs attention

Exact rule

Use each medium for what it does best without turning the product into chat with attachments.

Always
Keep references between conversation and modules explicit and preserve context when either receives focus.
Usually
Ask one precise blocking question and leave unaffected modules usable.
Never
Force a person to restate visible module content or approve presentation-only rearrangement.
Exception
A simple answer may remain conversational when it has no durable state, comparison or direct action.

Trust stays next to the result

Reason, source, freshness, permission and receipt are visible where they affect a decision.

Suggested from your request

Update evidence summary

Review required

This will replace one stale citation and preserve the previous version.

Why
Requested comparison
Sources
4 linked records
Permission
Review required
Receipt
Version history kept

Authority appears at the point of consequence

Show what will change before asking for permission; do not infer authority from conversation.

Proposed updateReplace 1 citation · keep 3 · affect 1 shared brief
Exact rule

Let agents help freely with reversible presentation while protecting external and durable change.

Always
Name the target, consequence and reversibility before consequential action, then show what changed.
Usually
Allow reversible assembly, sorting and presentation without confirmation.
Never
Present a draft as sent, a recommendation as accepted or an attempted action as completed.
Exception
Standing, scoped user policy may authorize repeat actions when the current target remains visible.

Failure remains specific and recoverable

Keep completed work, identify the failed part and offer the narrowest useful recovery.

Approved

3 sources complete · 1 unavailable

The existing summary is preserved. Retry the unavailable source only.

Reject

Something went wrong

Please try again.

Exact rule

Keep partial intelligence useful without overstating success or collapsing the whole workspace.

Always
Identify the affected work, retain valid results and offer the narrowest safe recovery.
Usually
Keep unaffected modules ready while the failed module explains its next step.
Never
Discard user input, conceal uncertainty or retry a consequential action without authority.
Exception
A full-page interruption is appropriate only when the stable frame itself cannot safely continue.

Meaning survives responsive handoff

The same module keeps its identity and trust information while placement and density change.

DesktopConversation and canvas together
TabletCanvas first, context collapses
MobileOne task, trust inline
06

System rules

Non-negotiable laws that keep every Zillion service recognizably part of one brand.

Eight shared laws

These laws override local styling convenience. Service specifications may add detail, but may not silently contradict them.

Identity rule reference

Visual specimens live in Identity. Open these only when an edge case needs exact language.

ID-01One language, many services

Give every Zillion service a recognizable family resemblance without forcing identical products or layouts.

Always
Preserve the shared identity, semantic colors, type roles, accessibility baseline and AI trust model.
Usually
Reuse shared components and composition rules before introducing a service variant.
Never
Copy one service's page structure and call it the universal Zillion layout.
Exception
A service may extend the system when its requirement is documented and does not silently contradict a shared invariant.
ID-03The mark stays quiet and intact

Use the current Zillion symbol and Cormorant wordmark as orientation, not as decoration competing with the product.

Always
Preserve proportions, strong foreground contrast and clear space at least equal to the symbol width.
Usually
Use the guide's 28px symbol with the Cormorant wordmark in product navigation.
Never
Add effects, recolor individual strokes or use the wordmark type for ordinary interface headings.
Exception
Service descriptors may follow the documented family model; compact, campaign or partner lockups require an approved asset.

Eight laws, shown

Each law is a visible judgment. Open the exact language only for an edge case.

R-01

Champagne signals meaning

Approved

One meaningful accent

Reject

Accent used as decoration

Exact rule

Reserve the accent for intelligence, meaningful selection, significant value and intentional completion.

Always
Keep status colors semantically independent.
Usually
Use champagne once per decision group.
Never
Use it for warning, error or destructive action.
Exception
Brand-led editorial moments may use a quiet champagne detail without implying interaction.
R-02

Media owns its foreground

Approved
Bodega Bay

Foreground follows the crop

Reject
Bodega Bay

Page theme chooses image ink

Exact rule

Keep overlay content readable regardless of application theme.

Always
Test every supported crop and breakpoint.
Usually
Use a stable image-safe area.
Never
Switch overlay text with light or dark theme alone.
Exception
A local scrim may stabilize unavoidable variance.
R-03

Both languages have authorship

Approved
Research brief研究简报

Both languages are composed

Reject
Research brief研究简报

Chinese treated as overflow

Exact rule

Make English and Chinese equal design inputs rather than translation layers.

Always
Provide equivalent meaning and complete state coverage.
Usually
Let each language use natural phrasing and line rhythm.
Never
Shrink Chinese to imitate Latin density.
Exception
Registered product marks remain unchanged.
R-04

Access is part of the component

Approved

State has shape and words

Reject

Color carries state alone

Exact rule

Make WCAG 2.2 AA the shared baseline rather than a final audit layer.

Always
Keep focus visible and names programmatically available.
Usually
Use 44px touch targets and support 200% zoom.
Never
Remove semantics for visual convenience.
Exception
Compact targets require an equivalent accessible interaction and documented reason.
R-05

Meaning survives reflow

Approved

Hierarchy survives reflow

Reject

Desktop is merely squeezed

Exact rule

Support Desktop, Tablet and Mobile without losing task, order, state or control.

Always
Validate 1920×1080 and 3840×2160 desktop, tablet portrait and landscape, and narrow mobile widths.
Usually
Keep navigation persistent on desktop, use a drawer on tablet and mobile, and stack supporting modules after the protagonist as space narrows.
Never
Hide essential actions behind hover or let a page scroll behind an open overlay.
Exception
Dense data may scroll within a named region while the page itself remains stable.
R-06

Intelligence stays transparent

Approved
Evidence summary4 sources · today

Source stays with the result

Reject
Evidence summary4 sources · today

Trust is detached below

Exact rule

Make AI-generated work understandable and judgeable.

Always
Distinguish proposal, action and completion.
Usually
Keep provenance quiet but reachable.
Never
Imply certainty or permission that is not present.
Exception
Low-risk transient help may use compact disclosure.
R-07

Content remains truthful

Approved
Known4Inferred1

Known and inferred are distinct

Reject
Known4Inferred1

Guess presented as fact

Exact rule

Protect meaning when design, language or generated output changes.

Always
Name unknown, stale and partial states.
Usually
Prefer direct verbs and specific objects.
Never
Invent precision, sources or completion.
Exception
Editorial writing may be suggestive when no operational claim is made.
R-08

Reject visual shortcuts

Approved

Space before another container

Reject

Cards nested for decoration

Exact rule

Protect Living Clarity from fashionable effects that replace hierarchy or meaning.

Always
Remove generic glass, decorative glow, excessive cards and unexplained dynamic chrome.
Usually
Prefer spacing, weight and content hierarchy over ornament.
Never
Use gold rims, theatrical AI effects, theme-driven media text or serif in dense UI.
Exception
A documented exploration may test a prohibited direction outside the canonical guide.
07

Review

A final shared-language check before a service-specific design moves forward.

Review the interface, not the explanation

A reviewer should be able to judge hierarchy, state, trust and action directly from the rendered screen.

Approved

Evidence review

4 sources · updated today
Reject

Workspace dashboard

AI powered
  1. 1One clear protagonist
  2. 2Source and freshness nearby
  3. 3Action names its consequence
  4. 4No decorative nesting
RV-01

Shared-language review

A design is ready for service-specific refinement only when every relevant question has a visible answer.

  1. 01

    Does it remain recognizably Zillion without the logo?

  2. 02

    Is there one clear protagonist and one unambiguous primary action?

  3. 03

    Are color, typography, imagery and motion used according to their semantic roles?

  4. 04

    Are loading, empty, error, stale, disabled and completion states defined where relevant?

  5. 05

    Do English and Chinese carry equal meaning and visual authority?

  6. 06

    Does task, input and state survive narrow layouts and 200% zoom?

  7. 07

    Are keyboard, focus, contrast, touch and reduced-motion requirements met?

  8. 08

    Does every AI-created module expose enough reason, provenance, freshness, uncertainty and authority?

  9. 09

    Are consequential actions explicit and followed by an accurate receipt?

  10. 10

    Can every deviation from a shared rule name its requirement and owner?

RV-02

What a service specification adds

The shared language sets invariants. A service defines the product decisions needed to make those invariants useful in its domain.

The shared guide defines

  • Identity and semantic language
  • Foundations and accessibility
  • Shared component behavior
  • Composition constraints
  • AI-native trust and authority

A service defines

  • Information architecture
  • Product voice and content
  • Domain components and data density
  • Workflows and user intentions
  • Service-specific layouts
  • Validated exceptions and demos