Without image
The base slot-based card. Meta, title, description and footer are all optional slots.
Internal
Component Playground
Visual reference for all UI components. Not linked from the public site.
OverviewDesign system at a glance
BrandCalm, editorial, engineering-minded
Deep navy ink, sea-blue accent, warm sand-orange highlight, generous whitespace.
VoiceFirst person · Warm · Understated
Bilingual ES/EN. Sentence case everywhere. No emoji. Em dashes for asides.
ColorSea · Sand · Grey
Sea 600 #006ED2 primary. Sand 500 #FC6413 secondary highlight. Grey 950 #04274D ink.
TypeInter — one family
Display 72 · H1 48 · H2 32 · H3 24 · Body 16 · Small 14 · Caption 12. Bold 700, tight −0.02em tracking.
Spacing4px base grid
–space-1 → –space-20. Section rhythm 72–96px. Card padding 24px. Max layout 1200px.
RadiusSoft, not bubbly
Cards 16px · Inputs/buttons 8px · Pills 80px. Avatars fully rounded.
ElevationNavy-tinted shadows
–shadow-xs resting → –shadow-lg hover. –shadow-brand on primary button hover (sea-blue glow).
Motion140–220ms ease-out
cubic-bezier(0.16,1,0.3,1). Cards lift 3–4px on hover. No bounces, no infinite loops.
ColorsBrand palette — Sea / Sand / Grey
Sea — Primary — The brand blue. Primary actions, links, focus.
50#EFF7FF
100#DEEEFF
200#B6DEFF
300#76C5FF
400#2DA8FF
500#028DF5
600#006ED2
700#0058AA
800#005096
900#073E73
950#04274D
Sand — Secondary — Warm accent orange. CTAs that need extra warmth, highlights.
50#FFF6ED
100#FFEAD4
200#FFD2A9
300#FFAA64
400#FE8639
500#FC6413
600#ED4909
700#C53509
800#9C2B10
900#7E2510
950#441006
Grey — Neutral — Text, surfaces, borders. Grey 950 = primary text, Grey 0 = page.
0#FFFFFF
50#F7F7F7
100#EDEDED
200#DFDFDF
300#C7C7C7
400#ADADAD
500#999999
600#888888
700#7B7B7B
800#676767
900#545454
950#363636
1000#000000
LogosIsotipo and wordmark — default (blue) and white variants
SanFabiian homeisotipo / default
SanFabiian homeisotipo / white
SanFabiian homelogo / default
SanFabiian homelogo / white
HeadingH1 → 48px / H2 → 32px / H3 → 24px
H1 — Crafting elite digital experiences
H2 — Projects & Case Studies
H3 — Component Library
TextBody / Secondary / Small
Default body — the quick brown fox jumps over the lazy dog.
Secondary — used for descriptions and subtitles.
Small — captions, metadata, timestamps.
BadgeSemantic status indicators
FrontendUX DesignFullstackDeprecatedDefault
TagNeutral labels for categories and tech stack
ReactTypeScriptNext.jsSCSSFigmaSanity
InputForm field with label
CardBase card — padding / shadow / hover variants
Default — padding, no shadow.
With shadow.
Hover + shadow — try hovering.
ContentCardBase slot card — meta / title / description / footer
ProjectCardComposed on ContentCard — frontend / ux / fullstack
PostRowBlog list — featured (image left) + rows without image
Engineering
Design tokens that actually scale
How we structured a three-tier token system so designers and engineers finally spoke the same language.
May 28, 2025·7 min
Apr 12, 20255 min
Design
The quiet craft of empty states
Empty states are the most-skipped, most-seen screens in any product. Here's how I approach them.
Mar 3, 20259 min
Engineering
Shipping multilingual by default
A practical guide to i18n with Next.js App Router and a localized CMS, without the headache.
Jan 21, 20254 min
Design
Motion with intent
Animation should explain, not decorate. A small set of rules I keep coming back to.
Dec 10, 20246 min
Engineering
Type scales that actually work
A fluid type scale built on CSS clamp — no more magic numbers, no more breakpoint overrides.
CodeAnimationTypewriter animation — used in Hero
ProjectCard.tsx
1
StackFlex layout — direction / gap / align / justify
rowgap smalign center
justify betweengap lgrow
columngap xsdefault align start
Grid12-col responsive — cols / colsMd / colsLg
cols=1 colsMd=2 colsLg=4
A
B
C
D