Premium Designer

Step-by-Step Procedure

1. Identify the Design Target

• What is this UI element (card, dialog, table row, form, nav)?
• Does it need dark + light mode support?
• Does it appear inside an Angular Material CDK overlay (dialog/menu)? → Styles must be global not component-scoped.

2. Map CSS Custom Properties

Use the project token set — see design-tokens reference.

• Surface → var(--c-surface) / var(--c-surface-2)
• Text → var(--c-text) / var(--c-text-2) / var(--c-text-3)
• Border → var(--c-border) / var(--c-border-faint)
• Accent → var(--c-accent) / var(--c-accent-2)
• Never hardcode color values in component SCSS.

3. Apply the Premium Surface Recipe

.my-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;

  &:hover {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.1),
      0 1px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }
}

4. Typography Rules

.heading {
  font:
    700 1.25rem/1.3 "Inter",
    sans-serif;
  color: var(--c-text);
}
.subheading {
  font:
    600 0.9375rem/1.4 "Inter",
    sans-serif;
  color: var(--c-text);
}
.body {
  font:
    400 0.875rem/1.6 "Inter",
    sans-serif;
  color: var(--c-text-2);
}
.label {
  font:
    500 0.75rem/1 "Inter",
    sans-serif;
  color: var(--c-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meta {
  font:
    400 0.75rem/1.4 "Inter",
    sans-serif;
  color: var(--c-text-3);
}

5. Interactive States

// Accent buttons / interactive chips
.accent-btn {
  background: var(--c-accent);
  color: #fff;
  border-radius: 10px;
  padding: 8px 18px;
  font:
    600 0.875rem "Inter",
    sans-serif;
  border: none;
  cursor: pointer;
  transition:
    background 0.18s,
    box-shadow 0.18s,
    transform 0.15s;

  &:hover {
    background: var(--c-accent-2);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
  }
  &:active {
    transform: translateY(0);
  }
}

6. Angular Material Overrides

• Use --mdc-* and --mat-* CSS custom properties for Material component overrides.
• Overlay-based components (dialogs, select panels, menus) → override in global SCSS (styles.scss or a dedicated *.theme.scss file under src/styles/).
• See component-patterns reference for ready-made recipes.

7. Dark/Light Duality

• Always add [data-theme="dark"] overrides when colors differ.
• Light-mode shadows use rgba(0,0,0,...). Dark-mode: lighter opacity + glow with accent color.

:root,
[data-theme="light"] {
  .my-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  }
}
[data-theme="dark"] {
  .my-card {
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}

8. Animations & Micro-interactions

// Fade + slide-up entrance (apply with @keyframes in component or global)
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.enter {
  animation: fadeInUp 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

// Subtle scale pulse for KPI numbers / metrics
@keyframes countUp {
  0% {
    transform: scale(0.96);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

9. Responsive Layout

• Mobile-first. Base styles for ≤600px, enhance upward.
• Column → row grid: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
• Use gap not margin for grid/flex spacing.
• Navigation collapses ≤768px.

10. Quality Checklist

Before finalizing any UI work:

• Both light and dark themes tested
• All colors use CSS vars (no hardcoded hex)
• Hover + focus + active states on all interactive elements
• Font family is Inter (check via DevTools)
• Consistent border-radius (8px small / 12px medium / 16px large / 20px card)
• Smooth transitions on state changes
• Mobile layout verified at 375px viewport
• Angular Material overrides in correct scope (global vs component)

References

• Design Tokens — Full token list for light + dark themes
• Component Patterns — Ready-made SCSS recipes for common Angular components
• SCSS Design System Template — Boilerplate for a new feature's styles