Design system

One system for citybound.co and the app

Tokens, the primitives, brand components, the app's own screens, and the marketing blocks, synced and template. Built on Tailwind and shadcn/ui, composed as blocks so every page is the same pieces in a new order.

llms.txt

Principles

Product-led

The site echoes the brand. Same tokens, same buttons, same voice. A visitor should recognize Citybound before they scroll.

One accent

Pink (#F5B5C8) does the work. The accent appears on the single most important element per screen — never sprinkled.

Dark by default

The base is #1A1A1A. Every surface, card, and section is a shade of dark. Light surfaces are the exception, used for contrast moments.

Semantic over literal

Use bg-[#1A1A1A], text-white, text-[#F5B5C8]. No raw slate or gray. The tokens are the brand.

Blocks over pages

Landing pages are compositions of blocks with data props. New page: new data, same blocks. The home page is seven blocks in a column.

Synced or template

A synced block (footer, nav, CTA) is used exactly as defined, everywhere, and changes once. A template block is a shape each page fills with its own words.

The product is the picture

A creator profile or activation dashboard on a marketing page is drawn from real data, never illustrated. Show the work, not a mockup.

Stack

StylingTailwind CSS with CSS variables in index.css. Tokens mapped in tailwind.config.js.

Primitivesshadcn/ui on Radix. Buttons, dialogs, inputs — each from its own file.

TypeSystem sans-serif. Bold black headings, regular body. No custom font loads on marketing pages.

Iconslucide-react, stroke 2, sized by the parent (w-5 h-5 default).

MotionFramer Motion. 200ms hover, 600ms enter, honors viewport once.

ThemingDark base (#1A1A1A). Light surfaces (#FFFFFF, #F5F0E8) for contrast sections.

Where things live

src/index.css                    tokens: colors, type scale, radius
src/tailwind.config.js          token → class mapping
src/components/ui/              primitives (shadcn, customized to brand)
src/components/citybound/       brand blocks: Hero, Services, Capabilities, Process, Results, Brands, ContactCTA, Footer
src/components/roster/           roster cards and live metric displays
src/components/onboarding/      onboarding wizard steps and uploads
src/components/intranet/         intranet template and portal blocks
src/components/org/              org chart nodes, dialogs, canvas
src/components/creators/         creator profile, collaboration, edit dialogs
src/pages/                      page compositions — blocks in a column
src/Layout.jsx                  shared layout: NavigationBar + page + Footer