A coherent visual system.
Two sub-projects, two CSS stacks, one shared identity. The portfolio uses a vanilla CSS design system. The storefront uses Tailwind. Both share palette, spirit, and principles.
Visual debt is as real as technical debt.
If there's one thing I've always missed while maintaining other people's e-commerce, it's having a design system. Every time a designer or developer touched the frontend, they'd use a slightly different color, different spacing, a border-radius that didn't match the rest. Small inconsistencies that accumulate until the UI looks like it was built by ten different people — because it was.
With CuevasLab I made sure that wouldn't happen. From the first commit, every visual decision goes through the design system: tokens, components, scales. And every time we touch the frontend, we review and update the design system before implementing.
ui-ux-pro-max as design copilot
To maintain visual coherence we use the /ui-ux-pro-max skill — a Claude Code skill specialized in design systems with support for 67 styles, 96 palettes, and 57 font pairings. Every time we add a component or modify a style, the skill validates it's consistent with existing tokens.
Two design systems, one identity
The portfolio (vanilla CSS) and the storefront (Tailwind) have different stacks but share palette, spirit, and principles. The storefront design system has its own tokens adapted to Tailwind, but the base colors, gradients, and dark-first philosophy are the same.
The rules of the game.
Four principles guide all visual decisions in the project. They're not dogma — they're the result of iterating on what works.
Dark-first
Dark theme is the default. Tokens are defined in :root for dark mode and overridden in [data-theme="light"]. Both themes must always work — colors are never hardcoded.
Responsive without breakpoint-hell
4 breakpoints: 768px (tablet), 640px (CV), 520px (landing), 380px (small). clamp() for fluid typography and spacing. Media queries are the last resort, not the first.
Accessible by default
WCAG AA contrast, visible focus, aria-label on interactive buttons, sr-only for form labels. Accessibility isn't a feature — it's the foundation.
Minimalism with texture
Clean layouts but not flat. The grain effect (noise overlay), subtle gradients, and fade-up animations add depth without distracting from content.
Three colors, two themes.
The palette is based on three warm tones — gold, copper, and warm-rose — that adapt automatically to the active theme. Try switching themes with the nav button to see the difference.
Semantic colors
Gradients
Two font pairings.
Each sub-project has its own font combination, but both follow the same pattern: a display face for headings and a sans for body text.
Clash Display
Satoshi — The body text uses this font. Clean, readable, and with enough personality to not be generic.
Outfit
Source Serif 4 — In the shop, body text uses a serif to give an editorial and premium feel to the product catalog.
Type scale (portfolio)
Texture and motion.
Three visual effects define CuevasLab's identity: the grain, the ambient gradient, and the entry animations.
Noise overlay
Fixed SVG fractal noise over the entire page. 4% opacity in dark, 2.5% in light. Adds organic texture without affecting readability. pointer-events: none so it doesn't block interaction.
Radial gradient
Subtle gold gradient on the top-right corner of the body (at 85% 15%). 6% opacity in dark, 8% in light. Adds warmth without distracting.
Fade-up animation
All elements enter with fade-up: 22px vertical translation + opacity. 0.3-0.7s depending on the element, ease-out. Staggered animation-delay creates a cascade effect.
Pulse dot
The badge dot pulses on a 2.4s cycle: scale 1 → 0.75 + opacity 1 → 0.3. Indicates alive state without being annoying.
Component gallery.
These are the reusable components of the portfolio design system. All work in both themes and are built with CSS custom properties.
Badge
Headlines
Buttons
Cards
Card title
Card body text with muted style, font-weight 300, and line-height 1.6 for optimal readability.
Status indicator
Section labels
Surfaces
Full token reference.
All CSS custom properties defined in :root. Values adapt automatically to the active theme.
--bg
#07070f
#fafaf7
Main background
--text
#f5f0e8
#1a1a1a
Main text
--muted
#c0c0aa
#131313
Secondary text
--gold
#d4a853
#b8892e
Primary accent
--copper
#c8956c
#a06f48
Warm accent
--warm-rose
#b87d6b
#956050
Soft accent
--surface
#f5f0e808
#00000008
Card background
--border
#f5f0e812
#00000014
Subtle borders
--green
#10b981
#10b981
Active state
--error
#e06060
#c44040
Error / danger
Change the tokens, get a new store.
While CuevasLab isn't white-label right now, the design system architecture is built for it. The idea is simple: change the 3 base colors, the 2 fonts, and the logo — and you get a storefront with a completely different visual identity, without touching a single component.
Tokens as visual contract
Components never use direct colors — always CSS custom properties. var(--gold), var(--bg), var(--text). Changing the token value automatically changes the entire storefront. A single source of truth for every visual decision.
3 colors, 2 fonts, 1 identity
Gold, Copper, Warm Rose + Clash Display + Satoshi = CuevasLab. Change those 5 values and you have a different brand. Gradients, shadows, and effects are automatically recalculated based on the base colors. Rebranding effort is minimal because abstraction is maximal.
The storefront as a template
Long-term, the vision is for the CuevasLab storefront to work as a template: connect your Medusa backend, change the design system tokens, and you have a complete online store with i18n, SEO, checkout, and CI/CD — all preconfigured.
Let's talk
Drop me a note — questions, feedback, or just want to say hi.