pn-design-system

pn-design-system is a cursor rule for coding agents from perniemann/pnCore. It costs 803 tokens per session, scanned A, original, MIT.

A set of CSS design-system rules for colors, spacing, fonts, borders, and shadows. Design tokens are named reusable values that keep these choices consistent across an interface.

In plain words
What is it for?
Use it when editing CSS, SCSS, or styled components, especially when adding reusable interface styles or theme changes.
Why use it?
It prevents scattered one-off styles and makes themes such as light and dark mode easier to maintain.

Cursor rule

Install

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.

agentmods
npx agentmods add rules/perniemann/pncore/pn-design-system
Clone the repo
git clone --depth 1 https://github.com/perniemann/pnCore

Wrote 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.

agentmods badge for pn-design-system

README.md
[![agentmods](https://agentmods.dev/badge/rules/perniemann/pncore/pn-design-system.svg)](https://agentmods.dev/rules/perniemann/pncore/pn-design-system)
Your own site
<a href="https://agentmods.dev/rules/perniemann/pncore/pn-design-system"><img src="https://agentmods.dev/badge/rules/perniemann/pncore/pn-design-system.svg" alt="Measured on agentmods" height="20"></a>
Per session 803 This file is loaded in full into every session.
When invoked 803 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00803 $0.00803
Opus 5 $0.00402 $0.00402
Sonnet 5 $0.00161 $0.00161
Haiku 4.5 $0.00080 $0.00080

Measured 4d ago against content hash 91daf880c45d, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

pn-design-system 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 4d 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.

packages/pn-core-mcp/content/rules/pn-design-system.mdc · 54 lines

How it starts

The opening of the file, as written. The whole thing — 54 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design system rules

Token Usage

  • Use design tokens (CSS variables or theme objects) over raw values for color, spacing, typography, radius, and shadows.
  • No one-off hex colors, raw px values, or literal font families in components — use tokens.
  • Semantic token names in components (--color-primary, --space-4). Reserve primitive tokens (--blue-500) for token definition files only.
  • Keep theme overrides (light/dark) in a single location. Components reference tokens that switch by theme — they don't know about themes directly.
  • When adding new values that may be reused: add as a token first. Document intentional one-offs.

Color Tokens (OKLCH)

  • Use OKLCH for new color systems — perceptually uniform, better dark mode scaling than HSL.
  • Tint neutrals with the brand hue at chroma 0.005–0.01 for subconscious cohesion. Never pure gray.
  • Never use #000 or #fff — always tint. Pure black/white don't exist in nature.
  • Two-layer token hierarchy:
    • Primitive: --blue-500: oklch(60% 0.15 250) — never used directly in components
    • Semantic: --color-primary: var(--blue-500) — what components reference
  • Redefine semantics only per theme (e.g. [data-theme="dark"]); primitives stay defined once.

Full primitive/semantic/dark-mode OKLCH token example and palette depth: pn-color-system skill.

Dark Mode Architecture

  • Dark mode is not inverted light mode — define independent semantic colors per theme.
  • Dark mode depth uses lighter surfaces, not shadows: --surface-1 through --surface-3 with increasing lightness.
  • Desaturate accent slightly in dark mode (reduce chroma by ~0.02).
  • Reduce text contrast slightly in dark mode — pure white on pure black strains eyes.

Spacing Tokens

  • Use a base-4 or base-8 scale (--space-1: 0.25rem through --space-32: 8rem).
  • Spacing MUST create rhythm: tight spacing (--space-1 to --space-3) within components, generous spacing (--space-12 to --space-24) between sections.
  • Never padding: 24px everywhere — different contexts need different densities.

Read the full file on GitHub · 54 lines

Changes

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.

  1. 4d ago First seen · 54 lines · 803 tokens per session scan A 91daf880c45d

Subscribe to this mod's changes

pn-design-system is a cursor rule published in the GitHub repository perniemann/pnCore (0 stars, last pushed yesterday), licensed MIT. It adds 803 tokens to every session, about $0.0040 per session on Opus 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-08-31.

Related

Other cursor rules, from other repositories

t-800-mandatory-routing

ОБЯЗАТЕЛЬНО: создание и правка субагентов, skills, commands, rules, hooks — только через T-800 Agent (цех Skynet). Сначала intake? + scout + research DEEP + brain-lead, затем t-800-factory. Не собирать артефакты ad-hoc в main chat.

Khar-AG/t-800-agent · 1,682 tokens

t-800-operator-routing

Маршрутизация к T-800 Operator для русскоязычных новичков: первый запуск Cursor, вопросы про Agent/Ask/Plan/Debug, rules, skills, MCP, автоматизацию, просьбы объяснить «на пальцах». Делегируй Task(t-800-operator), не дублируй длинные объяснения в основном чате.

Khar-AG/t-800-agent · 76 tokens

t-800-factory-routing

Маршрутизация к T-800 Factory: создание субагентов, проектирование плагина, интеграция агентов, реестр, граф связей, масштабирование 100+ agents. Делегируй Task(t-800-factory), не создавай агентов ad-hoc в main chat.

Khar-AG/t-800-agent · 65 tokens

t-800-knowledge-refresh

Обновление базы знаний T-800: когда появились новые функции Cursor, устарел manifest (>30 дней), есть UPDATE-QUEUE.md с pending, пользователь спрашивает про фичу которой нет в KB, или после changelog Cursor. В проекте Cursor Junior делегируй обслуживание Task(t-800-maintainer).

Khar-AG/t-800-agent · 0 tokens

t-800-cloud-hub-routing

Маршрутизация Cloud Hub Automation Setup: при /t800-cloud-hub, /t800-hub-setup или правках /cloud-hub/ → Task(t-800-cloud-hub-lead). Не always-on.

Khar-AG/t-800-agent · 0 tokens

codesynapse-cli

Use this rule to answer codebase architecture questions, trace dependencies, find callers/callees, calculate blast radius, and explore the code graph. Triggers on: "how does X work", "what handles Y", "where is Z defined", "explain the mechanism", "who calls", "blast radius", "shortest path", "trace request flow"…

sohilladhani/codesynapse · 0 tokens