Frauthy Brand

design system

The discovery-doc design language -- Fraunces display, IBM Plex Sans/Mono, an ink/paper palette with coral and violet accents, editorial prose grammar, quiet motion, and the reading toolbar -- shipped as a versioned, reusable, accessible SDK.

§01

Principles

Discovery-doc as default

The canonical look ships as the zero-config default; other themes opt in on top of the same tokens.

CSS-first, JS-optional

Tokens + component CSS deliver the entire look with zero JavaScript. SolidJS components add only interactivity.

Framework-honest

Ship a framework-agnostic layer + Solid components + an Astro layer + a web-components escape hatch.

Accessibility is the baseline

WCAG 2.2 AA, not a later pass. Every component ships with keyboard, ARIA, contrast, and motion support.

Performance is a budget

Lighthouse 95+ perf, 100 a11y, 100 best-practices, 100 SEO -- enforced in CI, not aspirational.

Versioned + published

Semver per package, GitHub Packages Internal visibility. Consumers pin exact versions and upgrade deliberately.

§02

Packages

The SDK is a monorepo of four packages. Each is independently versioned and published. Consumers import what they need:

brand-tokens

CSS custom properties, TS constants, and a Tailwind v4@theme preset. The single source of truth for color, type, spacing, radii, shadows, motion, and z-index.

brand-fonts

Self-hosted Fraunces + IBM Plex Sans + IBM Plex Mono. Replaces the Google Fonts network dependency -- an instant Lighthouse and privacy win.

brand-css

Framework-agnostic component stylesheet. The discovery-doc grammar (.shead, .prose,.cards, .note,.cta-*, etc.) as one importable CSS file. Get the full look with zero JavaScript.

brand-solid

SolidJS components: Button, CodeBlock, Card, Note, SectionHeader, Term, Tabs, ReadingToolbar, ThemeToggle. Typed props, ARIA patterns, CSS-first -- they add interactivity, not style.

§03

Installation

# Install all four packages
PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

# In your CSS entry point
@import "PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/brand.css";

# In an Astro page
import { Button, ThemeToggle } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Button client:visible variant="primary">Get started</Button>

# Tokens + fonts + component CSS only (no JS)
PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

# In your stylesheet
@import "PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/brand.css";

# Then use the CSS classes directly
<button class="cta-primary">Get started</button>
<div class="note"><b>Note:</b> Styled by CSS alone.</div>

# Import tokens as TS constants
PRIVATE_BETA_INSTALL_INSTRUCTIONS_REDACTED PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED

import { colors, semanticLight, semanticDark } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

console.log(colors.violet); // #5B4FE6
console.log(semanticDark['--accent']); // #7B6FFF