awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
primer avatar

primer/primer

0
View on GitHub↗
12,975 stars·1,288 forks·SCSS·MIT·26 viewsprimer.style/css↗

Primer

Primer is a CSS design system framework and utility library used to build consistent user interfaces based on a unified visual language. It provides a collection of CSS rules, utility classes, and pre-defined style sheets for styling standard interface elements.

The framework implements frontend visual standardization through a shared set of utility classes and design system rules. This allows for the creation of reusable interface elements and the rapid development of web interface layouts.

The system utilizes a BEM-based naming convention, design-token mapping, and CSS variable-based theming. It is built using Sass-based module compilation to organize styles into component-specific stylesheets and utility-first classes.

Features

  • Design System Implementations - Implements a comprehensive design system using standardized CSS rules and visual guidelines.
  • Common UI Element Styling - Provides base visual styles for standard interface elements to ensure a professional and uniform appearance.
  • CSS Frameworks - Ships a comprehensive collection of CSS rules and utility classes based on a unified visual language.
  • CSS Variable Theming - Uses a global set of CSS custom properties to implement dynamic theming and light/dark mode switching.
  • Design Token Mappings - Maps abstract design tokens for spacing and color scales to concrete CSS values for visual consistency.
  • Frontend Visual Standardization - Ensures a cohesive look and feel across different pages and features using shared CSS utility classes.
  • CSS Utility Libraries - Provides a set of low-level atomic CSS classes for controlling layout, spacing, and typography.
  • Component Style Sheets - Offers a library of pre-defined CSS modules for styling standard elements like buttons and navigation menus.
  • UI Component Styling - Provides pre-defined styling modules to build standard visual elements for the user interface.
  • Utility-First Styling - Provides a comprehensive library of single-purpose utility classes for rapid layout and style construction.
  • Sass Compilers - Employs a Sass preprocessor to compile nested stylesheets and shared mixins into standard CSS files.
  • Modular Stylesheet Architectures - Organizes CSS into isolated modules targeting specific UI elements to prevent global style leakage.
  • Design Consistency - Facilitates the application of a unified visual language across all interface elements for a cohesive look.
  • BEM-Based Naming - Implements the Block Element Modifier naming convention to ensure predictable class names and avoid global namespace collisions.
  • UI Visual Standards - Implements a unified set of styling rules to maintain a consistent appearance across the user interface.
  • GitHub Tools - Design system for GitHub interfaces.
  • ui组件库(CSS Framework) - Listed in the “ui组件库(CSS Framework)” section of the Awesome Frontend awesome list.

Star history

Star history chart for primer/primerStar history chart for primer/primer

How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Frequently asked questions

What does primer/primer do?

Primer is a CSS design system framework and utility library used to build consistent user interfaces based on a unified visual language. It provides a collection of CSS rules, utility classes, and pre-defined style sheets for styling standard interface elements.

What are the main features of primer/primer?

The main features of primer/primer are: Design System Implementations, Common UI Element Styling, CSS Frameworks, CSS Variable Theming, Design Token Mappings, Frontend Visual Standardization, CSS Utility Libraries, Component Style Sheets.

What are some open-source alternatives to primer/primer?

Open-source alternatives to primer/primer include: topcoat/topcoat — Topcoat is a CSS UI framework and component library used for building web application interfaces. It serves as a… picturepan2/spectre — Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It… primer/css — This project is a CSS design system framework and modular library providing a standardized set of UI component… officedev/office-ui-fabric-core — This is a CSS UI framework and design system implementation used to build user interfaces that match the visual design… weui/weui — WeUI is a mobile design system and CSS component framework providing a collection of pre-styled widgets and layout… geist-org/react — This project is a React UI component library and frontend UI kit designed to provide a collection of pre-styled user…

Open-source alternatives to Primer

Similar open-source projects, ranked by how many features they share with Primer.
  • topcoat/topcoattopcoat avatar

    topcoat/topcoat

    4,231View on GitHub↗

    Topcoat is a CSS UI framework and component library used for building web application interfaces. It serves as a design system implementation that provides a set of reusable styled elements and layout primitives to ensure visual consistency across web pages. The system utilizes a BEM-based styling architecture to manage specificity and prevent style leakage. It combines a utility-first CSS library for common layout and spacing needs with a responsive CSS grid that adjusts based on viewport width. The framework covers front end styling, responsive web development, and rapid UI prototyping. It

    HTMLcssui-components
    View on GitHub↗4,231
  • picturepan2/spectrepicturepan2 avatar

    picturepan2/spectre

    11,317View on GitHub↗

    Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

    CSS
    View on GitHub↗11,317
  • primer/cssprimer avatar

    primer/css

    12,978View on GitHub↗

    This project is a CSS design system framework and modular library providing a standardized set of UI component stylesheets. It establishes a unified system of visual guidelines to ensure a consistent and professional look and feel across web interfaces. The framework is organized as a collection of standalone stylesheets that can be imported individually to minimize bundle size and eliminate unused styles. It utilizes a design token system based on CSS variables to manage theming and a utility-first class system for layout and spacing. The system employs a block element modifier naming conve

    SCSScssdesign-systemdesign-systems
    View on GitHub↗12,978
  • officedev/office-ui-fabric-coreOfficeDev avatar

    OfficeDev/office-ui-fabric-core

    3,744View on GitHub↗

    This is a CSS UI framework and design system implementation used to build user interfaces that match the visual design of Office and Microsoft 365. It provides a standardized set of typography, color palettes, and grid layouts to ensure a consistent visual appearance across web applications. The framework is designed for enterprise design system implementation, specifically for Microsoft 365 UI development and the styling of Office add-ins. It includes a dedicated iconography library of standardized icons to represent common actions and objects. The system utilizes a token-driven design appr

    SCSS
    View on GitHub↗3,744
  • See all 30 alternatives to Primer→