Foundations

Yellow is the only chromatic color in the system. It signals interaction; everything else is monochrome.

The Tollerud mark is a single continuous path — a stylised T in acid yellow (#FFFF00). There is no separate wordmark; use the monogram everywhere the brand needs to appear at small scale.

import { Monogram } from '@tollerud/ui'

// Default — acid yellow on dark surfaces
<Monogram size={26} />

// Light-mode nav / cards
<Monogram color="black" size={20} />

// On tinted or photo backgrounds
<Monogram color="white" className="h-5 w-auto" />

import { Button, TopNav } from '@tollerud/ui'

<TopNav
  projectName="Dashboard"
  navItems={[
    { label: 'Overview', href: '/', active: true },
    { label: 'Services', href: '/services' },
    { label: 'Logs', href: '/logs' },
  ]}
  actions={<Button size="sm" variant="primary">Deploy</Button>}
/>

import { DashboardShell, PageHeader } from '@tollerud/ui'

<DashboardShell
  projectName="Dashboard"
  pageTitle="Overview"
  sidebarItems={[
    { id: 'overview', label: 'Overview', href: '/', active: true },
    { id: 'services', label: 'Services', href: '/services' },
    { id: 'settings', label: 'Settings', href: '/settings' },
  ]}
  header={<PageHeader title="Overview" description="Fleet health at a glance." />}
>
  {/* page content */}
</DashboardShell>

Used sparingly for status only — kept muted so yellow stays the loudest thing on screen.

CSS variable aliases for background, foreground, card, and accent. Components reference these — re-theming is a matter of remapping nine variables.

Inter for display and body, JetBrains Mono for code, metrics and terminal moments. Tight tracking on display sizes.

A 4px base grid. These eight steps cover the vast majority of layout.

Two modes: comfortable (default) and compact. Set data-density='compact' on any container, or use density='compact' directly on Card. Live demo → Components.

Quick and confident. Durations stay short; easing does the expressive work. Everything here respects prefers-reduced-motion.

Docs demos use lucide-react via the Icons registry (24px grid, 1.8 stroke). Yellow is reserved for interactive icons — most sit in the current text color.

// 1. Map a lucide icon in docs-app/components/kit/icons.jsx:
import { Container } from 'lucide-react'
// ...
container: icon(Container),

// 2. Use it anywhere — by component or by name string:
<Icons.container size={18}/>
<StatCard icon="container" .../>   // components that take an icon prop

Direct. Technical. Warm-but-not-corporate. Think terminal prompt, not marketing email.

Tia — Tollerud Infrastructure Agent — is the brand mascot. Cel-shaded monochrome gakuran, amber eyes, gold buttons. A brand signature, not a UI icon. Use sparingly on landing pages, about sections, agent-running moments and loading states.

Portraitbrand/tollerud-avatar.svg

Waist-up wave — the default avatar for nav badges, chat bubbles, and compact brand moments. PNG variant (brand/tollerud-avatar.png) ships for hero-scale renders with drop shadow.

Full figurebrand/tollerud-avatar-full.svg · .png

Head-to-toe illustration for hero sections, empty states, and onboarding. PNG variant (brand/tollerud-avatar-full.png) ships for hero-scale renders with drop shadow.

Do

Use portrait for avatars, chat, and compact UI chromeUse full figure for hero and onboarding momentsPlace on noir/black or grain-gradient backgroundsOne Tia per viewport — she is a signature, not wallpaper

Don't

Use Tia as a generic user avatar or icon substituteCrop below the shoulders on the full-figure assetPlace on light backgrounds without a dark scrimInline the SVG — reference the asset file instead

tia-avatar.jsxCopy

import { TiaPortrait, TollerudAvatarFull } from '@/components/brand'

// Portrait — SVG for crisp scaling, PNG for hero glow
<TiaPortrait width={96} alt="Tia" />
<TiaPortrait variant="png" height={340} glow alt="Tia" />

// Full figure — SVG for docs panels, PNG for hero glow
<TollerudAvatarFull height={480} alt="Tia" />
<TollerudAvatarFull variant="png" height={520} glow alt="Tia" />