gdb
[ DESIGN SYSTEM · WEB3 ] · 2025

Fhenix Design System

Cypher — il design system per Fhenix che rende leggibili e coerenti le esperienze on-chain riservate (CoFHE) — token, componenti e pattern che portano chiarezza a interazioni crittografiche complesse.

Fhenix Design System — anteprima
PROBLEMA

Il calcolo riservato on-chain (FHE) è potente ma intimidatorio; ogni schermata rischiava di reinventare pattern e allontanarsi dal brand.

APPROCCIO

Un unico sistema basato su token — colore, type, spaziatura, componenti e pattern d’interazione — documentato e riutilizzabile su ogni superficie Fhenix.

DECISIONI CHIAVE

Palette scura guidata dall’accent; Archivo + JetBrains Mono; stati cifra/decifra reversibili come pattern di prima classe; divulgazione progressiva del dettaglio crittografico.

RISULTATO

Una base coerente e scalabile adottata su prodotto e brand Fhenix.

RISULTATI
NODES READ FROM .FIG
57,412
VARIABLES · 2 MODES
558
COMPONENTS · 14 SPECIMENS
9
LE SCELTE DIFFICILI

Tre decisioni che hanno definito il prodotto — qual era l’alternativa e cosa è costata ognuna.

01Accent come colore brand → STATO

Il ciano è segnale, mai decorazione

La mossa ovvia è mettere l’accent ovunque — bottoni, titoli, bordi — così il prodotto sembra on-brand. In un prodotto riservato è pericoloso: se il ciano significa “Fhenix” non può significare anche “questo valore è cifrato”. L’ho riservato a un solo compito, così un’occhiata a qualsiasi schermata dice cosa è protetto e cosa è esposto.

Costo: le schermate sembrano più silenziose e meno brandizzate di quelle di un concorrente, e ogni nuovo componente deve giustificare l’uso dell’accent — una regola che il team deve presidiare in review, per sempre.

02Una sola famiglia umanista → MONO

Monospace per ogni numero

Due famiglie sono più da mantenere di una. Ma i bilanci cifrati cambiano larghezza mentre si risolvono, e in un carattere proporzionale le cifre sobbalzano durante l’assestamento — cosa che si legge come instabilità nel momento esatto in cui l’utente deve fidarsi del numero. Il mono tabulare tiene ogni cifra su una griglia fissa: i valori si aggiornano senza che il layout tremi.

Costo: una seconda famiglia da caricare e accordare, e il mono a corpi piccoli è meno comodo da leggere — quindi va limitato rigorosamente ai dati, mai al testo discorsivo.

0316—24px, amichevole → 4—12PX

Raggi stretti — strumenti, non card morbide

Gli arrotondamenti generosi sono il default di oggi e comunicano cordialità e sicurezza. Qui però parliamo di crittografia finanziaria: le persone muovono valore reale attraverso un’operazione che non possono verificare a vista. Raggi stretti e una scala di elevazione trattenuta fanno sembrare l’interfaccia uno strumento che riporta uno stato, non un’app consumer che chiede fiducia a sensazione.

Costo: risulta più freddo e più da esperti, il che alza l’asticella dell’onboarding — chi arriva per la prima volta riceve meno rassicurazione visiva e serve che sia il testo a farla.

PROCESSO
Fhenix Design System — Cinque stadi meccanici: decodifica del binario .fig, estrazione variabili, norma
Cinque stadi meccanici: decodifica del binario .fig, estrazione variabili, normalizzazione a token, primitive, documentazione.
Fhenix Design System — Cinque livelli, una sola direzione di dipendenza — un token non sa nulla di una
Cinque livelli, una sola direzione di dipendenza — un token non sa nulla di una schermata.
Fhenix Design System — Principi do/don’t che fanno sembrare un solo prodotto ogni dApp costruita con Cy
Principi do/don’t che fanno sembrare un solo prodotto ogni dApp costruita con Cypher.
Fhenix Design System 1Fhenix Design System 2Fhenix Design System 3Fhenix Design System 4Fhenix Design System 5Fhenix Design System 6Fhenix Design System 7Fhenix Design System 8

Apri nel portfolio interattivo →

Hai un prodotto che merita un design più chiaro?

SCRIVIMI →

← Torna a tutti i lavori