t2000 design system — Geist Design System tokens + shadcn/ui primitives themed for the t2000 brand family.
t2000 design system — Geist Design System tokens + shadcn/ui primitives themed for the t2000 brand family.
Consumed by:
t2000.ai — apps/web (accent: #0072F3 blue)mpp.t2000.ai — apps/gateway (accent: #12A594 teal)suimpp.dev — separate repo (accent: monochrome)developers.t2000.ai — apps/docs Mintlify (token hex values synced manually)pnpm add @t2000/ui
Several primitives (Dialog, DropdownMenu, Sheet, Tooltip) ship with data-[state=open]:animate-in / animate-out utility classes for their open/close transitions. You must install the matching plugin or those primitives will render with no animation (functional, but visually janky):
| Your Tailwind version | Plugin to install | How it's wired |
|---|---|---|
| Tailwind v4 | tw-animate-css | @import "tw-animate-css"; in globals.css (top, alongside @import "tailwindcss";) |
| Tailwind v3 | tailwindcss-animate | plugins: [require('tailwindcss-animate')] in tailwind.config.ts |
# Tailwind v4 consumers
pnpm add -D tw-animate-css
# Tailwind v3 consumers
pnpm add -D tailwindcss-animate
Pick one path based on which major version of Tailwind you run. The two paths are mutually exclusive — don't combine them.
/* app/globals.css */
@import "tailwindcss";
@import "tw-animate-css"; /* required for primitive animations */
@import "@t2000/ui/tokens"; /* --ds-* + --fg-* primitives */
@import "@t2000/ui/tokens/page"; /* optional: t2k-* utility classes */
@import "@t2000/ui/tokens/responsive";/* optional: responsive helpers */
@import "@t2000/ui/tokens/theme"; /* @theme block — registers utilities */
:root { --t2k-accent: var(--ds-blue-700); } /* per-property accent */
You don't need a tailwind.config.ts with v4 — the @theme block in tokens/theme registers bg-background, text-foreground, font-sans, etc.
// app/layout.tsx
import '@t2000/ui/tokens';
import '@t2000/ui/tokens/page';
import '@t2000/ui/tokens/responsive';
import './globals.css'; // your --t2k-accent override
// tailwind.config.ts
import t2000UiPreset from '@t2000/ui/tailwind-preset';
import tailwindcssAnimate from 'tailwindcss-animate';
export default {
presets: [t2000UiPreset],
plugins: [tailwindcssAnimate], // required for primitive animations
content: [
'./app/**/*.{ts,tsx}',
'./node_modules/@t2000/ui/dist/**/*.js',
],
};
/* app/globals.css */
:root { --t2k-accent: var(--ds-blue-700); }
import { Button, Card, cn } from '@t2000/ui';
export function Hero() {
return (
<Card className={cn('p-6')}>
<Button>Get started</Button>
</Card>
);
}
Every primitive references var(--t2k-accent). Each consumer redefines it in its own globals.css:
| Property | Accent | Override |
|---|---|---|
t2000.ai + developers.t2000.ai | #0072F3 blue | :root { --t2k-accent: var(--ds-blue-700); } |
mpp.t2000.ai | #12A594 teal | :root { --t2k-accent: var(--ds-teal-700); } |
suimpp.dev | monochrome (links only) | :root { --t2k-accent: var(--ds-blue-700); } (no fills) |
Default theme is dark (matches Geist). To switch to light, set data-theme="light" on <html> (or data-mode="light" on any ancestor):
// app/layout.tsx — server-rendered light mode
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" data-theme="light">
<body>{children}</body>
</html>
);
}
// Client-side toggle
'use client';
import { useEffect, useState } from 'react';
export function ThemeToggle() {
const [theme, setTheme] = useState<'dark' | 'light'>('dark');
useEffect(() => {
document.documentElement.dataset.theme = theme;
}, [theme]);
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
{theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
</button>
);
}
CSS variables only — port of Vercel's Geist Design System. 314 custom properties under --ds-* (primitive scales) and --fg-* (semantic foregrounds) namespaces.
Canonical hex values synced to apps/docs/docs.json (Mintlify cannot import this package; sync is manual per token edit):
| Var | Hex | Used by |
|---|---|---|
--ds-blue-700 | #0072F3 | t2000.ai, developers.t2000.ai, suimpp.dev link color |
--ds-teal-700 | #12A594 | mpp.t2000.ai |
--ds-background-100 | #0a0a0a | All surfaces (dark mode default) |
--ds-background-200 | #000000 | All page backdrops |
Seven Tailwind-reserved names (--font-sans, --font-mono, --font-display, --radius-sm, --radius-md, --radius-lg, --ease-out) collide with Tailwind v4's @theme namespaces. To avoid CSS custom-property cycles, these are stored under namespaced primitives and re-exported as bare-name aliases:
| Primitive (canonical) | Alias (consumer-facing) |
|---|---|
--ds-font-sans | --font-sans |
--ds-font-mono | --font-mono |
--ds-font-display | --font-display |
--ds-radius-sm | --radius-sm |
--ds-radius-md | --radius-md |
--ds-radius-lg | --radius-lg |
--ds-ease-out | --ease-out |
You can reference either form. The Tailwind v3 preset and page-level utility classes use the bare aliases; the Tailwind v4 @theme block uses the --ds-* primitives.
Consumers wire Geist Sans + Geist Mono via next/font/google in their root layout. @t2000/ui tokens reference the resulting CSS variables (--font-sans, --font-mono).
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body>{children}</body>
</html>
);
}
MIT
FAQs
t2000 design system — Geist Design System tokens + shadcn/ui primitives themed for the t2000 brand family.
The npm package @t2000/ui receives a total of 0 weekly downloads. As such, @t2000/ui popularity was classified as not popular.
We found that @t2000/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.
Security News
During a UK cyber test, a Mythos 5 agent used sockpuppets, social engineering, and prompt injection to try to get a maintainer to merge malware.