Developers

CSS Recipes

Compatible examples based on NasDash public variables.

Paste one recipe at a time, verify both color modes, and then combine them.

Cyan accent and crisp cards

:root {
  --nd-accent: #22d3ee;
  --nd-accent-glow: rgba(34, 211, 238, 0.16);
  --nd-accent-dim: rgba(34, 211, 238, 0.1);
  --nd-card-border: rgba(34, 211, 238, 0.2);
  --nd-card-hover-border: rgba(34, 211, 238, 0.48);
  --nd-card-radius: 14px;
}

Soft, rounded style

:root {
  --nd-card-radius: 22px;
  --nd-blur: 20px;
  --nd-card-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
  --nd-transition: 180ms ease;
}

Mobile density

@media (max-width: 700px) {
  :root {
    --nd-card-radius: 12px;
    --nd-blur: 6px;
    --nd-card-bg-opacity: 0.96;
  }
}

Accessible state palette

:root {
  --nd-green: #22c55e;
  --nd-yellow: #eab308;
  --nd-orange: #f97316;
  --nd-red: #ef4444;
  --nd-blue: #3b82f6;
  --nd-purple: #a855f7;
}

Do not rely solely on color to convey a state. Product labels and icons must remain visible.

Custom CSS

Use the public theme contract, maintain compatibility, and recover a broken interface.

Testing and Validation

Run the product's unit, browser, and container checks.