Make it yours

Five accent color themes ship out of the box: Grayscale, Green, Blue, Amber, and Rose. Switching between them is a single setting change that propagates instantly across every element in the interface: buttons, badges, links, indicators, borders, and focus states. The system uses CSS custom properties throughout, so adding your own brand color is a matter of defining a few variables. There's no hunting through stylesheets replacing hex codes, and no risk of missing one in a dark corner of the UI.

Font selection follows the same philosophy. Graymatter includes seven curated font pairings, each combining a display font for headings and UI elements with a body font for readable text. Share Tech Mono with Inter. Oswald with Lato. Saira Stencil One with Saira. Each pairing is designed to work together typographically, and all fonts are hosted locally; no external requests to Google Fonts or other third-party services.

Dark and light modes are built in and work per user. Each person can choose their preference via the nav bar, and the application remembers it across sessions. Both modes are fully styled for every component in the system. This isn't a CSS filter bolted on at the end. It's a ground-up implementation where every color in both modes has been considered.

Authentication is configurable to match your security requirements. Three modes are available: email verification code, traditional password, and password with two-factor email verification. Switch between them from the settings panel. The system handles the transitions gracefully — if you move from email codes to passwords, existing users are prompted to set a password on their next login. Registration can be enabled or disabled with a toggle.

For developers, the real value is in how these systems are implemented. Themes are driven by data attributes and CSS custom properties, so adding a new accent color or font pairing doesn't require changes to any component. Settings are cached and accessed through a clean API. Authentication modes share a unified flow with strategy-specific logic isolated behind the scenes.

Graymatter is designed to feel like your application from the first time a user logs in. The customization tools make that possible without custom development, and the architecture underneath makes it sustainable as your needs evolve.