Live Document Direcție Logo V1 Analiză Logo V2 Design System Demo web
Vol. I · Nr. 05
Faza 05 · Design System

Sistem.
Ceva mai mult decât un brandbook clasic.

Token-uri, componente, motion, reguli. Mașinăria care produce coerență la viteză — pentru echipa de design și pentru orice dezvoltator care construiește pe identitatea Expert-Grup.

Versiune1.0.0 · 2026
ConțineToken-uri · Componente · Iconițe · Charts · Motion
Exporttokens.css · tokens.json
UrmătorFaza 06 · Demo web
01Foundations · tokens 02Cromatică 03Tipografie 04Spațiu & grid 05Iconografie 06Componente 07Date & charts 08Motion 09Imagery 10Voice & tone 11Accesibilitate 12Patterns · pagini
01 · Foundations · Tokens

Tot sistemul pleacă de la 5 categorii de tokens.

Single source of truth: culoare, tipografie, spațiu, radius, shadow. Naming convention --eg-{categorie}-{rol}-{treaptă}. Export-abile în CSS / JSON / Figma styles.

Categorie
Sample
Token
Utilizare
Culoare brand
--eg-color-brand-red
Signal · CTA · accent
Culoare ink
--eg-color-ink
Text default · ink-mode bg
Culoare paper
--eg-color-paper
Background default
Spațiu (8px base)
16px
--eg-space-4
Padding interior · gap card
Radius
--eg-radius-3
Card · button · input
Shadow elevation
--eg-shadow-3
Card hover · floating UI
Motion duration
240ms
--eg-motion-short
Hover · state-change
Motion easing
cubic-bezier(.16,1,.3,1)
--eg-ease-emphasis
Reveal · entrance
Un token bun nu se vede. Doar absența lui se simte — ca o tăcere falsă în muzică.

Cum se folosesc

/* CSS */
@import "tokens.css";

.button {
  background: var(--eg-color-brand-red);
  padding: var(--eg-space-3) var(--eg-space-5);
  border-radius: var(--eg-radius-2);
  transition: transform var(--eg-motion-short) var(--eg-ease-emphasis);
}
02 · Cromatică

Roșu pentru signal. Indigo pentru respiratorul.

Trei nivele de paletă — brand, neutre, semantic — plus un sistem de 6 culori pentru date. Toate combinațiile testate WCAG AA.

Brand & accent

#E80032
Red · brandSignal
#C8102E
Red deepPressed · hover
#2800BA
IndigoGradient end
#F5F4F0
PaperBackground default
#0A0A0F
InkText · dark surface

Ink scale

#0A0A0F
Ink 100Body text
#13131C
Ink 90Surface dark
#1C1C28
Ink 80Border dark
#2A2A33
Ink 70Soft text
#6B6B73
Ink 50Mute · meta
#9A9AA0
Ink 30Disabled

Paper scale

#F5F4F0
Paper 0Default bg
#EEEAE0
Paper 10Warm surface
#E6E1D2
Paper 20Deep surface
#D8D5CC
RuleBorder default
#ECEAE3
Line softSubtle divider

Semantic · feedback

#1A7A3F
SuccessConfirmare · pozitiv
#B8730F
WarningAtenție · cuvenit
#C8102E
ErrorEroare · destruction
#1C3AA3
InfoInfo · neutral

Data viz · 6-color editorial palette

data-1
PrimarySignal series
data-2
IndigoCounter series
data-3
InkTotal · agregat
data-4
WarmAuxiliar · context
data-5
GrowthPozitiv · creștere
data-6
NeutralBackground series

Contrast · WCAG AA / AAA

Combinație
Demo
Ratio
AA · 14pt
AAA
Ink pe Paper
Aa Bb 123
17.8 : 1
Pass
Pass
Ink-soft pe Paper
Aa Bb 123
12.2 : 1
Pass
Pass
Red pe Paper
Aa Bb 123
5.6 : 1
Pass
Fail
White pe Red
Aa Bb 123
4.7 : 1
Pass
Fail
Ink-mute pe Paper
Aa Bb 123
4.4 : 1
Pass
Fail

Reguli de aplicare

Roșul nu e fundal de UI

Roșul Expert-Grup e signal, nu surface. Folosit pentru CTA, accent, link, status critic. Niciodată ca background pentru zone mari de conținut.

Indigo doar ca accent secundar

Apare în gradientul mark-ului, în data viz ca counter-series și uneori în pull-quotes. Nu concurează cu roșul ca atenție primară.

Paper-urile se stratifică, nu se mixează

Default → warm pe sectoare → deep pe carduri ridicate. Niciodată trei nivele lipite — păstrează ierarhia clară.

03 · Tipografie

Patru voci,
fiecare cu rol exact.

Figtree pentru titluri și UI. Libre Caslon Text pentru accente editoriale italic. Plus Jakarta Sans pentru body. JetBrains Mono pentru date tehnice.

Type scale · 8 trepte

Treaptă
Figtree (display)
Libre Caslon Text (serif italic)
Specs
display-xl800 / italic 400
Aa
Aa
clamp(56, 8vw, 120)
1.04 / -.035em
display-l700 / italic 400
Argument
Argument
clamp(44, 6.4vw, 84)
1.04 / -.025em
display-m700 / italic 400
Aceeași esență
Aceeași esență
clamp(36, 5vw, 64)
1.06 / -.025em
display-s700 / italic 400
Patru lecturi semantice
Patru lecturi semantice
clamp(28, 3.6vw, 44)
1.1 / -.018em
headline600 / italic 400
Subtitlu de secțiune
Subtitlu de secțiune
clamp(20, 2.4vw, 28)
1.25 / -.012em
body-lJakarta 400 / Caslon italic
Lead paragraph cu impact editorial — folosit pentru intro și deck-uri.
Lead paragraph cu impact editorial — folosit pentru intro și deck-uri.
19px
1.5 / 0
bodyJakarta 400 / Caslon italic
Running text default. Citibil pe toate dispozitivele, optimizat pentru articole lungi.
Running text default. Citibil pe toate dispozitivele, optimizat pentru articole lungi.
17px
1.65 / 0
captionJakarta 500 / Caslon italic
Caption · meta · timestamp
Caption · meta · timestamp
13.5px
1.5 / 0
microJetBrains Mono
EYEBROW · SOURCE · METADATA
— mono only —
11.5px
1.5 / .16em

Pairing · cum se citesc împreună

Notă de politică · 06 mai 2026

Cum afectează inflația gospodăriile vulnerabile din Republica Moldova.

Studiu de caz pe trei segmente sociale, monitorizat trimestrial timp de optsprezece luni.

Indicii armonizați publicați de Biroul Național de Statistică arată o creștere agregată de 3,4% YoY pentru Q1 2026, dar dispersiunea pe quintile dezvăluie o realitate fragmentată — gospodăriile din quintila inferioară simt presiunea de aproape două ori mai mare decât cele din quintila superioară.

PIB Q1 2026 · +3,4% YoY · sursă: BNS · actualizat 12 mai

Reguli optice

Kerning manual la pereche

Pentru wordmark-uri și titluri mari, perechile e·r, u·p, diagonală + curbă primesc strângere optică de la –10 la –25 mils.

Maximum 65 caractere/linie

Body text se constrânge la max-width:62ch pentru lectură confortabilă. Sub 45 sau peste 80 — efort cognitiv crescut.

Fără orfani

În titluri — folosește non-breaking space ( ) între ultimele două cuvinte ca să eviți un cuvânt singur pe rândul final.

04 · Spațiu & grid

8px-base scale. Zero valori arbitrare.

12 trepte de spațiu, fiecare un multiplu vizibil al base-ului. Container 1180px (text) / 1280px (wide). Grid 12 coloane, gutter 24px.

Spacing scale

--eg-space-1
4px
--eg-space-2
8px
--eg-space-3
12px
--eg-space-4
16px
--eg-space-5
24px
--eg-space-6
32px
--eg-space-7
48px
--eg-space-8
64px
--eg-space-9
96px
--eg-space-10
128px
--eg-space-11
160px

Containere · breakpoints

Narrow

760px — articole, longform, lectură concentrată.

Default

1180px — pagini standard, listing, dashboard.

Wide

1280px — landing pages, hero, prezentări.

Breakpoints

Mobile

≤ 640px
1 col, gutter 16px

Tablet

641–900px
6 col, gutter 20px

Desktop

901–1200px
12 col, gutter 24px

Wide

≥ 1440px
12 col, gutter 32px

05 · Iconografie

Set complet · fidel din Figma.

Toate iconițele exportate direct din file-ul Figma Expert-Grup — line, accent roșu localizat. Path-uri verbatim, color via currentColor. Total: 60 iconițe.

Activitate · 5 iconițe

news
event
projects
charts
press

Publicații · 9 domenii

rural
energy
europe
labor
growth
consumer
social
finance
other

Procurări și angajări · 4 iconițe

procurement
hiring
competition
grants

Despre noi · 7 iconițe

mission
activities
team
council
annual
audit
press room

Set extins · 14 iconițe

research
quality
verified
budget
speaker
stakeholders
support
trade
trends
eu doc
pie
location heart
idea
network

Acțiuni articol · 3 iconițe

print
share
link

Social · 4 iconițe

facebook
twitter / X
linkedin
youtube

UI · 18 iconițe standard

search
arrow right
arrow ↗
chevron
close
menu
check
plus
external
download
mail
phone
globe
pin
clock
tag
info
warning
success
sitemap
Reguli de utilizare

Niciodată plin (filled). Niciodată color-fill complet. Mereu line. Stroke 1.5px. Accentul roșu se aplică doar pe elementul semantic-cheie (verbul), nu pe întreg corpul iconului. Folosește <svg><use href="#i-name"/></svg> și controlează culoarea cu color.

06 · Componente

UI library · build-blocks consistente.

Buttons, links, tags, inputs, cards, navigation, feedback. Toate construite din token-uri, fără valori arbitrare.

Buttons · variante

Citește analiza Vezi sistemul Înapoi

Sizes

Small Medium Large Disabled

Tags · badges

Default Live Info Published Draft Square 2026 Notă de politică

Inputs · forms

Te abonăm la newsletter-ul lunar.
Adresa de email nu e validă.

Cards · variations

Notă de politică

Cum afectează inflația gospodăriile vulnerabile.

Studiu pe trei segmente sociale, monitorizat trimestrial timp de 18 luni.

PIB · Q1 2026 +3,4% ↑ 0,8 puncte vs. Q4 Sursă: BNS · 12 mai
Șomaj · Q1 2026 4,1% ↓ 0,3 puncte vs. Q4 Sursă: BNS · 12 mai

Feedback · alerts

Versiune nouă disponibilă

Raportul Q1 2026 a fost publicat. Versiunea anterioară rămâne arhivată în secțiunea istoric.

Abonare confirmată

Vei primi newsletter-ul lunar la nume@expert-grup.org.

Date provizorii

Indicatorii Q1 2026 sunt preliminari. Versiunea finală va fi publicată pe 31 iulie.

Eroare de încărcare

Nu am putut încărca documentul. Verifică conexiunea sau încearcă din nou.

Tabs · navigation

Accordion / disclosure

Cum se folosesc token-urile în Figma?
Importă tokens.json ca Tokens Studio variables. Stilurile de bază (color, type) sunt mapate automat la Figma styles.
Pot personaliza paleta pentru un sub-brand?
Da — definește un set de override-uri pe [data-theme="sub"]. Vezi exemplul de dark theme în tokens.css.
Cum import iconițele într-un proiect React?
Copiază sprite-ul din 05-design-system.html ca fișier separat și inline-l în _app.tsx. Folosește componenta <Icon name="news"/>.
07 · Date & charts

Datele sunt protagoniste, nu decor.

Pentru un think tank, vizualizarea datelor e produsul. Stiluri editoriale (FT-like): grid subtil, axe mut, anotări serif italic, sursă obligatorie.

Stat blocks

PIB Q1 2026+3,4%↑ vs Q4BNS
Inflație CORE5,1%↓ 0,2 puncteBNM
Șomaj4,1%↑ 0,1 puncteBNS
Curs MDL/EUR19,42↓ –1,2%BNM

Bar chart · comparativ

PIB · creștere YoY pe quintile de venit, Q1 2026
Quintila inferioară simte presiunea inflației aproape dublu față de cea superioară.
8% 6% 4% 2% 0% 7,2% 6,0% 4,4% 3,2% 2,0% Q1 Q2 Q3 Q4 Q5 — quintila inferioară
Sursă: BNS · Sondaj bugete familii Q1 2026 · n=4824

Line chart · trend temporal

Inflație · evoluție trimestrială
Inflația core vs. inflația agregată, ultimii 8 trimestri.
12% 9% 6% 3% 0% Q1·24 Q3·24 Q1·25 Q3·25 Q1·26 — vârf inflație 3,4% agregat 5,1% core
Sursă: BNS · BNM · seria armonizată · actualizat 12 mai 2026

Donut chart · distribuție

Surse de venit · gospodării din quintila inferioară
Q1 2026, % din venitul total mediu.
  • Salarii42%
  • Pensii și alocații31%
  • Remitențe15%
  • Antreprenoriat8%
  • Altele4%
42% SALARII
Sursă: BNS · CBGC · n=4824 gospodării

Tabel de raport

IndicatorQ4 2025Q1 2026Δ YoYSursă
PIB · creștere reală2,6%3,4%+0,8BNS
Inflație · agregat7,2%6,4%−0,8BNM
Inflație · core5,3%5,1%−0,2BNM
Șomaj4,2%4,1%−0,1BNS
Salariu mediu net11.42811.890+462BNS
Curs MDL/EUR (mediu)19,6719,42−0,25BNM
08 · Motion

Mișcarea servește înțelegerea, nu spectacolul.

5 durate, 4 easings, reguli stricte: doar transformations (transform/opacity), nu top/left. Reduce-motion respectat universal.

Durate

Micro

120ms
Hover, color change

Short

240ms
State change, micro-interaction

Medium

480ms
Modal, dropdown

Long

800ms
Reveal, page transition

Cinematic

1200ms
Hero entrance

Easings · live demos (click pentru replay)

cubic-bezier(.4, 0, .2, 1)
Standard · default
cubic-bezier(.16, 1, .3, 1)
Emphasis · entrance
cubic-bezier(0, 0, .2, 1)
Decelerate · arriving
cubic-bezier(.4, 0, 1, 1)
Accelerate · leaving
Reduce-motion

Toate animațiile respectă @media (prefers-reduced-motion: reduce). Mișcările cinematic devin fade-uri instant; tranzițiile micro/short se scurtează la 0ms. Aplicat global, fără opt-in.

09 · Imagery & illustration

Fotografie cu tratament editorial.

Trei tratamente standard: monocrom în mască (hero parallax), duotone roșu (social), paper veil (cover-uri rapport). Fără stock generic.

Monocrom · mask

Hero parallax din 04. Imaginea decupată în silueta mark-ului, grayscale.

Duotone · roșu

Social card · conferință. Multiply pe red brand pentru atmosferă editorială.

Paper veil

Raport cover. Gradient paper de jos pentru lizibilitate text peste imagine.

Reguli

Da

  • · Oameni reali, context Moldova când posibil
  • · Tratament editorial unitar (unul din cele 3)
  • · Sursă vizibilă (caption)
  • · Crop deliberat, nu auto

Nu

  • · Stock photography generic (handshake corporate)
  • · Filter Instagram-style (sepia, vintage)
  • · Imagini fără atribuire
  • · Mai mult de 3 tratamente diferite în aceeași pagină
10 · Voice & tone

Direct. Argumentat. Cifrele înaintea adjectivelor.

Vocea Expert-Grup în UI și editorial. Convenții pentru micro-copy: butoane, erori, formular contact, newsletter, 404.

Da

Citește analiza →

Nu

Click here pentru mai multe informații

Da

PIB-ul a crescut cu 3,4% YoY în Q1 2026.

Nu

Economia Moldovei a avut o evoluție impresionantă în primul trimestru.

Da · 404

Pagina nu există. Verifică linkul sau caută în arhiva noastră.

Nu · 404

Oops! Pare că te-ai rătăcit prin lume...

Da · newsletter

Te abonezi la newsletter-ul lunar — primești rapoartele înainte de publicarea pe site.

Nu · newsletter

Stay tuned! Don't miss our amazing content!

Convenții editoriale

Date

12 mai 2026 (nu 12.05.2026 sau 5/12/26). Ora: 14:30 (24h, nu AM/PM).

Procente

3,4% (virgulă RO, nu punct). Δ YoY: +0,8 puncte.

Cifre mari

11.428 (punct ca separator de mii). 19,42 MDL.

11 · Accesibilitate

WCAG AA peste tot. AAA pe text de body.

Contrast minim AA pe toate combinațiile, AAA pe body-text. Focus styles vizibile, keyboard navigation completă, ARIA aplicat consistent.

Focus styles · ring 3px outset

Link cu focus

Checklist · înainte de release

Visual

  • ☑ Contrast text body ≥ 4.5:1 (AA)
  • ☑ Contrast UI ≥ 3:1 (focus, border)
  • ☑ Focus ring vizibil pe toate surface-urile
  • ☑ Text scalabil până la 200% fără break
  • ☑ Imaginile au atribut alt

Interactiv

  • ☑ Keyboard nav complet (tab order, escape, enter)
  • ☑ Skip link la conținut principal
  • ☑ ARIA labels pe icon-only buttons
  • ☑ ARIA live regions pentru update-uri dinamice
  • ☑ Form errors accesibile (aria-describedby)
Roșul Expert-Grup

#E80032 pe paper trece AA pentru text mare (≥18pt) și UI elements, dar NU AAA pentru body. Folosește roșul ca accent (link-uri, badge-uri, eyebrows), nu ca text de body principal.

12 · Patterns · pagini canonice

Layouts pre-aprobate. Construite din componente.

Mini-mockup-uri pentru paginile cele mai frecvente: notă de politică, raport cover, dashboard de date, profil membru, search.

Article · Notă de politică Container narrow · 760px
Activitate / Note de politică / Inflație Notă de politică

Cum afectează inflația gospodăriile vulnerabile din Republica Moldova.

Studiu de caz pe trei segmente sociale, monitorizat trimestrial timp de optsprezece luni.

06 mai 2026 Adrian Lupușor · Maria Iordan 12 min · 18 surse
Cover · Raport anual / trimestrial Format A4 · 3:4
Expert-Grup · 2026 Vol. XII · Q1
Economia Moldovei în șase indicatori.
Dashboard · Tablou trimestrial Container default · 1180px
PIB+3,4%↑ 0,8
Inflație5,1%↓ 0,2
Șomaj4,1%↑ 0,1
MDL/EUR19,42↓ 1,2
Evoluția PIB · ultimii 8 trimestri
Search & filters · publicații Container default · 1180px
× Note de politică × 2026
Notă de politică · 06 mai 2026

Cum afectează inflația gospodăriile vulnerabile.

Studiu pe trei segmente sociale, monitorizat trimestrial timp de 18 luni.

Brief · 22 aprilie 2026

Inflația core scade pentru al treilea trimestru consecutiv.

Indicii armonizați publicați de BNM confirmă tendința de stabilizare.

Sistemul livrat · Faza 05 · ✓

Mașinăria e gata. Acum o punem la treabă.

Faza 06 demonstrează sistemul în acțiune — o pagină web Expert-Grup construită exclusiv din token-urile, componentele și patternurile de aici. Zero CSS arbitrar.