Hey, I help designers —
let me assist you.
Build design systems the way professionals do — palettes that scale, gradients with depth, accessible contrast, and icons that carry meaning. FARB.NØRM turns design principles into a workflow you can move through fast.
Color · Contrast · Hierarchy · Motion
Palettes
The foundation of your system.
Five colors, generated to feel intentional. Hit Space to remix, click any swatch to open it fullscreen.
Tip · A balanced palette uses one dominant color, one accent, and a neutral base. The rest support hierarchy — they shouldn't compete for attention.
Gradients
Surfaces with depth.
Six curated gradients, generated live. Tap any to open the developer export — CSS, Tailwind, JSON tokens, SwiftUI, Compose.
Tip · Use gradients for atmosphere, not buttons. They guide the eye and add depth — but should never compete with the content sitting on top.
Icon System
Icons that move with your design system.
185+ pixel-perfect icons — static or animated. Tint with your palette, fill with a gradient, or export as SVG, JSX, HTML or GIF.
Tip · Icons should support meaning, not decorate. Use a single stroke weight across the system and pair every icon with a clear label.
Static vs animated
Every icon is available as a clean static SVG and as a motion preset. Open any icon to switch between the two — static is best for UI and dense layouts, animated for hero moments, empty states and onboarding.
Accessibility
Designed to be readable.
Contrast is the foundation of accessible design. WCAG 2.1 measures it mathematically; APCA measures how the human eye actually perceives it. FARB.NØRM shows both — so your interface stays readable for everyone, on every screen.
1 in 12 people has some form of color-vision deficiency. Contrast keeps content accessible to all of them.
WCAG AA requires 4.5:1 for body text and 3:1 for large headings or UI components.
APCA Lc 60+ is the modern standard for comfortable reading at content sizes.
- Excellent accessibility — works for all text sizes.
- APCA: ideal for body text and small UI labels.
Image extraction
Drop an image. Get a palette.
Pulls the dominant colors from any image, on-device. Export as JSON, CSS or Tailwind.
Tip · Sample real-world references — photos, brand shots, moodboards. Palettes built from real light feel more grounded than colors picked in isolation.
Safe to upload — your file is processed once for this conversion only. We never store it, share it, or use it to train AI.
While you wait — design tips
- Limit a UI to 5–7 colors. More than that and hierarchy starts to blur.
- Pick one accent. It signals action — the rest should support, not compete.
- Always test extracted colors against your background for contrast.
New tool
Image to SVG Converter
Trace any PNG or JPG into a clean, scalable SVG — optimized for the web, icon systems and component libraries. Three detail presets, one-click cleanup.
AI tool
Image to Document
Snap a photo of notes, a whiteboard or a scan and AI rebuilds it as a clean, structured brief — ready to preview and download as a polished PDF.
Bento layout generator
Compose balanced bento systems for UI mockups, slide decks, and design system planning. Pull colors from your palette or gradient — open the full tool to export SVG, PNG, PDF, PPTX or Figma.
Why FARB.NØRM
A toolkit that teaches as you build.
Every tool in FARB.NØRM is paired with a design principle — so you don't just ship faster, you ship better. Color, contrast, hierarchy and motion, in one workspace.
Harmonic palettes
Color-theory powered combinations that always feel intentional. Export as CSS, Tailwind or JSON tokens — free.
Tip · Consistent color systems create visual hierarchy and reduce cognitive load.
Liquid gradients
ProMulti-stop gradients tuned for modern UI surfaces. CSS, SVG and PNG free — SwiftUI & Jetpack Compose with Pro.
Mobile native exports
Tip · Gradients add depth, but only when they support content, not compete with it.
Icon system
Pro200+ static and animated icons. Tint, gradient and SVG export are free — animated GIF and large PNGs unlock with Pro.
Animated GIF + 512px PNGs
Tip · Icons should support meaning, not decorate. Pair them with clear labels.
Bento layout kit
ProGenerate balanced bento layouts for UI, slides and design system planning. SVG, PNG and PDF export free — PPTX & Figma SVG with Pro.
PowerPoint + Figma SVG export
Tip · Strong layout systems make every screen feel part of the same product.
PNG → SVG vectorizer
Turn raster images, logos and screenshots into clean, editable vector paths in seconds.
Tip · Vectors stay crisp at every size — perfect for design systems and brand assets.
Image → Document
Drop a screenshot or scan and extract structured text into a downloadable document.
Tip · Great for digitising whiteboards, slides and reference material.
Accessibility built-in
WCAG 2.1 ratios and APCA Lc scoring side-by-side, pass/fail at a glance.
Tip · Good contrast improves readability, builds user trust, and is non-negotiable.
Image color extraction
Drop any photo and pull a clean, dominant palette in seconds.
Tip · Real-world references ground your palette in mood, not just theory.
Built for flow
Spacebar to remix, instant copy, no accounts needed. Stay in motion.
Tip · Fast iteration is how good design happens — explore more, decide better.
One-time Pro unlock
Pro€5,99 lifetime — unlocks animated icons, large PNGs, mobile gradients, PPTX and Figma exports. No subscription, ever.
Lifetime · all formats
Tip · Buy once, own forever. Every future Pro format is included.