File size: 3,375 Bytes
ac8f0cb 1762bfa ac8f0cb 1762bfa ac8f0cb 1762bfa ac8f0cb 1762bfa 428ef1e 1762bfa ac8f0cb 1762bfa ac8f0cb c8c13b5 ac8f0cb 1762bfa ac8f0cb 1762bfa 428ef1e 1762bfa 428ef1e ac8f0cb 1762bfa ac8f0cb 1762bfa ac8f0cb 1762bfa ac8f0cb 1762bfa ac8f0cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | # DESIGN.md
Visual direction for the PASITA Space. Language: flat, neutral, React/Next-like
(Vercel Geist grammar: semantic grays, 6/12 radii, hairline strokes, no gradients).
Explicitly excluded: gradients, glows, blue/purple accents, glassmorphism, decoration.
## Design read
A document tool for Hugging Face users, in a flat instrument-panel language,
with dials ENERGY 2 / RHYTHM 1 / MOTION 1.
- ENERGY 2: clear header and one high-contrast primary action, no hero, no landing decoration.
- RHYTHM 1: a single two-panel composition, because the task is one input and one output.
- MOTION 1: hover and focus states only, plus the pulsing status dot while loading.
## Tokens
- Page `#0a0a0b`, panels `#101013`, raised surfaces `#16161a`, code `#0d0d10`. Flat fills only.
- Text `#f4f4f5`, secondary `#a1a1aa`, tertiary `#8e8e96` (both AA on the page background).
- Signature gold `#e8b34c`: the product mark and the selected-state text (tabs, candidate pills).
- Primary action is white (`#fafafa` on `#0a0a0b`), secondary is a ghost with a hairline border.
- Status is semantic and always paired with text: green `#4cc38a` ready, gold busy, red `#f87171` error.
- Type: Inter for reading, JetBrains Mono for labels, counters, metrics and code.
Metrics use tabular numerals.
## Why each decision
- Flat near-black: reading documents needs contrast, not decoration; gradients are banned here.
- White primary action: the highest-contrast element on the page, marking the one key action.
- Gold only on the product mark and the active selection: one identity color, one meaning.
- Mono plus tabular numerals for machine text: counts and metrics stay scannable and stable.
- Two panels: conversion is input to output; they stack on mobile.
- Details tab with run metrics in plain words: route, numbers kept (with the missing list),
coverage, time and candidate count.
- Download button writes the current Markdown to a `pasita-*.md` file; old files are pruned.
- Print stylesheet renders the output black on white and hides the input chrome.
- Status line with real metrics: it proves the faithfulness promise (numbers kept, coverage,
route used) instead of claiming it.
- Green/red/yellow status with text labels: color never carries meaning alone.
- Real controls: Convert, Clear, candidates 1 to 3, deterministic converter. No decorative
element without a function.
## Contrast (WCAG AA)
Computed with the relative-luminance formula:
- `#a1a1aa` on `#0a0a0b`: 8.3:1 (normal text, pass).
- `#8e8e96` on `#0a0a0b`: 6.5:1 (normal text, pass).
- `#e8b34c` on `#0a0a0b`: 9.9:1 (normal text, pass).
- Text `#0a0a0b` on button `#fafafa`: 19.5:1 (pass).
- Focus ring `#e8b34c` on `#0a0a0b`: 9.9:1 (non-text, above 3:1).
## States
- Empty: the output panel shows a marker and the status says READY.
- Loading: the js pre-call flips the status to CONVERTING; Gradio shows minimal progress.
- Error: the status switches to ERROR with the exception type and the output shows the message.
- Keyboard: every control is reachable, `:focus-visible` ring in gold.
## What we do not do
- No gradients, no glows, no blue or purple anywhere.
- No emoji in the UI chrome.
- No fake screenshots, testimonials or invented figures.
- No looping animations (the busy dot is the only exception, with a reduced-motion kill switch).
- No decorative grids or background patterns. |