Timeplus Design System

Generate UI that looks like the Timeplus Console: clean, professional, and

flat, built on a neutral gray scale with a single pink accent (#D53F8C) for

primary actions, the Inter typeface, and a consistent 4px corner radius.

The normative source of truth is DESIGN.md — a

google-labs-code/design.md

token file. Its YAML front matter holds the exact color, typography, spacing,

radius, and component tokens; its prose explains how to apply them. **Use the

token values verbatim.**

Quick Reference

When to Read Reference Files

• DESIGN.md — Read first for any Timeplus UI task. Provides the exact

palette (gray-100…gray-900, pink-400/500, red-400/500), the Inter type scale,

the 4px radius rule, the flat/no-shadow elevation model, the 4px-based spacing

scale, per-component tokens and states, and the do's & don'ts.

• references/components.md — Read when implementing. Full CSS,

tailwind.config.js color/font extension, CSS custom properties, and React

components for buttons (primary/secondary/destructive), text inputs, toggle

switches, cards, tables, links, dividers, and icons, plus accessibility

(WCAG AA contrast, focus states, touch targets) and asset guidance.

Core Rules (at a glance)

• Font: Inter only — Regular (400) for content, Semi-Bold (600) for headings/controls. Never below 12px.
• Color: Neutral grays carry the UI; pink-500 marks the single primary action; red-500 is for destructive/error only.
• Surfaces: Page background is warm off-white #F7F6F6; content sits on white cards with a 1px #DAD9DB border.
• Shape: 4px radius everywhere (pill only for toggles). No shadows — separate with borders.
• Spacing: 4px-based scale; 24px container padding, 16px between form fields.
• Buttons: 32px tall. Inputs: 40px tall. Always provide a visible 2px pink focus ring.

Validating changes

After editing DESIGN.md, optionally lint it against the format spec:

npx @google/design.md lint DESIGN.md

You can also export the tokens to Tailwind or W3C DTCG format:

npx @google/design.md export --format css-tailwind DESIGN.md > theme.css