Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/first-fluke/fullstack-starterWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/rules/first-fluke/fullstack-starter/design-tokens-guide)<a href="https://agentmods.dev/rules/first-fluke/fullstack-starter/design-tokens-guide"><img src="https://agentmods.dev/badge/rules/first-fluke/fullstack-starter/design-tokens-guide/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/rules/first-fluke/fullstack-starter/design-tokens-guide"><img src="https://agentmods.dev/badge/rules/first-fluke/fullstack-starter/design-tokens-guide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00012 | $0.02249 |
| Opus 5.5 | $0.00005 | $0.00900 |
| Sonnet 5.5 | $0.00002 | $0.00450 |
| Haiku 4.5 | $0.00001 | $0.00225 |
Grade A, and why
design-tokens-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 284 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Tokens Workflow
Source of Truth
The single source of truth for all design tokens is located in packages/design-tokens/src/tokens.ts.
- Do NOT edit
apps/web/src/app/[locale]/tokens.cssdirectly - it's auto-generated. - Do NOT edit
apps/mobile/lib/core/theme/generated_theme.dartdirectly - it's auto-generated. - ALWAYS make changes in
packages/design-tokens/src/tokens.ts.
Color Space
- SSOT Format: OKLCH (Lightness, Chroma, Hue)
- Web Output: CSS OKLCH variables (P3 wide-gamut support)
- Mobile Output: Flutter
Color.from(colorSpace: ColorSpace.displayP3)for P3 colors
Token Structure
// packages/design-tokens/src/tokens.ts
export interface OklchColor {
l: number; // Lightness: 0 (black) to 1 (white)
c: number; // Chroma: 0 (gray) to 0.4+ (vivid)
h: number; // Hue: 0-360 degrees on color wheel
a?: number; // Alpha: 0-1, defaults to 1
}
const oklch = (l: number, c: number, h: number, a?: number): OklchColor => ({
l, c, h, ...(a !== undefined && { a }),
});
export const tokens = {
color: {
light: {
// Accent colors
accent: oklch(0.97, 0, 0),
accentForeground: oklch(0.205, 0, 0),
// Background & Foreground
background: oklch(1, 0, 0),
foreground: oklch(0.145, 0, 0),
// Border & Input
border: oklch(0.922, 0, 0),
input: oklch(0.922, 0, 0),
// Card
card: oklch(1, 0, 0),
cardForeground: oklch(0.145, 0, 0),
// Chart colors
chart1: oklch(0.646, 0.222, 41.116),
chart2: oklch(0.6, 0.118, 184.704),
chart3: oklch(0.398, 0.07, 227.392),
chart4: oklch(0.828, 0.189, 84.429),
chart5: oklch(0.769, 0.188, 70.08),
// Destructive (danger/error)
destructive: oklch(0.577, 0.245, 27.325),
destructiveForeground: oklch(1, 0, 0),
// Muted (subtle)
muted: oklch(0.97, 0, 0),
mutedForeground: oklch(0.556, 0, 0),
// Popover (dropdown/tooltip)
popover: oklch(1, 0, 0),
popoverForeground: oklch(0.145, 0, 0),
// Primary (Lime Green)
primary: oklch(0.85, 0.2, 130),
primaryForeground: oklch(0.205, 0, 0),
ring: oklch(0.708, 0, 0),
// Secondary
secondary: oklch(0.97, 0, 0),
secondaryForeground: oklch(0.205, 0, 0),
// Sidebar
sidebar: oklch(0.985, 0, 0),
sidebarAccent: oklch(0.97, 0, 0),
sidebarAccentForeground: oklch(0.205, 0, 0),
sidebarBorder: oklch(0.922, 0, 0),
sidebarForeground: oklch(0.145, 0, 0),
sidebarPrimary: oklch(0.205, 0, 0),
sidebarPrimaryForeground: oklch(0.985, 0, 0),
sidebarRing: oklch(0.708, 0, 0),
},
dark: { /* similar structure with dark mode values */ },
},
// Radius (pixels)
radius: {
base: 10,
sm: 6,
md: 8,
lg: 10,
xl: 14,
},
// Spacing (pixels)
spacing: {
xs: 4,
sm: 8,
md: 12,
base: 16,
lg: 20,
xl: 24,
"2xl": 32,
"3xl": 48,
},
// Typography
typography: {
fontFamily: {
sans: "Noto Sans KR",
mono: "Noto Sans Mono",
},
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
xl2: 24,
xl3: 30,
xl4: 36,
xl5: 48,
xl6: 60,
xl7: 72,
xl8: 96,
},
fontWeight: {
regular: 400,
medium: 500,
bold: 700,
black: 900,
},
lineHeight: {
xs: 1.0,
sm: 1.25,
base: 1.5,
lg: 1.75,
xl: 1.75,
xl2: 2.0,
xl3: 2.25,
xl4: 2.5,
},
letterSpacing: {
tight: -0.5,
normal: 0,
wide: 0.8,
},
},
// Style
style: {
borderWidth: 1,
disabledOpacity: 0.5,
hoverDarken: 0.05,
hoverLighten: 0.075,
},
// Semantic colors (convenience layer)
semantic: {
info: oklch(0.6, 0.2, 260),
success: oklch(0.65, 0.2, 145),
warning: oklch(0.75, 0.18, 85),
},
};
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 284 lines · 12 tokens per session scan A 1d66fde3f0cb
design-tokens-guide is a cursor rule published in the GitHub repository first-fluke/fullstack-starter (224 stars, last pushed today), licensed MIT. It adds 12 tokens to every session and 2,249 once invoked, about $0.0000 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other cursor rules, from other repositories
ui-design-system
UI, design tokens and mobile-first rules.
desktop-layout
A set of desktop web-page layout rules covering content widths, spacing, text sizes, corner rounding, buttons, icons, and narrow-screen behaviour.
ui-components
Cursor rule "ui-components" from FluroAsh/nextjs-mdx-portfolio, covering ui components and styling, component libraries, shadcn/ui, custom components and styling approach.
accessibility-guidelines
Accessibility guidelines for Angular + TypeScript applications to ensure inclusive design and compliance with WCAG standards.
accessibility
Accessibility standards.
ui-components
Cursor rule "ui-components" from muzaffar640/commitpress, covering ui components, component organization, ui component guidelines, component examples and button component.