Do I need to install any Danske Bank npm packages?

No, this skill provides lightweight CSS and HTML approximations to avoid external dependencies or proprietary package installation.

Is this skill compatible with React or Vue?

Yes, it is framework-agnostic and works with any modern frontend stack by utilizing standard CSS custom properties and HTML patterns.

How do I handle icons in this design system?

The skill provides access to a catalog of over 700 SVG icons that can be inlined or referenced directly in your project without extra assets.

Does it support dark mode?

Yes, it includes a contrast theme variant and uses semantic tokens that automatically adapt across different surface levels and modes.

Are the components accessible?

The system prioritizes accessibility with built-in focus indicators, semantic HTML structures, and minimum touch target sizes defined by tokens.

Sapphire Design System

Name: Sapphire Design System
Author: ThomasRohde

byThomasRohde

•

Design Tools

Replicates the Danske Bank Sapphire design language using lightweight CSS and HTML patterns without external dependencies.

This skill empowers developers to build sophisticated, Scandinavian-inspired fintech user interfaces by approximating the Danske Bank Sapphire design system. It provides a complete framework-agnostic toolkit—including CSS custom properties for design tokens, component implementation guides for buttons and forms, and a comprehensive icon catalog—enabling the creation of consistent, accessible, and professional-grade UI prototypes or production screens without the overhead of heavy npm packages.

Key Features

01Framework-agnostic implementation for React, Vue, Svelte, or plain HTML

02700+ icon catalog for financial and general UI needs

031 GitHub stars

04Built-in support for theme variants including secondary surfaces and contrast modes

05Complete design token library for colors, spacing, and typography

06Semantic accessibility-first components including buttons, forms, and alerts

Use Cases

01Creating lightweight frontend components that match Danske Bank's branding

02Building fintech or banking UI prototypes with a Scandinavian design aesthetic

03Developing themeable web interfaces using CSS custom properties

Key Features

01Framework-agnostic implementation for React, Vue, Svelte, or plain HTML

02700+ icon catalog for financial and general UI needs

031 GitHub stars

04Built-in support for theme variants including secondary surfaces and contrast modes

05Complete design token library for colors, spacing, and typography

06Semantic accessibility-first components including buttons, forms, and alerts

Use Cases

01Creating lightweight frontend components that match Danske Bank's branding

02Building fintech or banking UI prototypes with a Scandinavian design aesthetic

03Developing themeable web interfaces using CSS custom properties