/ EDF · Design System
v2.0 · 2026

Senior product designer · Buenos Aires

designsystem

22 years trying to simplify complex systems — from Web3 marketplaces to mobile games. This is the design system behind defranez.com.

Available for work
Version
V2.0 · 2026
Type system
Syne · DM Mono
Accent
#00F5A0 mint
Auth
Ezequiel De Francisco
01 · Colors

Mint on near-black.

Off-black canvas, two surfaces, one mint accent. The system holds 90% of attention with a single color — every other token is a hairline derived from white-alpha.

Background & Surface
Background--bg
#080A0C
Surface--surface
#0E1114
Surface 2--surface-2
#13171C
Text
White · Display--white
#FFFFFF
Primary text--text
#E8EAED
Secondary--secondary
#8A94A6
Muted--muted
#6B7280
Primary Accent
Mint · #00F5A0
--accent · 90% attention
Cyan · Pair --accent-2 · gradient pair
#00C8FF
Opacity ramp
05
08
20
30
40
Gradients
Hero name · 135° --gradient-hero-name · #00F5A0 → #00C8FF
Skill bar · 90° --gradient-skill
Borders
Hairline · default--border
06%
Hairline · accent--border-accent
20%
02 · Typography

Display + Mono.

A two-face system. Geometric humanist for everything that breathes; a wide-tracked monospace for everything labelled. No third face on the live site.

Syne
Display · Body
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — & · ↗ → ∞
400 · Regular 500 · Medium 600 · Semibold 700 · Bold 800 · Extra · Hero
DM Mono
Labels · Eyebrows · Nav
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — · → ↗ ✕ ∞
300 · Light 400 · Regular 500 · Medium 300i · Italic 400i · Italic
clamp(42,9vw,130)
Hero · Syne 800 · -3%
22 years simplified.
72 / 1.0
Section · Syne 800
Selected work
28 / 1.2
Case study · Syne 700
OpenLoot · marketplace UX redesign
20 / 1.4
Project · Syne 700
Casa Sur · Hospitality brand
18 / 1.7
Body · Syne 400
A senior product designer with 22 years across Web3, gaming, and editorial — quietly technical, sentence-case headings, no emoji.
12 / 1.0
Label · DM Mono · 10%
VIEW WORK · GET IN TOUCH · DOWNLOAD CV
11 / 1.0
Eyebrow · DM Mono · 20%
02 · Typography — A two-face system
03 · Components

Sharp · Hairline · Flat.

No radius (except skill pills). No shadow. Elevation is communicated by a hairline that lifts to mint-20% on hover.

ButtonsLive in /v1
Tags
Product Design Web3 2020 Selected UX/UI Branding
Stat tile
22+
Years experience
40+
Projects shipped
Project card
Web3 · NFT Marketplace2021 — 2023
OpenLoot · Marketplace UXView case →
Skill bar
Product design96%
Web3 / blockchain UX82%
3D & Motion64%
Sticky nav70px · blur 20
Status · Disclaimer · Pulse
Currently freelance / consulting 2026 · Buenos Aires
Available for work
04 · Iconography

Unicode, in mono.

No icon library. Six glyphs in DM Mono carry every gesture — direction, status, separation. No emoji, anywhere.

Arrow · Right
U+2192 · CTAs, inline
Arrow · External
U+2197 · Off-site links
Arrow · Down
U+2193 · Scroll, download
Close
U+2715 · Modal dismiss
Infinity
U+221E · Stat placeholder
·
Middot
U+00B7 · Inline separator
05 · Spacing & Layout

Multiples of four.

A strict 4-multiple scale. Sections breathe at 120 / 60. Cards sit 2px apart, deliberately almost-touching. Max content 1320.

RadiiSharp by default
--radius-0Default
--radius-thumb5
--radius-pill999
BreakpointsThree tiers
Desktop≥ 901120 / 60
Tablet≤ 90080 / 24
Mobile≤ 56040 / 24
Container · Grid
12 cols · 24 gutter · 1320 max
06 · Motion & Effects

Gentle. Never bouncy.

Six named curves. Hover lifts a border, never a card. The orb drifts. The logo spins once every 40s.

Orb float
8s ease-in-out ∞
orbFloatcubic-bezier · auto
Logo spin
40s linear ∞
logoSpin360° · linear
Pulse
2s ease-in-out ∞
pulseopacity 1 → 0.3
Image zoom
0.6s · expo out
--ease-imagecubic-bezier(.23,1,.32,1)
--T-fast
0.2s
Hover transitions
--T-medium
0.3s
UI state changes
--T-modal
0.35s
Modal open / close
--T-slow
0.6s
Image & page enters
--T-skill
0.8s
Skill bar fill