---

name: conventions-css description: Apply when writing styles. Ensures consistency with design system and project patterns.

CSS Conventions

No Utility Frameworks

No Tailwind, no utility classes, no CSS-in-JS. Custom CSS only.

Scoping Rules

• Atoms: Unscoped <style> — allows design token inheritance
• Everything else: <style scoped>

Design Tokens

CSS custom properties exclusively. Never hardcode colors, spacing, typography.

Copy.base-input {
  padding: var(--input-padding);
  border-color: var(--input-border-color);
  font-family: var(--input-font-family);
}

Color System

• Semantic: --color-primary-{100-400}, --color-error-{100-400}
• Named: --color-blue-{100-400}, --color-amber-{100-400}
• Contextual: --text-primary, --input-focus-border

Native CSS Nesting

Copy.base-input {
  &:focus {
    border-color: var(--input-focus-border);
  }
  &:disabled {
    opacity: var(--input-disabled-opacity);
  }
}

Inline Styles

Only for truly dynamic values (calculated at runtime). Otherwise use CSS custom properties.