@clearcms/design

Shared brand and design tokens for clear — CSS custom properties, the brand glyph and lockup, a Tailwind preset, canonical font imports, and the canonical-links table. Single source of truth across the admin, console, marketing site, docs site, and adopter sites that opt in.

Per ADR-0012. Brand canon (glyph geometry, primary color, type, tagline, hero, domain) is locked at v0.1; changes require an ADR.

Install

npm install @clearcms/design

react is an optional peer dependency — only required if you import the React components (@clearcms/design/glyph, @clearcms/design/logo).

Surface

import '@clearcms/design/tokens.css';                    // --clear-* CSS custom properties
import '@clearcms/design/fonts.css';                     // Inter + JetBrains Mono via Google Fonts
import { ClearGlyph } from '@clearcms/design/glyph';     // React: the three-bars glyph
import { ClearLogo } from '@clearcms/design/logo';       // React: glyph + "clear" wordmark
import { link, anchorProps, links } from '@clearcms/design/links'; // canonical URLs

The Tailwind preset:

// tailwind.config.js
const clearPreset = require('@clearcms/design/tailwind-preset');
module.exports = {
  presets: [clearPreset],
  content: ['./src/**/*.{astro,tsx,ts,html,md,mdx}'],
};

The raw glyph as a static asset (e.g. for <link rel="icon"> in static frameworks):

node_modules/@clearcms/design/clear-glyph.svg

Brand canon (locked)

• Glyph geometry — three white bars on rounded indigo square. 16×16 viewBox, 4px corner-radius square; bars at y = 3.5 / 7 / 10.5 with widths 10 / 7 / 10, 2px tall, 1px bar corner-radius.
• Primary color — oklch(0.52 0.06 252) (--clear-color-primary).
• Type — Inter (300/400/500/600/700) + JetBrains Mono (400/500).
• Wordmark — lowercase clear, Inter 600, tracking ≈ −0.01em.
• Domain — clear-cms.com (with hyphen).
• Tagline — headless CMS where your content stays yours.
• Hero — Your CMS is a folder.

Versioning

• Patch (0.1.x) — fixes, additive tokens, copy refinements.
• Minor (0.x.0) — new exports, Starlight overrides (planned for 0.2), self-hosted fonts (planned), theme variants.
• Major (x.0.0) — token renames or removals; brand-canon changes (require ADR).

Published under MIT. The wordmark and glyph are protected by trademark, not license.