# E.Wright — Porcelain & Paper Version 1.0.0 · September 21, 2026 Two production-oriented visual systems with one semantic component contract. The kit contains CSS, native HTML patterns, ES-module behaviors, tokens, documentation and runnable Node tests. It has no runtime package dependencies. The reference uses local sample data; real authentication, validation, uploads and persistence remain application responsibilities. ## Choose a material - **Porcelain**: product interfaces, operational tasks and polished prototypes. White ceramic surfaces, navy text, soft olive emphasis, 10px control corners and ambient shadows. Light appearance only. - **Paper**: wireframes, structure studies and annotated reviews. Neutral raised sheets, grain, directional shadows and 24px control corners. - **Paper / dusk**: dimmer neutral Paper, still a light appearance. It is not an inverted dark mode. Do not map the operating system's dark-mode preference to this appearance automatically. Layouts and interactions are shared. Use `data-ew-theme="porcelain"`, `paper`, or `paper-dusk`. Set the attribute before first paint. All themes expose exactly the same CSS custom properties. ## Quick start Copy the kit into a directory served by your application. A local HTTP server is required for ES modules and the reference token fetch. No install or build is needed to consume the generated styles. ```html ``` `starter.html` is a minimal working example. `reference.html` is the full interactive catalog. The included Inter font is optional; system-font fallbacks are declared. `FONT-LICENSE.txt` accompanies the font. No remote font or analytics dependency is required by the kit. ## Files and ownership | File | Responsibility | | --- | --- | | `tokens.json` | Canonical theme/foundation definitions; format `ewright-tokens/1` with CSS-ready values | | `build.mjs` | Generates `tokens.css` and `legacy-tokens.css`; Node 22+ | | `tokens.css` | All public `--ew-*` custom properties | | `components.css` | Scoped visual primitives and their states | | `components.mjs` | Tabs, dialog triggers, popovers, clipboard and dismissible notifications | | `component-manifest.json` | Component selectors, anatomy, states and keyboard contracts | | `model.mjs` | Contrast, pagination and local sample-form validation helpers | | `reference.html`, `.css`, `.mjs` | Documentation and local demonstrations | | `starter.html` | Minimal consumer example | | `system.test.mjs` | Token, contrast, validation and navigation tests | | `legacy-tokens.css` | Palette bridge for existing portfolio study selectors | `reference.mjs` is documentation code, not an application service. Do not use its sample claim validation to infer business eligibility or approval. The JSON format is explicitly this kit's format, not a claim of DTCG schema compatibility. ## Foundations Body: 16px / 1.65. Controls and labels: 14px / 1.45. Secondary captions only: 12px. Heading scale: 20, 24, 32, 44px. Use Inter 400, 500 and 600. Dimensions use rem, preserving browser font preferences. Readable line length: 65ch. Spacing uses a 4px rhythm: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 and 80px. Use 8–12px within controls, 16–24px within groups and 32–64px between sections. Layout breakpoints are 40rem and 60rem; 80rem is the wide content limit. Components use minmax(0, 1fr), wrapping labels and container queries when available. Attachment actions stack below details when their container is below 30rem; this is also the fallback in browsers without container queries. Colors are semantic: canvas, surface, raised/sunken surface, control, text, text-muted, action, focus and status pairs. `border` separates decorative groups. `border-control` identifies controls and passes the stronger non-text contrast threshold. Do not use decorative borders as the sole input boundary. Elevation: flat, control, panel, overlay. Porcelain shadows are ambient; Paper shadows are directional. Grain is decorative and never a substitute for a visible boundary. Large opaque panels use 24px corners; smaller structural elements use 8px; badges use a pill. Icons use a 24-unit grid, 20px display size, 1.8-unit strokes, round caps and joins. Label every icon-only control. Set decorative SVGs `aria-hidden="true"`; avoid redundant title announcements when visible text names the control. Motion: 120ms for feedback, 180ms for controls, 240ms for surface changes, easing cubic-bezier(.2,0,0,1). Reduced motion disables transitions and repeating animation. Avoid motion as the only explanation of a state change. ## Component API All components live within `.ew-system`; theme variables may be scoped to a nested `data-ew-theme` container. A nested `.ew-system` makes its canvas explicit. Avoid mounting the same behavior layer twice on overlapping roots. ### Buttons, links and state `ew-button` uses `data-variant="primary|quiet|danger"`; omit for secondary. `data-size="large"` gives a 52px target; default is at least 44px. Use real buttons for actions and anchors with href for navigation. Loading uses a stable text label plus `aria-busy="true"` and `disabled`. A spinner is decorative. Explain disabled states nearby; do not rely on a tooltip on an unfocusable disabled button. ### Forms Use `.ew-field` with a visible `