Elenxia

Voice and content

• Scan, never test. Visible copy says scan / اسکن and rescan; never test / تست. Screenshots are Screenshots / اسکرین‌شات, never Evidence. Stage 9 is Fix prompt.
• Short, plain words and one action at a time: "Type its address and the scan starts right away." "Start scan", "Save without scan", "Copy prompt", "I made the change", "Check again".
• Say the result the server confirmed: a toast appears only for a real outcome ("shop.example.com is verified"), never for an attempt.
• Failures say what happened and what to do: "We couldn't detect the change yet." followed by Check again and Try another way.
• Developer strings are rewritten plainly; severity codes always sit next to a word ("S0 · Critical").
• Second person, sentence case, no emoji, no exclamation marks.
• Two languages, equal. Every string exists in English and Persian (fa is type-checked against en). Persian sets dir="rtl" on <html>; URLs, emails and codes stay left-to-right with .ltr or dir="ltr". In Persian, eyebrows and chips drop uppercase and letter-spacing, digits are formatted with fa-IR, and the dot separator is drawn (Sep), because "·" next to a digit reads as zero.

Colour

• Dark is the default theme; light is the alternative (stored as qa-theme). 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 CTA ring, the current nav item, focus outlines, selection, progress and reached stage lines. indigo only joins it in the progress gradient. cosmic, deep and space are the brand's deep 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. Use success, warning and error (plus their -solid and -foreground) for chips and messages. Lamps use lamp-online, lamp-warn and lamp-offline; offline and failed steps are orange, never red. Severity uses sev-s0–sev-s2. Finding states use the colour-blind-checked fs-* set.
• Each specialist has a fixed hue (spec-functional … spec-infrastructure), used for its avatar ring and its slice of a chart.
• 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 letter-spacing 0.02em (normal in Persian). Codes and terminal lines go in mono.
• The scale is shifted one step down. text-base is 14px (body), text-sm 12px (body-sm), text-xs 11px (label). Most of the UI lives at 11–14px.
• Styles in use: display-hero (home h1), display-title (modal title), popup-title, body, body-sm, label (field labels and section heads, in muted), eyebrow (uppercase, 0.18em), chip, menu-label, display-number and mono (both with tabular-nums).

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 bento tiles, pop-ups, menus and toasts; radius-glass for glass fields and choices; radius-lg for inputs and rows; radius-card (2px) for flat cards.
• Glass is the depth. Pop-ups, modals and drawers use blur-modal + shadow-modal over a light scrim, and the page behind blurs (blur-page). Menus and the nav pill use blur-menu + shadow-menu. Always write -webkit-backdrop-filter before backdrop-filter, or the production build drops the blur.
• Spacing follows the 4px Tailwind scale: space-2 between siblings, space-3/space-4 inside controls and tiles, space-6/space-8 around pop-ups and pages. Pages are max-w-7xl with a 16px gutter (24px from md).
• 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 uses the CTA ring (2px violet); every other action uses the neutral ring (1px line, muted text); danger uses a 2px error ring. Anything clickable is a button, never bare text. Only one CTA per view.
• Focus is a solid 2px violet outline offset by 1px on every control, in both themes.
• Status is shown with a Chip or a StatusLamp plus 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.
• No page scroll on the project and scan screens at 100%, 120% and 150% browser zoom. Compact first, then scale. Always check at about 1215×580 CSS px as well as full width.
• The project screen is six transparent bento tiles plus pop-ups (?panel=). Home (/home) is the address bar plus the projects table, with cards available as a second view.
• Live-scan animations run while a scan is live, even when reduced motion is on, and stop when it ends. Everything else respects prefers-reduced-motion.

Motion

• Fields and choices: 120ms ease. Fades: 420ms ease-out with a 3px rise. Lamps ping every 1.4s. Toasts live 8s, with at most 4 on screen.
• framer-motion springs: bento tiles stiffness 100 / damping 10 with a 0.1s stagger; the nav pill stiffness 250–300 / damping 18–20.

Iconography

• lucide-react, 16px (h-4 w-4), stroke 2, currentColor. Arrows and chevrons mirror in RTL. The previews here draw a few lucide shapes inline.
• No emoji in the UI. Charts, screenshot marks (mark-now, mark-should, mark-info), the world map and the verify badge are custom inline SVG.

Logo

There is no logo file in either codebase. The header sets the name "FEC QA Intelligence" in the display face; the sign-in screen draws an animated "QA" outline in WebGL. Until a real mark exists, set the name in plain type.