A precise system for ARCSoft.
An evolved, modern-clean expression of the ARCSoft identity — dark-first, gradient-led, built on disciplined tokens. This document doubles as a living style guide rendered in the actual system.
Brand essence
ARCSoft is an engineering partner that turns ambiguity into shipped software. The brand should feel like the team behind it: technically deep, exact in its details, modern in its tools, and genuinely approachable in conversation.
Senior by default. We speak from depth, not hype — and we can prove it in code.
Details are the product. Naming, spacing, contracts, edge cases — all handled.
Current stack, AI-native thinking, clean interfaces. We build for the next decade.
No jargon walls. We explain trade-offs plainly and stay easy to work with.
- EN: "We'll integrate the AI agent into your existing flow — no rebuild needed."
- RO: "Integrăm agentul AI în fluxul tău actual — fără să reconstruim nimic."
- DE: "Wir integrieren den KI-Agenten in Ihren bestehenden Ablauf — ohne Neuaufbau."
- Confident, specific, second person. Lead with the outcome.
- EN: "We leverage synergistic next-gen paradigms to disrupt your vertical."
- RO: "Valorificăm paradigme sinergice de ultimă generație."
- DE: "Wir nutzen synergetische Next-Gen-Paradigmen für Ihre Vertical-Disruption."
- Buzzwords, vague superlatives, hype without proof.
Per „tu" — direct, cald, profesionist. Diacritice obligatorii. Evită calcurile din engleză.
"You", plain and active. Short sentences. Technical terms stay precise, never dumbed down.
Formal „Sie", întotdeauna — piața DACH așteaptă registru profesional. Precis, fără anglicisme inutile.
Aceeași voce și când ceva nu merge: spune ce s-a întâmplat, ce facem, ce poate face utilizatorul. Fără umor forțat, fără vină.
EN: "Couldn't save. Retrying automatically — your data is safe."
DE: „Speichern fehlgeschlagen. Wir versuchen es automatisch erneut — Ihre Daten sind sicher."
EN: "No projects yet. Create your first — it takes a minute."
DE: „Noch keine Projekte. Erstellen Sie Ihr erstes — es dauert eine Minute."
Logo
The ARCSoft logo is fixed. Use only the supplied vector files — never redraw, recolor or rebuild it. The gradient wordmark carries the brand; the arc beneath it is a permanent part of the mark, not decoration.
Keep clear space on all sides equal to the cap-height of the “A” in ARC. Nothing — text, edges, other logos — enters this zone.
Below these widths the arc and gradient lose legibility.
Logo partener la înălțime optică egală cu „ARC", separat de un divider de 1px la 2× clear space. ARCSoft stă mereu primul în materialele proprii.
NTT DATA
Din lockup-ul pătrat. Safe area 12%; sub 32px arcul se simplifică la o singură linie.
Color
Violet and cyan are the brand. The 135° gradient between them is the single signature moment — used with discipline: one hero gradient per screen, never as wallpaper. Pink exists only as faint ambient glow, never as a fill or text colour.
Layer soft radials over the base at 10–18% opacity. Keep it subtle — atmosphere, not spotlight.
background: radial-gradient(60% 60% at 12% 8%, rgba(124,58,237,.18), transparent 70%), radial-gradient(55% 55% at 88% 92%, rgba(6,182,212,.15), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(236,72,153,.10), transparent 70%), #0B0B18;
WCAG 2.2, computed from the v2.0 tokens. Every text pair passes AA; body pairs reach AAA.
Pentru grafice și dashboard-uri: serii categorice derivate din violet→cyan, plus semantice. Maxim 5 serii pe un grafic; pink rămâne interzis ca serie.
Typography
One typeface — Inter, self-hosted, weights 400–800. Display headings go heavy and tight, capped at 72px; body sits at 18px / 1.65 line-height, 60–68 characters per line — comfortable for every age. JetBrains Mono is the second voice: everything the system says. Fluid clamp() sizing scales smoothly from mobile to desktop.
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Inter speaks for people. Mono speaks for the system: metrics, status, timestamps, tokens, code. 0.875rem, weight 400–500, never for sentences.
● activ · 2026-09-25 14:02
- Negative tracking only above 20px; 0 below.
- Gradient text only ≥ 2rem — labels are solid cyan.
- Long paragraphs use #DCDCE8, not heading white (less halation).
- Reading text never below 14px; 12px only for mono/meta.
- latin-ext subset: ș / ț with comma below (U+0219 / U+021B).
Layout & grid
A 1200px max container with 24px gutters on a 12-column grid. Vertical rhythm comes from a 4px-based spacing scale; sections breathe at 96–128px. Radii are consistent and few.
4px base · multiplicative steps.
Few, consistent corners.
Components
The building blocks of every ARCSoft surface. Glassmorphism stays crisp — slightly higher-contrast borders, one consistent elevation scale. Hover the live examples to feel the motion.
Agenți AI integrați în fluxurile tale existente — automatizare, asistență, analiză. AI agents wired into your existing workflows.
Infrastructură cloud, mentenanță și suport proactiv pentru echipa ta. Reliable cloud & managed IT support.
pentru tine
Iconography & imagery
Line icons, consistent stroke. Imagery sits behind a dark veil so the gradient and text stay dominant. Client logos always knock out to a single tint — never their native colours on dark.
Line icons only — Lucide, or Font Awesome Regular (never mixed with Solid) · 1.75px stroke · 24px grid · rounded joins.
Photos sit under a dark-to-transparent veil; gradient stays the focal point.
Trei categorii permise, în această ordine de preferință. Fără stock generic cu oameni dând mâna, fără ilustrații 3D cu roboți.
All partner logos render as a single white tint at ~55% opacity, lifting to 100% on hover. Uniform height, optically balanced.
Motion
Motion is quiet and purposeful: a 0.3s default for interactions, 0.6s for scroll reveals. Elements fade up, never bounce. Everything collapses gracefully under prefers-reduced-motion.
The signature entrance — 16px rise + fade, 0.6s.
prefers-reduced-motion: reduce is set, disable transforms and marquees — content appears instantly, fully legible. Never gate meaning behind animation.Applications
The system, assembled. Dark surfaces for product and web; the light companion for documents and proposals. Every example is built from the tokens above.
HIRING
arcsoft.ro · Sibiu, România
Web implementation
How the system ships on arcsoft.ro: one variable font with Romanian diacritics, a vector logo, a strict budget for blur and glow, and the three media queries that keep the site legible for readers who need more contrast or less motion.
Inter variable (single woff2 ≈ 110 KB) replaces five static weights. Subset latin + latin-ext for ă â î ș ț. font-display: swap + preload, self-hosted — no CDN fonts.
@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;
}
Bound to tokens, not to components — one block covers the whole site.
@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 (max-width: 720px) {
:root { --section-gap: 64px; }
}
- Logo as SVG exported from the .ai (≈ 5 KB), inline in the header. PNG only for email and social.
backdrop-filteronly on the sticky nav and ≤ 2 floating cards per viewport. Static cards: solid tint #12122A + border.- Inline SVG icons or a sprite — no icon font.
- Max 2 ambient radials per section; pink only in the hero.
- 44 × 44 px targets;
:focus-visiblering 2px cyan, 3px offset; skip link; underlined links inside body text. - AVIF/WebP with width/height set (zero CLS),
loading="lazy"below the fold. content-visibility: autoon long sections;theme-color#0B0B18.- Targets: LCP < 2.0s · CLS < 0.05 · INP < 200ms · Lighthouse Accessibility 100.
Site components — arcsoft.ro
Every section and component found on the live site — home, the AI / IT service hubs, the offer form, Tehnologii and Portofoliu — rebuilt in v2 tokens with anatomy, states and rules. Together with chapter 6 this is the complete kit for arcsoft.ro. A second crawl added Contact, Despre Noi, the Servicii hub and the service detail pages; only 404 remains to confirm.
Diferența dintre un POC și un sistem AI care produce valoare reală e în detaliile de integrare, în datele pe care le folosești și în cum măsori impactul.
Toate soluțiile sunt găzduite în UE, conforme GDPR și auditabile.
34 clients, mixed PNG/JPG in native colours today. Two allowed treatments — group by treatment, never mix in one row. Tiles 3:2, logo sized to equal optical weight (~55% of tile width), 8-column grid on desktop, 3 on mobile.
- Sediu
- Sibiu, România
- office@arcsoft.ro
- Website
- arcsoft.ro
- Program
- Lun–Vin · 09:00–18:00 EET
ARCSoft livrează servicii IT profesionale, orientate spre rezultate de business, cu accent pe soluții robuste, scalabile și aplicabile în lumea reală.
- ✓Strategii IT adaptate obiectivelor de business
- ✓Procese transparente și comunicare clară
- ✓Focus pe rezultate măsurabile
- Agile — livrare rapidă, adaptare continuă
- Robust — arhitectură solidă, orientată spre calitate
- Responsive — răspuns rapid la nevoile clientului
- Cost-Effective — valoare maximă la investiție optimă
Un agent AI nu este doar un chatbot — este un coleg digital, cu personalitate clară, memorie persistentă și skill-uri specializate.
- ✓Memorie persistentă: short-term + long-term recall
- ✓Deploy multi-canal: Telegram, Slack, WhatsApp, Web
- ✓Guardrails, politici de siguranță și audit
- Experiență — 20+ ani de infrastructuri diverse, de la startup la enterprise
- Proactivitate — monitorizăm, prevenim, optimizăm
- Transparență — SLA-uri clare, rapoarte lunare, fără surprize
- Local — echipă în Sibiu, intervenție on-site când e nevoie
- 01Header
- 02Hero + stats + mini-cards
- 03Value-chip marquee
- 04Section header
- 05Paired panels AI / IT
- 06Quote-CTA cards
- 07Final CTA band
- 08Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Service group AI (3 cards + CTA)
- 04Service group IT (3 cards + CTA)
- 05Final CTA band
- 06Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Intro prose
- 04Service cards ×3
- 05Quote-CTA card
- 06Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Prose + checklist + image
- 04Feature tiles ×6
- 05Process steps ×5
- 06Reasons list
- 07Related services + trust callout
- 08One CTA band (offer + contact)
- 09Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Form (2 col ≥ 720px)
- 04Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Category cards ×5
- 04Final CTA band
- 05Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Logo grid (34)
- 04Final CTA band
- 05Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Feature rows ×4 (alternating)
- 04Final CTA band
- 05Footer
- 01Header
- 02Page hero + breadcrumbs
- 03Contact form + company card
- 04Footer
- 01Header
- 02404 block (ch. 11)
- 03Footer
Token sheet
Drop-in :root block. The full file — including the light-theme companion and accessibility notes — ships alongside this document as tokens.css.
Guvernanță & versionare
- Sursa de adevăr: acest document +
tokens.css. Orice valoare hard-codată în afara tokens e bug. - Excepții: se aprobă de owner-ul de brand, se documentează aici, altfel nu există.
- Logo & naming: nu admit excepții. Niciodată.
- Review: brandbook-ul se revizuiește la 6 luni sau la orice schimbare de serviciu major.