Elenxia

Taken from the running app

• Every component on this page is the QA app's own markup, cut from the running screens, with its own compiled stylesheet (components.css: Tailwind v4 + the app's base styles, unchanged). Only the words are made general; nothing is redrawn.
• The ground is the app's own bg (#0b0a1a in dark): regions are transparent on it, never cards. Edges are rings and inset shadows; the few framed tiles (figures, a run's cards) are the app's own.
• Dark is the .dark class on <html>; right-to-left is dir="rtl".
• Meters have needles (the VU meters 90°, the score dial 180°), status lights are 7px dots with a 5px glow that blink, and the team is real photos on rings — exactly as in the app.

Voice and content

• Name things by what people recognize, not by how the system works: "Notifications", not "Webhook config".
• Buttons say exactly what happens: "Save changes", "Send invite", "Delete". The result says the same thing back: "Changes saved".
• Short, plain words and one action at a time: "Enter their email and choose what they can do."
• Confirm only what really happened: a toast appears for a real outcome, never for an attempt.
• Errors say what went wrong and what to do next, in one line: "Wrong code — 4 tries left", "The connection dropped at 18 of 42 files", then a way forward (Try again, Use another way).
• Second person, sentence case, no emoji, no exclamation marks. A status word sits beside every colour.
• Two languages, equal. Every string exists in English and Persian. Persian sets dir="rtl" on <html>; emails, links and codes stay left-to-right (.ltr or dir="ltr"). In Persian, eyebrows and chips drop uppercase and letter-spacing, digits use the Persian locale, and a dot separator is drawn rather than typed, because "·" next to a digit reads as zero.

Colour

• Dark is the default theme, light the alternative. Put bg on the page, ink for text, muted for secondary text. surface and surface-2 are quiet fills, not cards.
• violet is the only brand hue in the UI. Use it for the main action's ring, the current navigation item, focus outlines, selection, progress and reached steps. indigo only joins it in the progress gradient. cosmic, deep and space are the deep brand steps for marketing and share images.
• In dark, violet text is 3.9:1 on bg: use it at 14px medium or larger (button labels, active links), not for small body copy.
• State colours always come with a word. success, warning and error (with their -solid and -foreground) for chips and messages. Status lamps use lamp-online, lamp-warn and lamp-offline; offline is orange, never red. Priority uses sev-s0 to sev-s2. Workflow statuses use the colour-blind-checked fs-* set.
• Categorical hues (spec-*) tell people, groups or services apart, for example an avatar's ring or a chart's slice.
• warning is never text in light (2.1:1); use warning-foreground there.

Type

• Set text in sans: Inter Variable, with Vazirmatn Variable covering Persian glyph by glyph. Set titles, the brand name and big numbers in display: Space Grotesk 500–700 with 0.02em letter-spacing (normal in Persian). Codes and logs go in mono.
• The scale is shifted one step down. Body text is 14px (body), small text 12px (body-sm), labels 11px (label). Most of the UI lives at 11–14px.
• Styles: display-hero, display-title (dialog title), popup-title, body, body-sm, label (field labels and section heads, muted), eyebrow (uppercase, 0.18em), chip, menu-label, display-number and mono (both with tabular figures).

Shape, edges and depth

• Borders are switched off globally (* { border-style: none !important }). Draw every edge as a ring or an inset box-shadow (hairline line, or ink at 14–45%). Only .keep-border opts back in.
• Radii: radius-full for every button, chip, pill, toggle and lamp; radius-xl for tiles, dialogs, menus and toasts; radius-glass for glass fields and option tiles; radius-lg for inputs and rows; radius-card (2px) for flat cards.
• Glass is the depth. Dialogs and drawers use blur-modal and shadow-modal over a light scrim, and the page behind blurs (blur-page). Menus and the navigation pill use blur-menu and shadow-menu. Write -webkit-backdrop-filter before backdrop-filter, or some production builds drop the blur.
• Spacing follows a 4px scale: space-2 between siblings, space-3/space-4 inside controls and tiles, space-6/space-8 around dialogs and pages. Pages are at most 1280px wide with a 16px gutter (24px on larger screens).
• Layers: z-topband < z-nav < z-drawer < z-menu < z-search < z-lightbox.

Controls

• Buttons are hollow and ringed, never filled. The one main action has a 2px violet ring; every other action a 1px line ring with muted text; danger a 2px error ring. Anything clickable is a button, never bare text. One main action per view.
• Focus is a solid 2px violet outline, offset 1px, on every control in both themes.
• Status is shown with a Chip or a StatusLamp and its word. Progress uses the 6px ProgressBar with the number beside it.

Layout rules

• Nothing moves when you switch. Changing a step, tab or mode never resizes, rescales or shifts anything: reserve the tallest state's height.
• Working screens fit without scrolling at 100%, 120% and 150% browser zoom: compact first, then scale. Check at about 1215×580 CSS pixels as well as full width.
• Dashboards are a grid of transparent tiles (Bento); each tile opens its detail in a dialog.
• Live-activity animations run while the activity is live, even when reduced motion is on, and stop when it ends. Everything else respects prefers-reduced-motion.

Motion

• Fields and options: 120ms ease. Fades: 420ms ease-out with a 3px rise. Status lamps ping every 1.4s. Toasts live 8s, at most 4 on screen.
• Springs: tiles stiffness 100 / damping 10 with a 0.1s stagger; the navigation pill stiffness 250–300 / damping 18–20.

Iconography

• lucide icons, 16px, stroke 2, currentColor. Arrows and chevrons mirror in right-to-left layouts.
• No emoji in the UI. Charts, image annotations (mark-now, mark-should, mark-info) and badges are drawn as inline SVG.

Code

• Component classes start with el-; their colours and sizes come from the tokens (var(--violet), var(--radius-xl) …), so a theme switch changes everything at once.

Logo

There is no logo file yet. Set the product name in the display face until a mark exists.