Upload DESIGN.md with huggingface_hub
Browse files
DESIGN.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# DESIGN.md
|
| 2 |
+
|
| 3 |
+
Visual direction for the PASITA Space. Reference chosen by the user:
|
| 4 |
+
the dark orange instrument panel of `webml-community/lfm2-webgpu-kernels`.
|
| 5 |
+
|
| 6 |
+
## Design read
|
| 7 |
+
|
| 8 |
+
A document tool for Hugging Face users, in the webml-community dark instrument-panel
|
| 9 |
+
language, with dials ENERGY 2 / RHYTHM 1 / MOTION 1.
|
| 10 |
+
|
| 11 |
+
- ENERGY 2: clear presence in the header and primary button, no hero, no landing decoration.
|
| 12 |
+
- RHYTHM 1: a single two-panel composition, because the task is one input and one output.
|
| 13 |
+
- MOTION 1: hover and focus states only, plus the pulsing status dot while loading.
|
| 14 |
+
|
| 15 |
+
## Tokens
|
| 16 |
+
|
| 17 |
+
- Background `#050608` with the identity warm/cool radial gradient, text `#f4f5f7`,
|
| 18 |
+
secondary text `#9aa0ab`, tertiary text `#7f8698` (lifted from the original `#6b7280`
|
| 19 |
+
to meet AA), hairlines `rgba(255,255,255,0.14 / 0.08)`, panels `rgba(255,255,255,0.03)`.
|
| 20 |
+
- Warm accent `#ff7a30` for the primary action and the active status; cool blue `#7aa0ff`
|
| 21 |
+
only for the keyboard focus ring. Danger `#ff7a6b`.
|
| 22 |
+
- Type: Hanken Grotesk for reading, JetBrains Mono for labels, counters and status.
|
| 23 |
+
|
| 24 |
+
## Why each decision
|
| 25 |
+
|
| 26 |
+
- Near-black background: the task is reading documents; color competes with content.
|
| 27 |
+
- One warm accent: it marks the action and the active state; there is no decorative accent
|
| 28 |
+
spread across elements.
|
| 29 |
+
- Mono only for machine text: labels, counters, metrics and status. Prose uses Hanken Grotesk.
|
| 30 |
+
- Two panels: conversion is input to output; they stack on mobile.
|
| 31 |
+
- Status line with real metrics: it proves the faithfulness promise (numbers kept, coverage,
|
| 32 |
+
route used) instead of claiming it.
|
| 33 |
+
- Static ambient gradient and a single blurred header: identity from the reference, with no
|
| 34 |
+
perpetual animation and no generalized glassmorphism.
|
| 35 |
+
- Real controls: Convert, Clear, candidates 1 to 3, deterministic converter. No decorative
|
| 36 |
+
element without a function.
|
| 37 |
+
|
| 38 |
+
## Contrast (WCAG AA)
|
| 39 |
+
|
| 40 |
+
Computed with the relative-luminance formula:
|
| 41 |
+
|
| 42 |
+
- `#9aa0ab` on `#050608`: 7.65:1 (normal text, pass).
|
| 43 |
+
- `#7f8698` on `#050608`: 5.54:1 (normal text, pass).
|
| 44 |
+
- `#ff7a30` on `#050608`: 7.77:1 (text and accent, pass).
|
| 45 |
+
- Text `#0b0705` on button `#ff7a30`: 7.48:1 (pass).
|
| 46 |
+
- Focus ring `#7aa0ff` on `#050608`: 7.96:1 (non-text, above 3:1).
|
| 47 |
+
|
| 48 |
+
## States
|
| 49 |
+
|
| 50 |
+
- Empty: the output panel shows a marker and the status says READY.
|
| 51 |
+
- Loading: Gradio shows progress on the button; the js pre-call flips the status to CONVERTING.
|
| 52 |
+
- Error: the status switches to ERROR with the exception type and the output shows the message.
|
| 53 |
+
- Keyboard: every control is reachable, `:focus-visible` ring in blue.
|
| 54 |
+
|
| 55 |
+
## What we do not do
|
| 56 |
+
|
| 57 |
+
- No emoji in the UI chrome.
|
| 58 |
+
- No fake screenshots, testimonials or invented figures.
|
| 59 |
+
- No looping animations or glassmorphism on several layers.
|
| 60 |
+
- No decorative grids or background patterns.
|