Cellwright

System reference / v0.1

Cellwright style guide

A living catalog of public tokens, components, interaction states, and stress cases. Every release component must remain represented here and in the component audit matrix.

Representative-page stage. Tokens and foundational components are ready for Gate 2 review; final page and integration states are still in development.

Foundation 01

Color

Semantic color names survive rebranding. Initial contrast ratios are documented in the private design record and must be rechecked against rendered states.

Canvas#F1EFE7
Surface#FAFAF7
Inverse#12231D
Copper signal#A84422
Evidence mint#C7F0D8

Foundation 02

Typography

System sans and monospace stacks avoid font licensing and network failure while the layout supplies the visual identity.

Process before hardware.

Heading level two remains concise.

Heading level three explains one unit.

Lead copy introduces a section in one or two sentences and stays below roughly 58 characters per line on wide screens.

Body copy remains readable with system fallbacks, 200% zoom, and translated-length text. Long words wrap safely: Donaudampfschifffahrtsgesellschaftskapitän.

CW / META-01

Component 01

Actions and status

Primary link
Success: the example state completed.
Review: verify assumptions before continuing.

Component 02

Content structures

CW/SOL-01

Robotic cell integration with a deliberately long title

Long content demonstrates that the component grows rather than clipping or hiding buyer-supplied information.

  • Semantic list content
  • Missing optional media
  • Localization expansion
View in context →
Surface / default

Technical note

A neutral bordered surface groups content without relying on a shadow.

Disclosure
What happens without JavaScript?

This native disclosure remains readable and operable. The main navigation remains visible until JavaScript explicitly enhances it.

How is reduced motion handled?

Nonessential transitions collapse to their final state under the user's reduced motion preference.

Component 03

Form fields

These examples cover labels, hints, required state, error association, disabled and read-only behavior. The final RFQ will add sending, success, offline, and server states.

Form component examples

Use the contact person's full name.

Enter a complete email address, such as name@company.com.

Read-only values remain selectable.

Describe the current process, exceptions, target, and timing.

Component 04

Technical data

The labelled region scrolls horizontally when required. Final tables will receive a page-specific stacked treatment where that improves comprehension.

Illustrative capability matrix
Constraint Observe Control Verify
Variant handling Part identification Recipe and motion selection Traceable completion result
Quality escape Defined defect criteria Reject and recovery state Image/result record

Resilience

Missing media and long content

Media unavailable
Replace with a licensed 4:3 project image or a self-authored schematic.

Long-content stress

Controls-modernization planning for a continuously operating multi-line production environment

This deliberately extended copy verifies wrapping, spacing, and content-driven height without truncation. Optional imagery can disappear without weakening the information hierarchy.