Cyber-Sufi Design System

Complete component showcase — 98 colors, 14 primitives, 17 layouts

Typography

Headings, text, and font styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text XS — The quick brown fox

Text SM — The quick brown fox

Text Base — The quick brown fox

Text LG — The quick brown fox

Text XL — The quick brown fox

English Text (Roboto) — The quick brown fox

English Numbers (Roboto Mono) — 0123456789

English Style (Lora) — The quick brown fox

Inline code snippet example

Colors

98 tokens — 14 palettes × 7 shades

Primary (GoldGolden Apricot)

1

2

3

base

4

5

6

Secondary (Burnt Rose)

1

2

3

base

4

5

6

Tertiary (Brandy)

1

2

3

base

4

5

6

Foreground (Warm Grays)

1

2

3

base

4

5

6

Background (Coffee Bean)

1

2

3

base

4

5

6

System (Info/Success/Warning/Error)

1

2

3

base

Buttons

All variants and sizes

Basic Card

A simple card component

Card content goes here. This is the main body of the card.

With Footer

Card with action buttons

Some content that requires action.

Gold Accent

Cyber-sufi styled card

Custom border and background colors.

Glow Effect

Card with gold glow

Signature cyber-sufi glow effect.

Neon Cyan

Cyberpunk style

Electric neon accent.

Magenta

Secondary brand color

Vibrant magenta accent.

Form Elements

Inputs, textareas, and controls

Badges

Status indicators and labels

Default
Secondary
Outline
Destructive
Gold
Magenta
Cyan
Pink
Success
Error
Warning
Info

Layouts

Containers, grids, stacks, and more

Item 1
Item 2
Item 3
Vertical 1
Vertical 2
1
2
3
Span 2
4
Left
Center
Right
Centered
Absolute Center

16:9

Left
Right (pushed)

Effects & Animations

Glows, shadows, and motion

sm

base

md

lg

xl

1

2

3

4

Miscellaneous

Separators, skeletons, and utilities

Content above

Content below

Left

Center

Right

✓ Design system verified

@sik/design + @sik/ui