Primer Design System

GitHub's öffnen Source Designsystem für consistent, accessible Web interfaces.

Produktübersicht

Primer ist GitHubs offizielles Open-Source-Design-System, das wiederverwendbare UI-Komponenten, Muster und Richtlinien bietet, um konsistente, zugängliche und performante Web-Erlebnisse über GitHub-Produkte und Drittanbieter-Integrationen hinweg zu bauen. Es umfasst Primer React (Komponenten), Primer Primitives (Low-Level-Tokens) und Primer CSS für flexible Implementierung, mit Fokus auf Entwickler-Produktivität, Modularität und GitHubs Marken-Sprache. Komponenten-Bibliothek: Wiederverwendbare Elemente wie Schaltflächen, Formulare, Navigation, Avatare und Markdown mit Varianten für Themes und Zustände. Design-Tokens: Semantische Farben, Typografie, Abstände, Motion und Icons für einheitliches Styling. Barrierefreiheit: WCAG-Konformität mit ARIA-Support und inklusiven Mustern. Werkzeuge: Figma-Kit für Prototyping; React- und CSS-Bibliotheken für Implementierung; Storybook für Erkundung.

Am besten geeignet für

Teams Bau skalierbar, consistent digital products.

Hauptfunktionen

Komponentenbibliothek: Reusable elements wie buttons, forms, navigation, avatars, und markdown mit variants für themes und states.
gestalten-Tokens: Semantic Farben, Typografie, Abstand, motion, und Symbole für unified styling.
Barrierefreiheit: WCAG compliance mit ARIA Unterstützung und inclusive Muster.
Werkzeuge: Figma Kit für Prototyping; React und CSS Bibliotheken für implementation; Storybook für exploration.

Vorteile

+Open Source
+Umfangreiche Symbolbibliothek
+Farbpalettengenerierung
+Export in CSS/Design-Tools

Nachteile

-Einführung erfordert Teamabstimmung
-Anpassung kann komplex sein

/// SPEZIFIKATIONEN

Preis:
Free
Plattform:
Browser

ASSETS_DIRECTORY

figma

/// Ähnliche Tools

Porsche Design System

öffnen Source Framework für consistent, Premium automotive digital interfaces.

Palmetto Design System

öffnen Source Designsystem für consistent, accessible solar energy product interfaces.

Paste

Twilio's öffnen Source Designsystem für consistent, accessible communication product interfaces.

Pando Design System

Pluralsight's öffnen Source Designsystem für consistent, accessible Web interfaces.

Radius Design System

Rangle's Meta-Framework accelerating custom Designsystem creation mit Werkzeuge und Kits.

Salt Design System

J.P. Morgan's öffnen Source Framework für accessible, anpassbar financial interfaces.

Slack Block Kit

modular UI-Framework für Bau reichhaltig, interaktiv messages und apps in Slack.

SmartHR UI

öffnen Source React Komponentenbibliothek für consistent, accessible HR Plattform interfaces.

U.S. Web Design System

Web Designsystem: official U.S. government Framework für consistent, accessible public digital services.

Paradigm Design System

Mail.ru/VK's öffnen Source Framework für consistent Web interfaces.