🏷 Variables y Clases CSS
📏 Layout Sizes
| Element | Default Value |
|---|---|
--sidebar-width | 200px expanded // 108px collapsed |
--header-height | 56px |
--aside-width | 420px |
--container-max-width | 1440px |
--breakpoint-md | 960px |
--breakpoint-sm | 768px |
--breakpoint-xs | 360px |
🔠 Typography
| Name | Default Value | Class | Uses | Demo |
|---|---|---|---|---|
--t1 |
1.5rem; // 24px |
.t1 |
Heading title 1 |
|
--t2 |
1.25rem; // 20px |
.t2 |
Heading title 2 |
|
--t3 |
1.125rem; // 18px |
.t3 |
Heading title 3 |
|
--p1 |
1rem; // 16px |
.p1 |
Paragraph 1 |
|
--p2 |
.875rem; // 14px |
.p2 |
Paragraph 2 |
|
--p3 |
0.75rem; // 12px |
.p3 |
Descriptions | Paragraph 3 |
--label |
1rem ;// 16px |
.label |
Form inputs and buttons | Label |
--regular |
400; |
.regular |
Font Regular |
|
--medium |
700; |
.medium |
Font Medium |
🎨 Colors
| Name | Default Value | Demo |
|---|---|---|
--white | #f2f2f2 | |
--light-gray | #B6B6B6 | |
--gray | #333437 | |
--dark-gray | #222325 | |
--black | #1B1C1E | |
--background | var(--black) | |
--primary | #E5F876 | |
--secondary | #9DF4E2 | |
--purple | #D2A7F1 | |
--apple-green | #E3F8B7 | |
--blue | #86C9EE | |
--lime-light | #F0FF96 | |
--error | #FB7A50 | |
--warning | #F3AD5A | |
--success | #82DB91 | |
--text-white | var(--white) | |
--white-alpha-2 | rgba(255, 255, 255, 0.02) | |
--white-alpha-4 | rgba(255, 255, 255, 0.04) | |
--white-alpha-5 | rgba(255, 255, 255, 0.05) | |
--white-alpha-6 | rgba(255, 255, 255, 0.06) |
📐 Spacing
| Name | Default Value | Demo |
|---|---|---|
--space-xxs | 0.5rem; // 8px | |
--space-xs | 0.75rem; // 12px | |
--space-sm | .875rem; // 14px | |
--space | 1rem; // 16px | |
--space-md | 1.25rem; // 20px | |
--space-lg | 1.5rem; // 24px |
🐁 Other measures
| Name | Default Value | Demo |
|---|---|---|
--box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.04) | |
--border-radius | 1rem; // 16px | |
--icon-md | 1.5rem // 24px | |
--icon-sm | 1rem // 16px | |
--avatar-sm | 2.5rem // 40px | |
--avatar-xl | 6rem // 96px |
🌈 Gradients
| Name | Default Value | Demo |
|---|---|---|
--gradient-lima-blue | linear-gradient(175.18deg, rgba(114, 131, 131, 0.5) 11.87%, rgba(173, 189, 87, 0.5) 61.71%) | |
--gradient-blue-gray | linear-gradient(173.5deg, rgba(114, 131, 131, 0.4) 27.08%, rgba(179, 241, 228, 0.4) 92.63%) | |
--gradient-white-x | linear-gradient(to right, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%) | |
--gradient-white-y | linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%) |