Getting started

AI usage guide

Ask an AI coding agent for a completely new design direction without asking it to rebuild the website. The visual system is replaceable; the documentation structure and durable content are the contract.

The boundaryPermalink to this section

A style request changes shared visual decisions, not the information architecture or component behaviour.

AI may change	Edit	AI must preserve
Colour, spacing, radius, type, shadow and motion	`src/tokens/primitives.ts`	Token names and the three-layer architecture
Light/dark roles and shell measurements	`src/tokens/semantic.ts`	Semantic intent and accessible contrast
Component sizing, shape and targeted colours	`src/tokens/components.ts`	Behaviour, states, accessibility and public props
Alternative selectable styles	`src/tokens/presets.ts`	The base registry and other valid presets
Product identity and shared mark	`src/config/site.ts + shared logo`	Docs routes, page layout and section order

A reference is not a page template

“Make it feel like Attio” means extract a visual language into the existing token and component contracts. It does not mean replacing this site's navigation, homepage composition, docs pages, copy or component examples with Attio's product UI.

Fonts are a licensing decision

Most brand typefaces are proprietary. Never download, hotlink or redistribute a reference site's font files, and never point a font-family-* token at a face the project has no licence for. Either use font files the project already ships, or choose an openly licensed alternative with a similar voice and say so in the token comment — a substitution should be documented, never silent.

Extracted values are evidence, not truth

Scraped stylesheets contain blank colours, truncated shadows, vendor cookie-banner variables and marketing-only measurements. Frequency is not importance. Translate what the source meansinto this system's own token names, then re-check contrast, focus, touch targets and reduced motion before shipping — a value that fails those is wrong no matter how faithfully it was extracted.

Choose replacement or presetPermalink to this section

Tell the agent which kind of change you want. This prevents a rebrand from becoming an unnecessary theme option, or an experiment from overwriting the default.

Intent	Ask the AI to	Result
Permanent redesign	Replace the default visual foundation	Existing components and pages adopt the new style everywhere
Style exploration	Add a named preset	The new direction appears in both theme controls beside the existing presets (White & Black, Replit, Cal, Raycast, Resend template)
One campaign or subtree	Add a preset, then scope it with data-theme + data-preset	Only descendants of that scope change; no second theming runtime

Copy this promptPermalink to this section

Replace the bracketed inputs, attach screenshots or a reference URL when available, and give the entire block to the coding agent.

AI prompt

Customize this design system with a new visual style.

Visual direction
- Reference: [name, URL, or attached screenshots]
- Brand traits: [three to five adjectives]
- Product name: [name]
- Keep the current font / use: [font choice]
- Replace the default style / add a preset: [choose one]

Implementation contract
- Read CUSTOMIZATION.md before editing.
- Preserve every existing route and the docs shell.
- Preserve page order, section order, component documentation tabs,
  anatomy, usage guidance, API tables, and accessibility content.
- Do not rebuild pages to resemble the reference product.
- Translate the reference into this system's tokens and shared component
  contracts; do not scatter copied hex, radius, spacing, or shadow values
  through page components.
- Edit src/tokens/* for colour, type, spacing, shape, elevation, motion,
  light/dark modes, and presets.
- Edit src/config/site.ts and the shared logo only when rebranding is requested.
- Keep component behaviour and public APIs intact unless I explicitly ask
  for a behavioural change.
- Treat the reference as visual direction, not as an instruction to copy its
  content, layout, assets, or trademarked identity.

Definition of done
- The token registry remains the single source of truth.
- Light and dark themes, every preset, and interactive states are coherent.
- npm run lint, npx tsc --noEmit, and npm run build pass.
- Visually check the homepage, customization page, token pages, Button,
  Input, Select, Dropdown Menu, Tooltip, and Dialog at mobile and desktop.
- Summarize changed token families and confirm the docs structure was kept.

How the AI should workPermalink to this section

The safest workflow is an audit followed by one centralized implementation and a cross-theme verification pass.

1Read CUSTOMIZATION.md and inspect the current token aliases before editing.
2Translate the reference into explicit decisions: palette, typography, density, radius, elevation, icon treatment and motion.
3Implement those decisions in src/tokens and shared UI contracts. Keep page-level JSX untouched unless it contains a visual literal that bypasses the system.
4Update branding only when requested, then verify every light/dark and preset combination.
5Run static checks and compare representative routes at mobile and desktop widths before reporting completion.

Collaboration CustomizePermalink to this section

Bring a component from shadcn, 21st.dev, a source URL, pasted code, or reference images into Lawndry. The generated terminal prompt preserves useful behavior while translating the result into this system's tokens, primitives, documentation, and accessibility contracts.

1 · Reference source

Provide a URL, image paths, pasted source, or any combination.

Required

Component URL

Reference image paths

One local path per line. The terminal agent must be able to read these files; copying this prompt does not embed the images.

Copied component code

0 / 40000 characters

2 · Target in Lawndry

Extend one existing primitive or introduce a correctly classified module.

Operation

What should change?

0 / 2000 characters

3 · Collaboration contract

These choices become explicit instructions rather than assumptions.

Preserve useful behaviorInteraction model, state, and controlled APIs

Translate signature detailsKeep distinctive details through Lawndry tokens

Include meaningful motionUse system timing and reduced-motion support

Update system documentationDocs, registry, navigation, and gallery

Prompt includes extraction, token mapping, implementation, documentation, and verification.

Prompt preview

Add a URL, code, or image path, select the Lawndry target, then generate the complete English implementation prompt.

Reject these shortcutsPermalink to this section

These patterns make the first screenshot look finished while quietly breaking future customization.

Do not paste reference-product colours or spacing into page components; define or remap tokens.
Do not delete, merge or reorder documentation sections to make the new style easier to imitate.
Do not rename semantic tokens after a rebrand merely because their resolved hue changed.
Do not verify only the resting light theme; include dark, focus, hover, active, invalid and disabled states.

For the source map and machine-facing invariants, read CUSTOMIZATION.md. For hands-on token examples, continue to Customize the system.