Patterns

compositions

Full compositions assembled from brand components. Each pattern shows how components work together in a real layout.

§01

Article Layout

editorial

The discovery-doc article layout uses alternating bands (light/dark surfaces), section headers with numbers, prose content, and the reading toolbar for navigation.

§01

Authentication

core

Authentication verifies who a user is. Frauthy implements OAuth 2.0 with OIDC, supporting multiple identity providers through a unified flow.

How it works

The auth service acts as the relying party, accepting tokens from configured providers and issuing session credentials. All secrets are managed through environment variables, never hardcoded.

Self-hosted fonts: This page uses Fraunces, IBM Plex Sans, and IBM Plex Mono -- all self-hosted via PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED. No Google Fonts dependency.

§02

Authorization

core

Authorization decides what a user may do. Frauthy uses relationship-based access control, modeled after the Zanzibar system.

objects

Resources

Documents, teams, and organizations modeled as typed objects.

relations

Permissions

Relationships between users and resources define access.

checks

Evaluation

Permission checks resolve through the relation graph.

Key pattern: Alternate .light and.dark bands for visual rhythm. Each band remaps semantic tokens, so all components inside automatically adapt.

§02

Feature Section

documentation

Combine section headers, ledger rows, notes, and code blocks to document a feature's capabilities.

Token-based theming

All colors resolve through semantic tokens. Setdata-theme on the root element to switch the entire page between light and dark.

Fluid typography

Type sizes use clamp() for responsive scaling, multiplied by --reading-scalefor user adjustment.

Self-hosted fonts

Fraunces + IBM Plex are bundled as variable font files. No external network requests, no privacy leaks, faster loads.

Performance: This pattern produces zero JavaScript when rendered statically. The CSS-first approach means the full visual treatment loads with no runtime overhead.

§03

Install Guide

onboarding

Step-by-step installation with a procedural flow, then tabbed code blocks for different package managers.

Step 1

Install the brand-css package

→

Step 2

Import brand.css in your entry

→

Step 3

Use the CSS classes in your markup

/* Your CSS entry point */
@import "PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/brand.css";

/* That's it. Use the classes: */
<div class="wrap">
  <div class="shead">
    <span class="num">§01</span>
    <h2>Hello Brand</h2>
  </div>
</div>