Styling Guidelines

SCSS Modules

Always use SCSS modules with .module.scss extension:

// Component.tsx
import styles from './Component.module.scss';

<div className={styles.container}>
  <h1 className={styles.title}>Title</h1>
</div>

Design Tokens

Import and use design tokens from variables:

// Component.module.scss
@use '@/styles/variables' as *;

.button {
  padding: $space-3 $space-6;
  border-radius: $radius-md;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
}

Theme Colors

Use CSS custom properties for theme-aware colors:

.card {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}

.link {
  color: var(--color-primary-500);
  
  &:hover {
    color: var(--color-primary-600);
  }
}

Responsive Design

Use mobile-first approach with breakpoint variables:

@use '@/styles/variables' as *;

.grid {
  display: grid;
  gap: $space-4;
  grid-template-columns: 1fr;
  
  @media (min-width: $breakpoint-sm) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: $breakpoint-lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

What to Avoid

// ❌ Inline styles
<div style={{ padding: '1rem' }}>

// ❌ Hardcoded values
.button {
  padding: 12px 24px;
  background: #1f8bff;
}

// ❌ String class names
<div className="container">

// ❌ Tailwind-style utility classes
<div className="p-4 bg-blue-500">

Correct Patterns

// ✅ SCSS modules with tokens
import styles from './Component.module.scss';

<div className={styles.container}>

// ✅ Design tokens
.button {
  padding: $space-3 $space-6;
  background: var(--color-primary-500);
}