Fundal & suprafețe
--fc-bg
--fc-surface-alt
Folosite pentru background general, carduri și secțiuni întregi.
FIRACODE DESIGN SYSTEM
Obsidian UI pentru cod & business
Ghidul de design firaCODE pentru pagini, componente și micro-interacțiuni. Tot ce îți trebuie ca să păstrezi același look & feel, indiferent cine pune mâna pe cod.
Obsidian dark theme
Glassmorphism ready
Fira Code inside
TOKENS & FUNDAMENTALS
Paleta Obsidian & variabile globale
Toate paginile firaCODE pornesc de la același set de variabile CSS. Nu umblăm la culori „după feeling”.
Fundalurile folosesc nuanțe foarte închise de albastru petrol (#020617, #0b1120), cu accente cyan și lime pentru a evidenția elementele importante.
Când creezi ceva nou (card, componentă, secțiune), folosește tokens, nu coduri hex scrise direct.
PALETĂ
Culori principale & semantic
Culorile sunt orientate spre lizibilitate pe dark mode, nu spre „neon show”. Accentul rămâne pe conținut și structură.
Accente & highlight
--fc-accent
--fc-accent-alt
Butoane primare, highlights în titluri, mici elemente UI.
Semantic & status
--fc-success
--fc-warning
--fc-danger
Pentru mesaje de succes, atenționări și erori.
TIPOGRAFIE
Scale pentru titluri & text
Folosim un singur font de bază, cu scale simple. Pentru elemente de cod și accente tehnice, intră în scenă Fira Code.
Titlu secțiune (H2)
font-size: var(--fc-font-lg);
Subtitlu / lead (H3)
font-size: var(--fc-font-md);
Text de bază, paragraf
font-size: var(--fc-font-base);
COMPONENTE DE BAZĂ
Butoane, carduri & micro-interacțiuni
Componentele principale de pe site: butoane, carduri de servicii, carduri de portofoliu și pași de proces.
Butoane
Clase principale:
.fc-btn.fc-btn--primary
.fc-btn.fc-btn--ghost
.fc-btn.fc-btn--outline
Card servicii
Folosit pe paginile de servicii, homepage, portofoliu. Respectă layout-ul .fc-service-card.
web development
Site-uri & magazine online
WordPress, WooCommerce și teme custom, optimizate pentru viteză și claritate.
Card portofoliu
Folosit pe /portofoliu, dar și ca highlight de caz în alte pagini.
ElectroVerde – platformă PV
Re-arhitecturare site, pagini de servicii clare, integrare formulare de ofertare.
+45% cereri de ofertă
EDITOR STACK
De la Fira Code la firaCODE
Numele agenției vine din editor, nu din brainstorm în PowerPoint.
Fontul Fira Code folosește ligaturi pentru secvențe precum ->, <=, //. Creierul le percepe ca un singur simbol, deși în cod sunt mai multe caractere. Codul devine mai ușor de scanat.
firaCODE aplică aceeași idee la nivel de business: luăm multe bucăți dispersate (site, SEO, automatizări, raportare) și le transformăm într-un singur sistem coerent.
GLASS & MOTION
Glassmorphism & interacțiuni moderne
Clasele de glassmorphism sunt opționale, dar pregătite pentru secțiuni speciale: hero, CTA, card-uri „premium”.
.fc-card--glass
Adaugă blur, transparență și un border subtil pentru cardurile de highlight.
.fc-cta-card--glass
Variantă de CTA cu glass – se poate aplica peste gradientul existent pentru un look și mai modern.
Motion & easing
Toate cardurile și butoanele folosesc var(--fc-ease-snap) și var(--fc-duration-normal) pentru hover.
REGULI DE FOLOSIRE
Când știm că e „firaCODE style”
Câteva repere simple ca să nu ne trezim cu pagini care arată ca alt site, doar cu logo-ul nostru.
01
Folosește tokens
Culorile și radii vin din :root. Dacă ai nevoie de o nuanță nouă, o adaugi întâi în tokens.
02
Menține grilele
Pentru layout-uri noi, pornește de la .fc-grid-2, .fc-grid-3 sau .fc-grid-4.
03
Dark calm
Fundalurile rămân întunecate, cu accente cyan/lime dozate. Nu transformăm fiecare card într-o reclamă la LED-uri RGB.
04
Copy tehnic, dar uman
Ne place Fira Code, dar scriem pentru oameni reali. Fără jargon inutil.