GoAsk Design System

For the internal GoAsk dev web. Poppins, one teal accent, roomy pill controls, flat white cards on a neutral grey ground, the same shared design system.

One source

Tokens

31 colours in light and dark, type, spacing, radius and shadow, read from tokens.json.

64 components

Components

53 with a CSS and a React version side by side, 11 React only, 7 also as web components. Every one has code to copy.

203 icons

Icons

Lucide picked for dashboards: a sprite for plain HTML, lucide-react for React, the same names. Every other lucide icon is searchable.

Ready pages

Blocks

A full dashboard (sidebar, KPIs, chart, data table) and a stats overview with every stat component on one page.

Four ways to use it

Plain HTML, no build

variables.css + ads.css, then the ads- classes.

Tailwind v4 + React

tailwind-theme.css in globals.css, then npx shadcn add comes out on-brand.

Web components (Lit)

ads-elements.js once, then <ads-button>, <ads-status-card>: the same look in any app.

JavaScript

tokens.js exports every value for light and dark, for charts and canvas.