Introduction
The GoodUnited design system turns the Figma file into working code. It follows shadcn for naming and structure, and GoodUnited for every color, type style, size and radius.
Complete: The Figma file is the source of truth for styling. shadcn shapes structure and naming only.
Complete: Semantic tokens only: bg-surface-raised, text-text-secondary, border-border-subtle. Never raw colors.
Complete: Only the twelve text styles: Poppins for headings and key metrics, Roboto for everything else.
Complete: Screens are composed from these components, blocks and templates before anything new is made.
Complete: Every screen works in light and dark, on phones, tablets and desktops.
How it is organized
The sidebar follows the Figma page order.
Building a screen
Start from a template, keep the shell, and fill its containers with components and blocks.
src/pages/inbox.tsx
import { AppShell, PageBody } from '@/components/blocks/app-layout'
import { KanbanBoard } from '@/components/blocks/kanban'
export default function Inbox() {
return (
<AppShell title='Inbox' activeItem='actions' showDate>
<PageBody title='Inbox' description='AI-recommended actions, reviewed and approved by your GoodUnited team'>
<KanbanBoard />
</PageBody>
</AppShell>
)
}Your rules
The Settings page shows the project guide every build follows, and lets you add your own rules, such as writing style or when to use drawers.
