Getting started

Set up RAMTT in your project. The system is designed for Next.js + Tailwind CSS v4.

Installation

Copy the component files into your project. No npm package yet.

# Clone the design system
git clone <repo-url>

# Copy into your project
cp -r components/ui/ your-project/components/ui/
cp -r components/icons/ your-project/components/icons/
cp -r components/charts/ your-project/components/charts/
cp lib/ui.ts your-project/lib/ui.ts
cp components/ui/tokens.css your-project/components/ui/tokens.css

Setup tokens

Import tokens.css in your root layout, before globals.css.

// app/layout.tsx
import '@/components/ui/tokens.css'
import './globals.css'

Setup font

Satoshi is the only font. Load it as a variable font.

// app/layout.tsx
import localFont from 'next/font/local'

const satoshi = localFont({
  src: '../public/fonts/Satoshi-Variable.woff2',
  variable: '--font-sans',
  display: 'swap',
})

// In <html>:
<html className={satoshi.variable}>
  <body className="font-sans antialiased bg-canvas text-text-primary">
    {children}
  </body>
</html>

Tailwind CSS v4

Use @theme tokens in globals.css. No tailwind.config.js.

// app/globals.css
@import "tailwindcss";

@theme {
  --font-sans: "Satoshi", system-ui, sans-serif;
  --font-label: "Satoshi", system-ui, sans-serif;
  /* ... see globals.css for full @theme tokens */
}

Import components

All components export from a single barrel file.

import { Button, Badge, Card, Input } from '@ramtt/ui/components'
import { cn, WEIGHT, BORDER, RADIUS } from '@ramtt/ui'

// UI constants are in lib/ui.ts — use them instead of hardcoded values
import { FONT, LABEL_STYLE, VALUE_STYLE, MUTED_STYLE } from '@ramtt/ui'

Principles

Monochrome UI

Color is reserved for data (charts, zones, status). UI chrome uses the warm neutral scale exclusively. No colored buttons, no accent-tinted headers.

Single font, weight hierarchy

Satoshi for everything — body, labels, numbers. Weight communicates importance: 400 (body), 450 (metadata), 500 (badges), 550 (headings). Never bold, never italic.

0.5px hairline borders

Every border is 0.5px solid var(--n400). No 1px, no 2px (except underline tabs). No decorative shadows — RAMTT is flat.

cursor: default everywhere

Buttons, links, and interactive elements all use default cursor. Only text inputs get cursor: text.

lib/ui.ts is the source of truth

Never hardcode font weights, border widths, border radii, or transition values. Import constants from lib/ui.ts. This ensures consistency across all 83 components.

Inventory

134 UI components (components/ui/)

46 chart primitives (components/charts/primitives/)

126 icons × 3 variants + 8 animated + 12 context + 11 morph + 30 reactive

8 neutral tokens + 4 semantic colors + 4 border radii + 7 spacing stops