Style & Component Guide

A human-readable reference showing the names and rules used by this sample project. People, AI systems, designers, and developers can point to the same terminology instead of describing “that box on page three.”

Project rule: Reuse an approved pattern when it fits. If a new pattern is needed, propose it first and document it after approval.

1. What is locked, controlled, and flexible?

LOCKED

Preserve

Accessibility minimums, semantic structure, security boundaries, secret handling, stable component names, and core navigation destinations.

CONTROLLED

Choose from approved options

Typography levels, spacing values, card styles, button patterns, resource types, and reusable page sections.

FLEXIBLE

Adapt to content

Paragraph length, examples, order of supporting details, and which approved blocks best communicate a particular resource.

APPROVAL REQUIRED

Propose first

New component families, new navigation levels, new brand colors, new interaction patterns, or changes that affect production/security behavior.

2. Typography

Typography system/type scale^* is the shared hierarchy. For this project, H1 identifies the primary page heading, H2 identifies major sections, and H3 identifies subsections/component headings. Heading levels communicate document hierarchy; they are not universal labels for particular font sizes or visual roles. The eyebrow is small context text above the H1.

EYEBROW / CONTEXT

H1 — Page heading

H2 — Major section heading

H3 — Subsection/component heading

Body text explains the content in readable paragraphs.

3. Color and design tokens

Color is referenced by purpose rather than by repeatedly inventing values. This is the idea behind a design token^*.

INK#17181c

MUTED#62656f

ACCENT#3156c8

PAPER#fbfbf8

BLACK ACTION#151515

4. Reusable blocks and components

Use stable names instead of location descriptions. See stable component IDs and naming conventions^*.

NAV-CARDLarge clickable destination card used on index pages.

RESOURCE-CARDOne resource entry: type/importance/topic, title, definition, “Use this language,” and optional copy action.

SEARCH-BARSearch field + action for finding content in ordinary language.

ASK-FLOATPersistent floating ASK control that opens a compact question panel.

PROMPT-BLOCKLong reusable prompt shown in a dark code-like surface with a Copy prompt button.

NOTE-CALLOUTEmphasized supporting guidance with accent border.

5. Prompt-copy pattern

Long prompts are treated as reusable project assets. The visible prompt is selectable, and the black Copy prompt control copies the full text. This follows the “build once, reuse often” principle and reduces repeated prompting.

Example

Use the approved project components and style rules. If the request requires a new pattern, recommend it first instead of inventing it silently.

6. Interaction and accessibility

Buttons, links, and clickable cards must have clear affordance^*, visible focus, sufficient contrast, and appropriate semantics. A button^* performs an action; a link normally navigates somewhere. Large clickable cards are still links when their primary purpose is navigation. Accessibility, privacy/security, and maintainability are cross-cutting project requirements: they should influence discovery, standards, architecture, implementation, verification, and maintenance rather than being treated only as final checks.

7. Project vocabulary

When directing AI, prefer the names in this guide: NAV-CARD, RESOURCE-CARD, SEARCH-BAR, ASK-FLOAT, PROMPT-BLOCK, and NOTE-CALLOUT. If you do not know a name, describe the visible location/function and ask AI to identify it before editing.

Safe terminology prompt

I may be using the wrong terminology. Based on the element's location and function, tell me what it is normally called and which approved project component it corresponds to. Confirm the target before editing.