Design Analysis
This system is almost all absence. Use a blank white field, one tiny corner code, and one large message cluster anchored to the lower-left zone of the viewport. The layout should feel calm and definitive rather than apol...
This system is almost all absence. Use a blank white field, one tiny corner code, and one large message cluster anchored to the lower-left zone of the viewport. The layout should feel calm and definitive rather than apologetic or decorative. Because the shell is so minimal, placement is the primary design tool. The empty space above and to the right of the message is not wasted space; it is the whole point.
Use black on white and almost nothing else. If separators or quiet affordances appear, they should stay in a faint neutral gray. The state should never rely on warning colors or ornamental illustration.
Use a plain grotesk with medium weight for the main headline and a quieter regular weight for the support line. The main message should be large enough to feel conclusive without becoming theatrical. The tiny status code should remain understated.
Anchor the main message cluster low and left. Keep the code isolated near the upper-left corner so the viewer reads the page as one simple status marker plus one explanatory block. Do not center the message; the asymmetry gives the shell its character. On smaller screens, reduce the amount of white space but preserve the same directional bias. The message should still feel like it belongs to the lower-left rather than to the center.
Core identity and authoring metadata from the refto.one design model.
A sparse error-state system defined by lower-left anchoring, oversized whitespace, and plain grotesk messaging.
Austere, quiet, and intentionally unresolved.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Fields outside the primary renderer remain visible here as structured fallback content.
Motion tokens rendered as resolved values for timing and personality.
Resolved motion token values.
| Property | Value |
|---|---|
duration | 0ms |
easing | linear |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.
