arcsoft.roARCSoft — Audit de design v1.1 → v2.0
Audit de design · Septembrie 2026 · v1.1 → v2.0

Curat, modern, lizibil — pentru orice vârstă.

Am măsurat fiecare pereche text/fundal, fiecare treaptă tipografică și fiecare țintă tactilă din sistemul v1.1. Logo-ul rămâne neatins. Tot ce urmează sunt ajustări fine de paletă, scală și layout — plus direcția tech/AI pentru pasul următor. Cifrele de contrast din acest document sunt calculate live din token-uri.

Perechi conforme
7 → 12/12
WCAG 2.2, text + non-text
Corp text
17 → 18px
line-height 1.6 → 1.65
Text minim
10 → 14px
citire · 12px doar meta
Ținte tactile
32 → 44px
nav, butoane, chip-uri
01 — Principii

Ce înseamnă „lizibil pentru orice vârstă"

Opt reguli, toate măsurabile. Ele au generat fiecare schimbare din v2.0 și sunt criteriul de acceptare pentru orice ecran viitor.

01
Contrast ≥ 4.5:1 pentru orice text
Inclusiv captions și meta. Nu există „text decorativ" exceptat: dacă se citește, trebuie să fie lizibil.
02
Corp 18px · 1.65 · 60–68 caractere/rând
Sub 16px doar pentru meta; niciodată sub 12px. Rândurile lungi obosesc, cele scurte fragmentează.
03
Ierarhie prin mărime + greutate
Culoarea singură nu poartă sens. Maxim trei niveluri de titlu într-o secțiune, aceleași peste tot.
04
Fără gradient pe text mic
Gradientul are contrast variabil și „vibrează" sub 32px. E rezervat pentru display ≥ 2rem și suprafețe.
05
Ținte ≥ 44px · focus vizibil · link-uri subliniate
Degete, mouse tremurat, tastatură — toate trebuie să nimerească. În text curgător, link-ul se subliniază.
06
Mișcare calmă, niciodată sub text
≤ 0.6s, fără parallax, fără fundaluri care se mișcă în timp ce citești. Respectă prefers-reduced-motion.
07
Fundal liniștit sub coloana de text
Glow-ul ambiental stă la margini, nu trece prin paragraf. Maxim două radiale pe secțiune, pink doar în hero.
08
Precizia e parte din brand
Cifre tabulare, unități explicite, diacritice corecte (ș/ț cu virgulă, nu sedilă). Detaliile se văd.
02 — Culoare & contrast

Aceeași paletă, text mai luminos, umpluturi mai adânci

Nuanțele brandului nu s-au mutat. Am ridicat luminozitatea textului secundar și terțiar, am înlocuit gradientul pe etichete mici cu cyan solid și am adâncit capătul cyan al gradientului folosit ca umplutură sub text alb. Tabelul de mai jos e calculat live; pragul de evaluare se poate schimba din Tweaks.

Pereche
v1.1 — înainte
v2.0 — după
Text principal pe fundal
#F0F0F5 pe #0B0B18 · neschimbat
Aa17.2:1AAA
Aa17.2:1AAA
Text secundar (muted) pe fundal
#9A9ABC → #A9A9C9
Aa7.2:1AAA
Aa8.6:1AAA
Text secundar pe card glass
peste alb .045 · #9A9ABC → #A9A9C9
Aa6.6:1AA
Aa7.9:1AAA
Text terțiar (faint) pe card glass
captions · #6A6A86 → #8A8AAC
Aa3.4:1AA mare
Aa5.4:1AA
Kicker 13px
gradient, capăt #8B5CF6 → solid #22D3EE
Aa4.6:1AA
Aa10.8:1AAA
Alb pe buton — capăt cyan
#06B6D4 → #0E7490
Aa2.4:1FAIL
Aa5.4:1AA
Alb pe buton — capăt violet
#7C3AED · neschimbat
Aa5.7:1AA
Aa5.7:1AA
Light · text secundar pe alb
#55556E · neschimbat
Aa7.2:1AAA
Aa7.2:1AAA
Light · text terțiar pe alb
#84849C → #6B6B85
Aa3.6:1AA mare
Aa5.2:1AA
Light · accent / link pe alb
#6D28D9 · neschimbat
Aa7.1:1AAA
Aa7.1:1AAA
Bordură input (non-text, prag 3:1)
alb .14 → .38 peste fundal
Aa1.4:1FAIL
Aa3.5:1OK
Bordură buton secundar (non-text)
alb .25 → .38
Aa2.2:1FAIL
Aa3.5:1OK
Critic · rezolvat
Butonul principal nu ținea textul alb

Pe capătul cyan (#06B6D4) al gradientului, albul cădea la 2.4:1 — sub orice prag. Soluția păstrează unghiul și violetul brandului, dar adâncește capătul cyan la #0E7490 pentru umpluturi cu text: --arc-gradient-ui. Gradientul viu rămâne pentru suprafețe și display.

înainte · 2.4:1 la dreapta
după · ≥ 5.3:1 peste tot
Major · rezolvat
Textul terțiar și etichetele mici

#6A6A86 ajungea la 3.4:1 pe carduri și era folosit la 10–12px — cel mai greu de citit text din sistem, la cea mai mică dimensiune. Kicker-ele cu gradient la 13px aveau contrast variabil. Acum: terțiar #8A8AAC, kicker solid #22D3EE, gradientul de text începe de la #A78BFA.

caption înainte · #6A6A86caption după · #8A8AAC
03 — Kicker03 — Kicker
muted înainte · #9A9ABCmuted după · #A9A9C9
Bordurile de control trebuie să se vadă

Inputurile (alb .14) și butoanele ghost (alb .25) aveau 1.4–2.1:1 față de fundal — sub pragul 3:1 pentru componente. Introducem --border-control: rgba(255,255,255,.38). Bordurile decorative ale cardurilor rămân subtile (.12): ele nu trebuie „găsite" de nimeni.

.14
.38 ✓
03 — Tipografie

Scală mai strânsă, corp mai mare, trei niveluri fixe

Inter rămâne. Se schimbă proporțiile: display-ul coboară de la 90px la 72px (raport 4× față de corp, nu 5.3×), corpul urcă la 18px, iar subtitlurile — care în v1.1 apăreau în patru mărimi apropiate, toate la 700 — devin trei trepte clare.

Treaptă
v1.1
v2.0
Display
2.8–5.6rem · 800 · -0.03em
2.5–4.5rem (40–72px) · 800 · -0.03em · 1.05
H1
2.35–3rem · 800 · -0.02em
2.25–3rem (36–48px) · 800 · -0.025em · 1.1
H2
1.85–2.35rem · 700
1.75–2.25rem (28–36px) · 700 · -0.02em · 1.2
H3 subtitlu secțiune
1.35 / 1.2rem · 700 (inconsistent)
1.5rem (24px) · 700 · -0.015em · 1.3
H4 titlu card
1.125 / 1.05 / 1rem · 700
1.125rem (18px) · 600 · 0 · 1.4
Lead nou
—
1.25rem (20px) · 400 · 1.55 · max 60ch
Body
1.0625rem (17px) · 1.6
1.125rem (18px) · 400 · 1.65 · 60–68ch
Small
0.9375rem
0.9375rem (15px) · 400 · 1.55
Caption / meta
10–13px (sub prag)
0.875rem (14px) citire · 12px doar meta/mono
Mono nou
ad-hoc
JetBrains Mono · 0.875rem · date, status, cod
Corpul de text, la mărimea din Tweaks
18px · 1.65

ARCSoft livrează software, integrare AI și soluții cloud pentru companii care vor lucruri făcute bine din prima. Explicăm compromisurile în limbaj simplu, ținem promisiunile de termen și scriem cod pe care echipa ta îl poate întreține și peste cinci ani.

Corpul lung folosește #DCDCE8 (≈ 14:1), nu albul de titlu — reduce strălucirea („halation") pe fundal închis, un efect resimțit mai puternic de ochii peste 45 de ani.
Reguli de detaliu
  • Tracking negativ doar peste 20px (-0.03 display, -0.02 H1/H2, -0.01 H3). Sub 20px: 0. Literele lipite obosesc.
  • Greutăți: 400 corp · 600 titluri mici · 700–800 display. Fără 300/500 pe fundal închis.
  • Majuscule doar pe etichete de 1–3 cuvinte, cu +0.08em.
  • Diacritice: subset latin-ext, ș/ț cu virgulă (U+0219 / U+021B).
  • Cifre tabulare în tabele și statistici; text-wrap: pretty pe paragrafe.
04 — Layout & ritm

Mai puțină imbricare, ținte mai mari, un ritm

Grila de 12 coloane la 1200px și scala de 4px erau corecte. Problemele erau de aplicare: sticlă în sticlă, nav de 32px, rânduri prea lungi în lead-uri și carduri flotante care pe mobil acoperă textul.

Un singur nivel de sticlă

Card glass → interior solid (#0B0B18). Glass-în-glass adună două borduri translucide și estompează ambele.

interior solid · contrast păstrat
Ritm vertical fix

96px între secțiuni (64 pe mobil) · 32px între blocuri · 24px padding card · 12–16px între carduri. Nu alte valori.

96 · 64 · 32 · 24 · 16
Măsura rândului

Lead 60–64ch · corp 60–68ch · card 42–52ch. Pentru pagini de text (blog, legal) adăugăm containerul „narrow" de 760px — 1200px lasă rânduri de 110 caractere, de necitit.

Mobil sub 720px

O coloană. Cardurile pereche AI/IT se stivuiesc. Cardurile flotante din hero coboară sub text, la lățime plină — nu se suprapun niciodată peste titlu. Nav 44px, meniu pe toată lățimea.

05 — Direcție tech / AI

Două voci, un semnal, o linie

Brandurile tech mature de azi nu arată „futurist" — arată exacte. Trei mișcări dau ARCSoft acel caracter fără să adauge zgomot: o voce monospațiată pentru tot ce spune sistemul, un semnal verde pentru „viu" și gradientul redus la o linie de 1px acolo unde nu e momentul hero.

Voce duală

Inter pentru oameni. JetBrains Mono pentru sistem: metrici, status, timestamp, cod.

Agent facturare
1.248 req/zi
p95 · 0.41s
2026-09-25 14:02
Semnal live

Un singur verde (#34D399), un punct care pulsează lent, etichetă mono. Limbajul vizual al agentului care lucrează.

activ · procesează
în așteptare
Linia gradient

În afara hero-ului, gradientul devine o linie de 1–2px pe marginea de sus a cardului. Recognoscibil, fără să concureze textul.

Integrare AI
card standard, moment hero păstrat
Un moment gradient / ecran
Titlul hero sau CTA-ul principal — nu ambele. Pink doar în glow-ul din hero.
Un singur set de iconuri
Line, 1.75px, grilă 24 — Lucide sau Font Awesome Regular. Niciodată Solid și Regular amestecate.
Buget de zgomot
Max 2 radiale / secțiune, fără particule, fără blur pe carduri statice. Atmosferă, nu spectacol.
06 — Optimizare web

Rapid, vectorial, adaptiv la preferințele cititorului

Un site 11ty static pornește cu un avantaj. Îl păstrăm: un singur fișier de font, logo vectorial, blur cu buget și trei media queries care fac pagina lizibilă pentru cine are nevoie de mai mult contrast sau mai puțină mișcare.

Fonturi: un fișier, cu diacritice

Inter variabil (un woff2 ≈ 110 KB) în loc de 5 fișiere statice; subset latin + latin-ext pentru ă â î ș ț; font-display: swap + preload. Fără font extern din CDN.

@font-face {
  font-family: "Inter";
  src: url(/fonts/Inter-var.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+2010-2027;
}
Preferințele cititorului

Trei media queries, toate legate de token-uri — nu de componente individuale.

@media (prefers-contrast: more) {
  :root { --text-muted: #C6C6DC;
          --border: rgba(255,255,255,.3); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important;
      transition: none !important; }
}
@media (prefers-color-scheme: light) {
  /* light companion tokens */
}
Logo vectorial, blur cu buget
  • Logo ca SVG exportat din .ai (≈ 5 KB), inline în header. PNG doar în email și social.
  • backdrop-filter doar pe nav-ul sticky și ≤ 2 carduri flotante / viewport. Cardurile statice: tint solid #12122A + bordură.
  • Iconuri SVG inline sau sprite — nu font de iconuri (evită FOIT pe glife).
Imagini & ținte de performanță
  • AVIF/WebP cu width/height setate (zero CLS), loading="lazy" sub fold.
  • content-visibility: auto pe secțiunile lungi; theme-color #0B0B18.
  • Ținte: LCP < 2.0s · CLS < 0.05 · INP < 200ms · Lighthouse Accessibility 100.
07 — Aplicat în v2.0

Ce s-a schimbat în brandbook și în tokens.css

Token-uri
  • --text-muted #9A9ABC → #A9A9C9
  • --text-faint #6A6A86 → #8A8AAC · light #84849C → #6B6B85
  • --arc-gradient-ui nou: 135°, #7C3AED → #0E7490
  • --arc-gradient-text nou: #A78BFA → #22D3EE, doar ≥ 2rem
  • --border-control nou: alb .38 · --border .11 → .12
  • --fs-display max 5.6 → 4.5rem · --fs-body 1.0625 → 1.125rem · --fs-caption 0.8125 → 0.875rem
  • --font-mono, --signal-live, bloc prefers-contrast
Brandbook v2.0
  • Kicker-e solide, gradient de text pornind din #A78BFA
  • Toate butoanele cu text alb pe --arc-gradient-ui; borduri de control .38
  • Lead 18px / 1.65 / 64ch; display plafonat la 72px
  • Subtitluri normalizate: H3 1.5rem/700 · H4 1.125rem/600
  • Podea de 14px pentru text de citire, 12px pentru meta/mono
  • Nav 44px, sidebar scrollabil; text-wrap: pretty pe paragrafe
  • Matrice de contrast recalculată; tabele cu --text-faint și --border-control
  • Cap. 4: „voce duală" Inter + Mono · Cap. 10 nou: Web implementation