modulr.design
Das Herzstück unserer Marke.
Ein System für alle Artefakte: Website, Slides, Prototypen und Sticker sprechen dieselbe Sprache. Token-getrieben mit W3C-DTCG-JSON in Git als Single Source of Truth; Style Dictionary generiert CSS und Tailwind-Theme, Figma spiegelt bidirektional. Diese Seite läuft vollständig auf den generierten Tokens.
Themes Collection
Farben
Verlaufsfamilien
Marken-Ebene: generative Mesh-Verläufe, gesampelt aus den Original-Verlaufsbildern der Figma Brand Library. Alle Varianten im Sticker-Lab.
Surfaces
--color-surface-lowest--color-surface-lowered--color-background--color-card--color-popover--color-sidebarText
--color-foreground--color-text-display--color-text-body--color-text-subdued--color-text-errorInteractive · Accent
Primary-Button: base, hover, press plus on-Farben
--color-accent-base--color-accent-hover--color-on-accent--color-focus-outlineInteractive · Subtle und Surface
--color-subtle--color-subtle-hover--color-surface--color-surface-hover--color-fill-selectedStatus und Struktur
--color-destructive--color-border--color-input--color-ring--color-muted--color-accentAlle Farben reagieren live auf den Theme-Wechsel (Toggle unten rechts). Light und Dark sind eigenständig gestaltet, nicht invertiert.
Text Styles
Typografie
.text-eyebrowuppercase, weit gesperrt
Eyebrow · Kategorie
.text-title-majorVC Garamond Condensed, responsiv 56 bis 144px
Title Major
.text-title-minorTitle Minor
.text-blockquoteEin Satz, der bleibt.
.text-headline-largeHeadline Large
.text-copy-largeCopy Large für Intro-Absätze und Leads.
.text-headline-mediumHeadline Medium
.text-copy-mediumCopy Medium für längere Lesetexte.
.text-headline-baseHeadline Base
.text-copy-baseCopy Base ist der Arbeitstext im UI.
.text-headline-captionHeadline Caption
.text-captionCaption für Bildunterschriften und Meta.
.text-headline-smallprintHeadline Smallprint
.text-smallprintSmallprint für das Kleingedruckte.
.text-label-hugeLabel Huge
.text-labelLabel
.text-label-smallLabel Small
.text-label-tinyLabel Tiny
ABC Monument Grotesk Variable mit den Modulr-Gewichten Regular 375, Medium 450 und Bold 525. Alle Stile skalieren über vier Breakpoints, Fenster schmaler ziehen lohnt sich.
Spatial und Radii Collections
Abstände und Radien
Space
--space-xs--space-sm--space-md--space-lg--space-xl--space-2xl--space-3xl--space-4xl--space-hugeComponent-Radii
PanelList ItemPopoverCardModalButtonBeides responsiv: die Werte wachsen über die Breakpoints 440, 1280 und 1600px mit. Figma-Collections Spatial und Radii, gebaut aus denselben Tokens.
Interaktive Demos
Beispiele
npx shadcn add @modulr/buttonnpx shadcn add @modulr/sliderAnfassen, ziehen, mit Schwung loslassen. Der Bounce an den Enden ist Absicht.
npx shadcn add @modulr/inputnpx shadcn add @modulr/tabsnpx shadcn add @modulr/badgenpx shadcn add @modulr/switchnpx shadcn add @modulr/…
Komponenten
62 Registry-Items, jedes einzeln installierbar. Die Beispiele oben zeigen eine Auswahl; jede Karte führt zur Detailseite mit Code und Installationsbefehl.
Foundation
2Inputs und Formulare
17npx shadcn add @modulr/buttonButton Groupnpx shadcn add @modulr/button-groupInputnpx shadcn add @modulr/inputTextareanpx shadcn add @modulr/textareaLabelnpx shadcn add @modulr/labelCheckboxnpx shadcn add @modulr/checkboxRadio Groupnpx shadcn add @modulr/radio-groupSelectnpx shadcn add @modulr/selectComboboxnpx shadcn add @modulr/comboboxSwitchnpx shadcn add @modulr/switchSlider (Signatur)npx shadcn add @modulr/sliderTogglenpx shadcn add @modulr/toggleToggle Groupnpx shadcn add @modulr/toggle-groupRatingnpx shadcn add @modulr/ratingFormnpx shadcn add @modulr/formDate Pickernpx shadcn add @modulr/date-pickerCalendarnpx shadcn add @modulr/calendarAnzeige und Feedback
15npx shadcn add @modulr/badgeChipnpx shadcn add @modulr/chipAvatarnpx shadcn add @modulr/avatarImagenpx shadcn add @modulr/imageAlertnpx shadcn add @modulr/alertToast (Sonner)npx shadcn add @modulr/sonnerProgressnpx shadcn add @modulr/progressSpinnernpx shadcn add @modulr/spinnerSkeletonnpx shadcn add @modulr/skeletonTooltipnpx shadcn add @modulr/tooltipEmpty Statenpx shadcn add @modulr/empty-stateTablenpx shadcn add @modulr/tableData Tablenpx shadcn add @modulr/data-tableChartnpx shadcn add @modulr/chartList Itemnpx shadcn add @modulr/list-itemNavigation und Struktur
10npx shadcn add @modulr/tabsBreadcrumbnpx shadcn add @modulr/breadcrumbPaginationnpx shadcn add @modulr/paginationSteppernpx shadcn add @modulr/stepperLinknpx shadcn add @modulr/linkAccordionnpx shadcn add @modulr/accordionCollapsiblenpx shadcn add @modulr/collapsibleSeparatornpx shadcn add @modulr/separatorScroll Areanpx shadcn add @modulr/scroll-areaCardnpx shadcn add @modulr/cardOverlays
9npx shadcn add @modulr/dialogAlert Dialognpx shadcn add @modulr/alert-dialogSheetnpx shadcn add @modulr/sheetDrawernpx shadcn add @modulr/drawerPopovernpx shadcn add @modulr/popoverHover Cardnpx shadcn add @modulr/hover-cardDropdown Menunpx shadcn add @modulr/dropdown-menuContext Menunpx shadcn add @modulr/context-menuCommandnpx shadcn add @modulr/commandBlocks (Landing Page)
9npx shadcn add @modulr/block-navbarHero (Block)npx shadcn add @modulr/block-heroMedia Split (Block)npx shadcn add @modulr/block-media-splitFeatures (Block)npx shadcn add @modulr/block-featuresLogo Wall (Block)npx shadcn add @modulr/block-logo-wallStats (Block)npx shadcn add @modulr/block-statsPricing (Block)npx shadcn add @modulr/block-pricingCTA (Block)npx shadcn add @modulr/block-ctaFooter (Block)npx shadcn add @modulr/block-footerBrand Layer
Sticker
Sticker 2.0
Voll generativ: echte Mesh-Verläufe (Display-P3), prozedurale Stern-Partikel und Grain statt Bild-Exporte. Details und alle Familien im Sticker-Lab.