A set of rules for using the Pastel color system with Tailwind CSS, a utility-based styling framework. It specifies color class names for regular, semantic, background, border, and fill colors.

Use it when styling Tailwind CSS interfaces that should follow the Pastel palette, especially forms, interactive controls, content containers, and semantic UI states.

It keeps colors and their meaning consistent across the interface, including text, controls, backgrounds, borders, and disabled states.

color — Cursor rule for Cursor by innei-template: A set of rules for using the Pastel color…

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/innei-template/smart-webapp-template/color

Clone the repo

git clone --depth 1 https://github.com/innei-template/smart-webapp-template

Made for: Cursor.

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.

README.md

[![agentmods](https://agentmods.dev/badge/rules/innei-template/smart-webapp-template/color.svg)](https://agentmods.dev/rules/innei-template/smart-webapp-template/color)

Your own site

<a href="https://agentmods.dev/rules/innei-template/smart-webapp-template/color"><img src="https://agentmods.dev/badge/rules/innei-template/smart-webapp-template/color.svg" alt="Measured on agentmods" height="20"></a>

Per session 3 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,032 The whole file, excluding the scripts and references it only reads on demand.

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.

Model	Per session	Once invoked
Fable 5	$0.00003	$0.01032
Opus 5	$0.00002	$0.00516
Sonnet 5	$0.00001	$0.00206
Haiku 4.5	$0.00000	$0.00103

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

Security

Grade A, and why

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

.cursor/rules/color.mdc · 98 lines

How it starts

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

Pastel Colors for TailwindCSS

You should use @https://github.com/Innei/Pastel Pastel color system with kawaii-inspired OKLCH colors and TailwindCSS v4 integration.

Use Pastel color system with Tailwind classes. Important: Always use the correct Tailwind prefix for each color category:

Regular Colors: text-blue, bg-pink, border-purple (same for green, orange, yellow, sky, red, brown, gray, neutral, black, white)

Semantic Colors:

Text: text-text, text-placeholder-text, text-link, text-disabled-text
Background: bg-background, bg-background-secondary, bg-background-tertiary, bg-background-quaternary, bg-background-quinary
Border: border-border, border-separator
Fill: bg-fill, bg-fill-secondary, bg-fill-tertiary, bg-fill-quaternary, bg-fill-quinary
- Use for form controls, interactive elements, and content containers that need subtle background colors
- bg-fill: Primary fill for buttons, inputs, cards
- bg-fill-secondary: Secondary elements like disabled states, inactive tabs
- bg-fill-tertiary: Subtle backgrounds for hover states, secondary actions
- bg-fill-quaternary & bg-fill-quinary: Very subtle backgrounds for grouping or visual hierarchy

Material Colors: bg-material-ultra-thick, bg-material-thick, bg-material-medium, bg-material-thin, bg-material-ultra-thin, bg-material-opaque

Use for glass morphism effects, overlays, and semi-transparent surfaces
bg-material-opaque: Solid surfaces like modals, dropdowns
bg-material-ultra-thick: Heavy glass effect for important overlays
bg-material-thick: Medium glass effect for panels, sidebars
bg-material-medium: Standard glass effect for cards, tooltips
bg-material-thin: Light glass effect for subtle overlays
bg-material-ultra-thin: Minimal glass effect for delicate surfaces

Application Colors: bg-accent, bg-primary, bg-secondary, text-accent, text-primary, text-secondary

Control Colors: bg-disabled-control

Color Variants:

Kawaii (softer): Add -kawaii suffix: bg-background-kawaii, text-text-kawaii
High contrast (accessible): Add -hc suffix: bg-background-hc, text-text-hc
Light/Dark specific: Add -light or -dark suffix: bg-background-light, text-text-dark

Dark Mode & Variants Control:

Dark mode: Use dark: prefix with TailwindCSS v4 built-in support
Color variants: Use data-contrast="low" for kawaii or data-contrast="high" for high-contrast on HTML element
Automatic adaptation: All color variants work seamlessly with dark mode

Usage Examples:

<!-- Regular usage with automatic dark mode -->
<div class="bg-background text-text border border-border">
  Content with default colors
</div>

<!-- Kawaii variant -->
<html data-contrast="low">
  <div class="bg-background text-text">Kawaii colors with auto dark mode</div>
</html>

<!-- High contrast variant -->
<html data-contrast="high">
  <div class="bg-background text-text">High contrast colors</div>
</html>

<!-- Fixed kawaii colors (no dark mode switching) -->
<div class="bg-background-kawaii text-text-kawaii">Always kawaii colors</div>

<!-- Dark mode with regular colors -->
<div class="bg-background dark:bg-background text-text dark:text-text">
  Responsive dark mode
</div>

<!-- Fill colors for interactive elements -->
<button class="bg-fill hover:bg-fill-secondary text-text">
  Primary Button
</button>
<input
  class="bg-fill-tertiary border border-border text-text placeholder:text-placeholder-text"
  placeholder="Input field"
/>

<!-- Material colors for glass morphism -->
<div class="bg-material-medium backdrop-blur border border-border">
  Glass card with medium opacity
</div>
<div class="bg-material-opaque">Solid modal background</div>
<div class="bg-material-thin hover:bg-material-medium transition-colors">
  Interactive glass surface
</div>

These colors use OKLCH color space with sRGB and P3 fallbacks, providing modern color rendering with kawaii aesthetic and accessibility support. The system automatically adapts to light/dark mode following TailwindCSS v4 conventions.

Read the full file on GitHub · 98 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.

4d ago First seen · 98 lines · 3 tokens per session scan A 30a08184483e

Subscribe to this mod's changes

color is a cursor rule published in the GitHub repository innei-template/smart-webapp-template (142 stars, last pushed 8d ago), licensed MIT. It adds 3 tokens to every session and 1,032 once invoked, about $0.0000 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-30.

CSS and styling Design and UX Frontend

color

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

Pastel Colors for TailwindCSS

What this file has done since we first saw it

Other cursor rules, from other repositories

ui-components

ui-components

frontend-theme-guidelines

ui-design-system

taste-enforcement

ui-architecture