@readysetcloud/ui

One brand. Every surface.

The design system behind Ready, Set, Cloud — a single npm package of tokens, components, and auth that keeps the newsletter dashboard, the bootcamp platform, and readysetcloud.io looking and behaving like one product.

Token-driven Light + dark for free React and plain CSS WCAG-minded

This guide is rendered with the package's own stylesheets and browser bundles — the swatches, specimens, and demos below read live values straight from ui/styles, so the guide can never drift from the shipped system.

Philosophy

Principles

Six rules keep three very different codebases converged on one brand.

One source of truth

Brand, components, and auth live in rsc-core/ui and nowhere else. Never fork or copy — change it here, version it, consume it.

Tokens, not hex

No app hardcodes a brand color. Everything goes through rgb(var(--primary-600)), the Tailwind preset scales, or the shipped classes.

Both themes for free

The token ramps auto-invert in dark mode. Use a single token class and both themes are correct — never stack dark: overrides on token colors.

Framework-optional

Every component ships twice: a typed React component and the plain CSS class it renders. Hugo pages and vanilla JS get pixel-identical UI.

Accessible by default

44px touch targets, ≥16px mobile inputs, visible keyboard focus, aria wiring baked into components. Don't override these down.

Typography with intent

Sora for headings, Manrope for body, JetBrains Mono for data. Raleway is the wordmark face only — never UI text.

Reach

The surfaces

Every Ready, Set, Cloud property consumes this package — each in the way that fits its stack.

Surface	Stack	Consumes via
Newsletter dashboard (Outboxed)	React SPA	`npm i @readysetcloud/ui`
Concurrency bootcamp platform	React SPA	`npm i @readysetcloud/ui`
Bootcamp course pages	Vanilla JS	hosted `auth.global.js` / `nav.global.js` / `ui.global.js`
readysetcloud.io	Hugo	hosted `styles/*.css`

Quick start

Get started

React apps install from npm; everything else links the hosted assets published on every rsc-core deploy.

React apps

Import the stylesheet once before app styles, and adopt the Tailwind preset so utility classes resolve to tokens.

npm install @readysetcloud/ui

// main.tsx — ALWAYS import the stylesheet once, before app styles
import '@readysetcloud/ui/styles.css';
import '@readysetcloud/ui/fonts.css'; // if the app doesn't load brand fonts itself

// tailwind.config.js
module.exports = {
  presets: [require('@readysetcloud/ui/tailwind-preset')],
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
    './node_modules/@readysetcloud/ui/dist/**/*.js' // REQUIRED
  ]
};

Everything else

Link the hosted assets. ui/<version>/ paths are immutable; ui/latest/ is a five-minute pointer.

<link rel="stylesheet" href="https://<assets-host>/ui/latest/styles/index.css">
<script src="https://<assets-host>/ui/latest/auth.global.js"></script>  <!-- window.rscAuth -->
<script src="https://<assets-host>/ui/latest/nav.global.js"></script>   <!-- window.rscNav -->
<script src="https://<assets-host>/ui/latest/ui.global.js"></script>    <!-- window.rscUi -->

Dive in