Premium UI design skill for Angular + Angular Material + SCSS apps. Use when: creating new components, redesigning existing UI, adding dark/light theme support, building design tokens, styling dialogs or cards, creating micro-animations, adding glassmorphism or elevated surfaces, implementing responsive layouts, or matching a luxury SaaS aesthetic. Triggers: design, style, UI, beautiful, premium, component, theme, SCSS, dark mode, layout, responsive, animation, visual.
Instantly create beautiful, premium-quality UI for Angular + Angular Material + SCSS applications. Follows the project's established design language: Inter font, indigo/violet accent palette, CSS custom properties, dual light/dark themes.
| Principle | Rule |
|---|---|
| Space | 4px base grid. Sections: 24–48px. Elements: 8–16px. |
| Type | Inter. Headings: 600–700 weight. Body: 400–500. Labels: 500, 0.75–0.8rem. |
| Color | Accent (indigo) + (violet). Use CSS vars — never hardcode raw hex in components. |
#6366f1#8b5cf6| Elevation | Cards get box-shadow. Dialogs/menus get deeper shadow + slight backdrop blur. |
| Motion | transition: 0.18s ease for hover/state changes. Entrances: 0.22s cubic-bezier(.4,0,.2,1). |
| Surfaces | Light: white / #f8fafc. Dark: #111827 / #1a2235. Borders via var(--c-border). |
Use the project token set — see design-tokens reference.
var(--c-surface) / var(--c-surface-2)var(--c-text) / var(--c-text-2) / var(--c-text-3)var(--c-border) / var(--c-border-faint)var(--c-accent) / var(--c-accent-2).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);
}
}
.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);
}
// 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);
}
}
--mdc-* and --mat-* CSS custom properties for Material component overrides.styles.scss or a dedicated *.theme.scss file under src/styles/).[data-theme="dark"] overrides when colors differ.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);
}
}
// 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;
}
}
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).gap not margin for grid/flex spacing.Before finalizing any UI work: