← Înapoi în Nest
Case study · Design system

Max Core.

Un design system designer-led, open source, indie. 1.025 tokens pe 4 niveluri, Figma library completă, JSON export și codegen React + Tailwind.

0
Tokens totali
Toți tokenii sistemului, pe 4 colecții
0
Tokens de componentă
La nivel de Atoms / Molecules / Organisms
0
Alias references
Legături între niveluri, zero valori hardcodate
0
Cascadă tokeni
Primitive → Semantic → Component → Variant
01 · Context

Spațiul neacoperit.

Piața de design systems s-a maturizat în jurul a câteva categorii, fiecare cu un blind spot. Max Core ocupă o intersecție pe care n-o atinge niciun jucător serios.

shadcn · Radix

Dev-led

Flexibil în cod, Figma library lipsește sau e shallow. Designerul e cetățean second-class.

Material · Fluent · Carbon

Corporate design-led

Sisteme mature, dar prind brandul în estetica Google/Microsoft. Orice tema rămâne recognoscibilă Material.

Tokens Studio · Style Dictionary

Token tools

Puternice pe pipeline, dar nu sunt DS-uri. Trebuie să construiești componente peste ele.

Untitled UI · MUI Pro

Commercial kits

Closed source sau paywalled. Ship Figma assets, dar fără cod production-ready integrat.

Combinația care nu există: designer-led + indie + open source + Figma-first + ships cod real. Asta e poziția Max Core.

02 · Arhitectură

Patru niveluri.

Fiecare nivel face aliasing la cel de deasupra. Schimbi paleta la nivel primitiv → întreg sistemul se reașează în câteva secunde. Zero valori hardcodate în componente.

01Primitive
Valori brute
#6366F1 · 16px · 8px
02Semantic
Alias spre primitive
accent/primary#6366F1
03Component
Alias spre semantic, scope componentă
-- Molecule/Button/Global/Padding X- Spacing -/16
04Variant
Token pe variantă concretă (size, state)
-- Atoms/Buttons/Standard-Button/Size-M/Height40px
Primitives
~98
Semantics
~55
Colors (lt/dk)
~106
Components
~696
03 · Sistem

Trei layere, un singur DS.

Figma library e fundația. Plugin-ul de export scoate tokens ca JSON DTCG. Codegen-ul produce componente React + Tailwind direct din token tree. Designer schimbă în Figma → cod-ul se actualizează.

Layer 1

Figma DS

Tokens pe 4 niveluri, componente Atoms / Molecules / Organisms, light + dark mode, slot-based composition unde face sens.

Production-ready
Layer 2

JSON export + WCAG

Plugin Figma care exportă tokens în format DTCG. Audit accessibility built-in pe contraste. Output consumabil de orice tool: Style Dictionary, Tokens Studio, codegen propriu.

În dezvoltare
Layer 3

React + Tailwind codegen

Componente React + Tailwind generate direct din token tree, cu CSS custom properties tipizate. Code ownership total, copy-paste sau npm install.

În dezvoltare
04 · Componente

De la atomi, la organisme.

Library completă Atomic Design: butoane, inputuri, avatare, tags, badges, tooltips, knobs, selection controls. Molecules: cards, lists, tabs, pagination, date picker, form groups, toasts. Organisms: top bar, side bar, bottom nav, stats cards, data tables, bottom sheets.

Buttons
Save changes Cancel
Badges
New Success Danger Warn
Input
Type something
Tokens · primary
Segmented
Overview Tokens Components
Toggle · Progress
Card
Avatar group
Tokens · neutral
05 · Theme freedom

Adaptat în 20 de minute.

Proof empirică: Max Core schimbat de la estetica Tailwind-generic (indigo + slate rece) la brandul The Fat Duck (orange + warm green-tint) folosind un brief AI plus brandbook PDF. Zero atins în componente. Toate cele 1.025 variables păstrate.

Default · Tailwind-like
Before
Primary · Indigo
Neutral · Slate
Save changes
Action
The Fat Duck
After
Primary · Orange
Neutral · Warm green-tint
Save changes
Action
32
chip-uri culoare swap-uite
16
alias-uri re-rutate
0
componente modificate
06 · Roadmap

De aici în public.

Cinci faze de la launch BETA la marketplace cu economie de creatori. Free core, anchor products by Max, marketplace 3rd-party.

2025, Q3 2026Construit

Figma DS production-ready

1.025 tokens auditați, 4 niveluri de cascade, componente Atoms/Molecules/Organisms cu light + dark mode. QA per componentă: naming, token test, industry standard check, focus rings, slots.

Q4 2026Tessera · BETA

Lansare publică BETA

Max Core live ca Figma library + site documentație + case study TFD ca hero example. Launch sequence: HN, Reddit, newsletter pitches, Twitter thread.

Q1 2027Mosaic · v1.0

React library + codegen stable

npm package public, componente React + Tailwind production-ready, codegen din Figma JSON. Graduation din BETA, stable API contract.

Q2-Q3 2027Marketplace

Custom marketplace + first paid theme

Custom marketplace site (Stripe/Paddle backend), prima temă paid (Liquidmetal by Max), Phase 1 creator economy: 0% rev split, invite-only first creators.

Q4 2027, 2028Extindere

Swift output · Pages · Themes by Max

Codegen extins Figma JSON → SwiftUI (web + iOS din aceeași sursă), layer pages + sections pre-built, al doilea anchor theme by Max.

Vrei să fii primul care îl folosește?

Max Core ajunge în public toamna 2026 ca BETA, free + open source. Lasă-ne un mail și te anunțăm când e gata pentru download, fără spam, doar update-ul de launch.

Anunță-mă la launch