@loke/design-system-beta v1.1.0

Loke Colour Variables

1. Background (#F1F3FF)

   • Closest Tailwind color: Indigo 50 (#eef2ff)

2. Foreground (#333334)

   • Closest Tailwind color: Neutral 800 (#262626)

3. Card (#FFFFFF)

   • Closest Tailwind color: White (#ffffff)

4. Card Foreground (#44446F)

   • Closest Tailwind color: Indigo 800 (#3730a3)

5. Popover (#FAFCFE)

   • Closest Tailwind color: Slate 50 (#f8fafc)

6. Popover Foreground (#3A3967)

   • Closest Tailwind color: Indigo 900 (#312e81)

7. Primary (#5048E5)

   • Closest Tailwind color: Indigo 600 (#4f46e5)

8. Primary Foreground (#FFFFFF)

   • Closest Tailwind color: White (#ffffff)

9. Secondary (#F3F4F6)

   • Closest Tailwind color: Gray 100 (#f3f4f6)

10. Secondary Foreground (#111827)

    • Closest Tailwind color: Gray 900 (#111827)

11. Accent (#58D7A8)

    • Closest Tailwind color: Teal 400 (#2dd4bf)

12. Accent Foreground (#FFFFFF)

    • Closest Tailwind color: White (#ffffff)

13. Destructive (#D14343)

    • Closest Tailwind color: Red 600 (#dc2626)

14. Destructive Foreground (#FFFFFF)

    • Closest Tailwind color: White (#ffffff)

15. Border (#CBCAF8)

    • Closest Tailwind color: Indigo 200 (#c7d2fe)

16. Input (#828EA4)

    • Closest Tailwind color: Slate 400 (#94a3b8)

17. Radius: 0.5rem

    • This is equivalent to Tailwind's rounded-md class.

18. Ring

    • Closest Tailwind color: Gray 300 (#94a3b8)

19. Muted (#EEEEEE)

    • Closest Tailwind color: Gray 200 (#e5e7eb)

20. Muted Foreground (rgb(74, 75, 104))

    • Closest Tailwind color: Indigo 700 (#4338ca)