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 + dark-mode ramps
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
Navy — Dark-mode neutral — Dark-mode backgrounds, text and borders (inspired by reactwatcher.com). White (0) to near-black (1000).
0#EBF1FC
50#C9D6EC
100#97A9C9
200#7386A6
300#3A4E74
400#2A3A5C
500#22304C
600#1D2B4A
700#1A2743
800#16223A
900#141F36
950#101A2E
1000#0A1526
Cyan — Dark-mode accent — Dark-mode CTA primary — cta-primary, cta-primary-hover/active/subtle, focus ring.
50#EAFBFF
100#D2F5FF
200#A8ECFF
300#8CE4FF
400#61DAFB
500#38B4D9
600#2790B0
700#1D6D8A
800#164F66
900#123A4C
950#0D2836
Grass — Dark-mode success — Dark-mode success status — matches Tailwind's green scale.
50#F0FDF4
100#DCFCE7
200#BBF7D0
300#86EFAC
400#4ADE80
500#22C55E
600#16A34A
700#15803D
800#166534
900#14532D
950#052E16
LogosIsotipo and wordmark — auto (theme-aware), default (blue) and white variants
SanFabiian homeisotipo / auto — switches with the theme toggle
SanFabiian homeisotipo / default
SanFabiian homeisotipo / white
SanFabiian homelogo / default
SanFabiian homelogo / white
FontsInter (base) / Merriweather (prose) / IBM Plex Mono (tags, badges, headings, buttons, inputs, card titles, code)
Inter — $font-family-baseThe quick brown fox jumps over the lazy dog
Merriweather — $font-family-proseThe quick brown fox jumps over the lazy dog
IBM Plex Mono — $font-family-monoThe quick brown fox jumps over the lazy dog
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 — optional iconLeft / iconRight, each independently toggleable
FrontendUX DesignFullstackDeprecatedDefault
CompletedLearn moreBoth iconsIcon hidden
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