Background
#FAFAF7
Suprafata principala — homepage, articole.
Publication / Style Guide
Colophon - Tehnologii si Design SecureNET
Despre paleta, tipografia si componentele care formeaza identitatea editoriala SecureNET.
Un colofon e pagina in care o publicatie isi declara materialele: ce fonturi foloseste, ce culori, ce componente. Il tinem public din acelasi motiv pentru care publicam configuratiile din articole. Daca cineva vrea sa vada cum e construit site-ul, nu are de ce sa ghiceasca. Paleta si tipografia de mai jos sunt exact valorile din cod, nu o reprezentare aproximativa.
01 / Colors
Paleta editoriala
Paper
#F5F4ED
Carduri, sectiuni cu elevatie subtila.
Ink (foreground)
#0A0A0A
Text principal, titluri serif.
Ink secondary
#56544E
Body secundar, metadata, captions.
Editorial Terracotta
#8A3216
Text de accent, linkuri, dropcap, focus ring.
Editorial Accent
#C2410C
Accent / suprafete pline / CTA primar.
Editorial Red
#DC2626
Avertismente, erori.
Editorial Green
#047857
Success, validari.
Code surface
#1A1A18
Blocuri de cod, ascii art.
02 / Typography
Trei familii, o singura voce
AaBbCc 0123
Fraunces Variable · serif display · opsz 144 · wght 450
Editorial italic — pulled quotes
Fraunces Variable · italic · slnt −10 · opsz 72
Section heading H3
Fraunces Variable · opsz 36 · wght 500
Body text in Inter Variable, optimizat pentru lectura indelungata. Un articol tehnic de pe site are intre 1500 si 2500 de cuvinte, deci corpul conteaza mai mult decat titlurile. Am ales o singura familie pentru tot ce se citeste in flux si am lasat serifa doar pentru titluri si pentru paragrafele de deschidere, unde are rol de ritm, nu de lizibilitate.
Inter Variable · 17px / 1.65 · wght 400
$ ssh admin@router-01.snsys.ro [mikrotik] /interface bridge add name=br-lan [mikrotik] /ip address add address=10.0.0.1/24 interface=br-lan
JetBrains Mono Variable · 14px · wght 400
03 / Components
Building blocks
Buttons
Pull quote
“Infrastructura buna nu se vede. Se simte doar atunci cand lipseste.”
Code block
/ip firewall filter
add chain=input action=drop \
connection-state=invalid comment="drop invalid"Unordered list
- Audit infrastructura
- Configurare MikroTik
- Conformitate NIS2
Ordered list
- Discovery call
- Audit + ofertare
- Implementare
Form fields
04 / Grid & spacing
12-col baseline
01
02
03
04
05
06
07
08
09
10
11
12
4px
8px
16px
24px
32px
48px
64px
96px
128px
05 / Credits
Built with free, open tools
Typography
- Fraunces · Undercase Type
- Inter · Rasmus Andersson
- JetBrains Mono · JetBrains
Toate variabile, self-hosted (woff2), licenta SIL OFL.
Tehnologii
- React 18 · TypeScript 5 · Vite 5
- Tailwind CSS v3 · shadcn/ui
- Framer Motion · React Router
- Pre-render static · IIS hosting
Stack 100% free / open source.
Built by SecureNET Systems · MMXXVI · snsys.ro