SUSDAA Design System
A comprehensive design system for gentle, eye-friendly interfaces
Color Palette
Primary Colors
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554
Secondary Colors
50
#f0fdfa
100
#ccfbf1
200
#99f6e4
300
#5eead4
400
#2dd4bf
500
#14b8a6
600
#0d9488
700
#0f766e
800
#115e59
900
#134e4a
950
#042f2e
Neutral Colors
50
#fafaf9
100
#f5f5f4
200
#e7e5e4
300
#d6d3d1
400
#a8a29e
500
#78716c
600
#57534e
700
#44403c
800
#292524
900
#1c1917
950
#0c0a09
Success Colors
50
100
200
300
400
Warning Colors
50
100
200
300
400
Error Colors
50
100
200
300
400
Typography
Headings
Heading 1 - The quick brown fox jumps over the lazy dog
Heading 2 - The quick brown fox jumps over the lazy dog
Heading 3 - The quick brown fox jumps over the lazy dog
Heading 4 - The quick brown fox jumps over the lazy dog
Heading 5 - The quick brown fox jumps over the lazy dog
Heading 6 - The quick brown fox jumps over the lazy dog
Body Text
Body Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Base - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bengali Typography
শিরোনাম - দ্রুত বাদামী শিয়াল অলস কুকুরের উপর দিয়ে লাফ দেয়
মূল পাঠ - লোরেম ইপসাম ডলর সিট আমেট, কনসেক্টেটুর অ্যাডিপিসিং এলিট। সেড ডো ইউসমড টেম্পর ইনসিডিডান্ট উট লেবর এট ডলর ম্যাগনা অ্যালিকুয়া।
Spacing Scale
0
0px
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
7
1.75rem
8
2rem
9
2.25rem
10
2.5rem
11
2.75rem
12
3rem
14
3.5rem
16
4rem
20
5rem
24
6rem
28
7rem
32
8rem
36
9rem
Border Radius
none
0px
sm
0.125rem
base
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
3xl
1.5rem
full
9999px
Shadows
sm
0 1px 2px 0 rgb(0 0 0 / 0.05)
base
0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl
0 25px 50px -12px rgb(0 0 0 / 0.25)
Component Variants
Buttons
primary
solid
outline
ghost
soft
secondary
solid
outline
ghost
soft
success
solid
outline
ghost
soft
warning
solid
outline
ghost
soft
error
solid
outline
ghost
soft
neutral
solid
outline
ghost
soft
Cards
Default Card
With shadow and border
This is a default card with subtle shadow and border.
Outlined Card
With prominent border
This is an outlined card with a prominent border.
Elevated Card
With strong shadow
This is an elevated card with a strong shadow.
Inputs
This is a helper text
This is a filled input variant
This field is required