hd-design-sys-2506

a modern, accessible design system built with angular aesthetics and comprehensive design tokens

view on github

overview

1. design principles

1.1 key features

angular aesthetics: sharp, clean lines with minimal border radius
accessibility first: WCAG 2.1 AA compliant throughout
systematic approach: comprehensive design tokens and consistent spacing
single source of truth: parameterised data management

1.2 technology stack

framework: SvelteKit 2.x with TypeScript
styling: Custom CSS with design tokens and Tailwind CSS 4.0
components: Bits UI 2.4.1 for accessibility
typography: Google Fonts (Cormorant, JetBrains Mono)

design tokens

1. typography

1.1 font family

Cormorant - Primary Font

Cormorant is an elegant serif typeface designed by Christian Thalmann. It offers excellent readability and sophisticated character, making it perfect for both headings and body text. View on Google Fonts

                                    CSS Variable
                                    --primary-font: 'Cormorant', serif;
                                

1.2 font sizes & hierarchy

3rem

heading 1

2.5rem

heading 2

1.8rem

heading 3

1.2rem

large body

1rem

body text