Brand & AI Platform★
SmartWebsite
Full branding, logo system, and high-tech platform design for an AI-powered €1500 web service.
- Landing
- Logo system
- Brand guidelines
[ Portfolio & Lab ]
Design + code,one thread.
Visual ideation and development merge into a single flow. No handoffs, no lost context. Only bespoke digital products.
Real projects, from concept to launch.
brand identity · sites · real products
Journey
[ Journey ]
One page, one continuous thread
One continuous thread: how I think brand, interfaces and code — with real proof and verifiable projects.
3
Core disciplines
4
Selected projects
100%
Design + code
What you'll find
Brand identity on Moolecola, UX/UI and frontend workflow, Blender renders and a selection of client projects.
Who it's for
For anyone who wants to understand how I work before collaborating: context, deliverables and method in a few minutes of scrolling.
// Expertise
Three pillars, one author
01
Brand identity
Concept, logo system, typography and palette — from brief to packaging.
02
UX/UI & frontend
Figma design system, interactive prototypes and frontend development through go-live.
03
3D & product
Blender Cycles, studio lighting, shader nodes and shoots to validate the brand.
Moolecola — visual system
Premium beauty conscious: science and nature in a geometric, quiet-luxury identity scalable across packaging.
- 01
Brief & positioning
Audience, competitors and visual gap before opening tools.
- 02
Wordmark & mark
Golden-ratio geometry, custom ligatures and responsive system.
- 03
Colour system
Pantone coated/uncoated for institutional and SKU lines.
- 04
Applications
Packaging, digital and social with clear rules.
01 / PACKAGING 3D
Packaging & 3D render
Boxes, bottles and product sets modelled in Blender at real dieline proportions. Cycles renders with PBR materials — uncoated paper, frosted glass, gold foil — plus a Blender viewport with shader nodes to validate textures and lighting before the final render.
02 / GEOMETRY
Construction Grid System
// Concept
Moolecola is a premium beauty-conscious brand combining advanced science with carefully selected ingredients in a quiet-luxury visual language — rigorous, tactile, with generous typographic breathing room. The identity is built on Avoda and golden-ratio geometry (φ): the floral mark grows from the wordmark curves and scales as a responsive system across packaging and digital. The Pantone palette separates product lines while keeping institutional coherence across uncoated stock, gold foil and frosted glass.
03 / COLOR PALETTE
Pantone palette
Two registers work together: PANTONE 321 U (Uncoated) as the institutional anchor — a tactile turquoise that signals nature and authenticity — and Coated variants for each SKU line. Pastel tones mark different formulas on shelf, print cleanly on rough stock and stay coordinated with frosted glass and gold foil.
PANTONE 321 U
#009BB4
Institutional · 321 U
Uncoated turquoise: brand colour on boxes, payoff and institutional touchpoints. Matte, organic finish, distinct from glossy coated product details.
Dusty Blush 695 C
#C4A4A4
Hydration / anti-age · 695 C
Dusty blush: intimate and sophisticated, suited to nourishing and anti-age lines without shouting on shelf.
Pastel Teal 636 C
#8ED8E8
Light purifying · 636 C
Pastel teal: freshness and light hydration; soft contrast against uncoated paper and frosted glass.
Sage Green 556 C
#6B8F71
Soothing botanical · 556 C
Sage green: botanical ingredients and calming formulas, aligned with the nature-conscious positioning.
Warm Terracotta 7576 C
#C67B5C
Nourishing / energising · 7576 C
Warm terracotta: vitality and rich treatments; an earthy tone balancing the cooler pastels in the system.
Soft Lilac 7446 C
#B8A8C8
Night / regenerating · 7446 C
Soft lilac: evening rituals and full regenerating treatments — premium without feeling cold or clinical.
Blender, lights and nodes
Photoreal Cycles renders and product shoots: same brand, two worlds — virtual and real — aligned to Pantone samples.
Blender
Cycles · PBR · Ray-tracing
Principled BSDFBump / NoiseMix Shader
From grey clay to final materials
Same model, two stages: solid Blender viewport and Cycles render with Pantone, frosted glass, uncoated stock and gold foil.
B-Clean
Full set
01
Modelling & UV
Packaging volumes, bottles and boxes at real dieline proportions.
02
Studio lighting
Three-point setup with emissive panels and low-intensity HDRI.
03
Shaders & nodes
Principled BSDF, paper bump, gold foil mix and serum volume absorption.
04
Real-world validation
Product shoot and Lightroom colour matching to align Pantone and renders.
- Cycles PBR + three-point lighting + studio HDRI
- Shaders: frosted glass, gold foil, serum volume absorption
- Minimal shoot + Lightroom/Photoshop colour matching
Shader nodes
Principled BSDFBump / NoiseMix ShaderVolume Absorption
From UI to deploy
I design high-fidelity interfaces and write them in code: dedicated branches, pull requests, Cloudflare Pages previews and launch with redirects and SEO.
Astro
Static & islands
React
Interactive UI
GSAP
Scroll & motion
// Core Architecture & Software Stack
Engine Spec
Figma
Engine Spec
TypeScript
Engine Spec
Astro
Engine Spec
React
Engine Spec
Tailwind CSS
Engine Spec
GSAP
Engine Spec
GitHub
Engine Spec
Cloudflare
// Architecture Management
Production Pipeline Workflow
Status: Active
- 01
Design system
Figma: type, grid, components and UI states.
- 02
Branch & PR
Feature branches, GitHub review, tracked iterations.
- 03
Preview
Branch deploy on Cloudflare Pages for validation.
- 04
Production
Build, redirects, sitemap, Core Web Vitals.
// Site mockups
High-fidelity UI before deploy: landing pages, SaaS and platforms — the same layouts then built in Astro/React with branch previews.
SaaS · Web platform
SmartWebsite
EdTech · AI
AI Amica
Voice AI · Restaurants
Affianco
Platform · Digital grants
Digital Bando
E-commerce · Marketplace
Marketplace Arena
Digital · Agency
Drive Agency
Healthcare · Dental
Masuelli
// Scroll & motion in code
Live SmartWebsite capture: micro-interactions, GSAP and navigation — design and implementation in one workflow.
// Production Delivery
No lost handoff
Spacing, hierarchy and motion are born with the code — not as a late-project attachment.
Projects at a glance
Client and platform selection — placeholder previews, live links only where available.
Brand · Packaging · 3D
Moolecola
Beauty & cosmetics — identity, packaging and 3D
- Logo system
- Primary/secondary packaging
- Blender renders
Web · SaaS · EdTech
AI Amica
AI learning platform — UX, UI and motion
- Landing UI/UX
- Design system
- Motion UI
Web · Health · Product
BYDOC
Health tech — product landing and clinical icons
- Landing UI
- Icon set
- Typography
Web · SaaS · Hospitality
Affianco
Voice AI assistant for restaurants — warm tech
- Brand UI
- Landing
- Hero video
[ Flow ]
How I work
Four horizontal phases: from brief to go-live, with an active timeline as you scroll the cards.
01
Goals and users
02
Visual system and UI
03
Prototype and validation
04
Build and launch
01
Goals and users
Brief, competitors and journeys: what the brand or product must communicate before opening tools.
01 / 04
02
Visual system and UI
Type, colour, components in Figma/Adobe; hierarchy and states already shaped for code.
02 / 04
03
Prototype and validation
Mocks, motion and variants on dedicated branches; Cloudflare previews to iterate with clients.
03 / 04
04
Build and launch
Astro, React, Tailwind: fast sites, considered scroll effects and a clean handoff through go-live.
04 / 04
*