Rosetta

283KB / 32KB

3,746

Selectors
3,487

Rules
5,385

Declarations
728

Properties

Total Declarations

width

76
height

67
position

73
float

2
margin

75
padding

74
color

344
background color

340
font size

152

Size

Files size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

0

Files
0B

Total

Selectors and rules

Selectors used

3516

Class
306

Type
202

Pseudo class
48

Attribute
47

Pseudo element
6

Universal
0

Id
0

js- prefixed

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

79 Heavy selectors This selectors should be simplified

Specifisity
73	.has-floating-label .form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]):focus
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]).is-small
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]).is-large
63	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder
62	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])
60	/! minireset.css v0.0.6 \| MIT License \| github.com/jgthms/minireset.css /html
50	.switch-checkbox:checked+.switch-slider .switch-icon>:first-child
50	.switch-checkbox:checked+.switch-slider .switch-icon>:last-child
50	.topbar--expand-always .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-always .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-tablet .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-tablet .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-laptop .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-laptop .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-desktop .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-desktop .topbar__search .toggle__checkbox:checked~.toggle__content
50	.switch-checkbox:checked+.switch-slider .switch-icon>:first-child
50	.switch-checkbox:checked+.switch-slider .switch-icon>:last-child
43	.has-floating-label .form__wrapper fieldset .input select.hs-input::placeholder
43	.has-floating-label .form__wrapper fieldset .input textarea.hs-input::placeholder
42	.form__wrapper fieldset .input select.hs-input:focus
42	.form__wrapper fieldset .input textarea.hs-input:focus
42	.form__wrapper fieldset .input select.hs-input.is-small
42	.form__wrapper fieldset .input textarea.hs-input.is-small
42	.form__wrapper fieldset .input select.hs-input.is-large
42	.form__wrapper fieldset .input textarea.hs-input.is-large
41	.form__wrapper fieldset .legal-consent-container .hs-richtext:not(:last-of-type)
41	.switch-checkbox:checked+.switch-slider .switch-icon i
41	.toggle__checkbox:checked~[class$=__button]>[class$=__icon]:before
41	.toggle__checkbox:checked~[class$=__button]>[class$=__icon]:after
41	.switch-checkbox:checked+.switch-slider .switch-icon i
40	.button.primary.is-outlined:hover
40	.button.is-primary.is-outlined:hover
40	.hs-button.primary.is-outlined:hover
40	.hs-button.is-primary.is-outlined:hover
40	.button.secondary.is-outlined:hover
40	.button.is-secondary.is-outlined:hover
40	.hs-button.secondary.is-outlined:hover
40	.hs-button.is-secondary.is-outlined:hover
40	.button.is-light.is-outlined:hover
40	.hs-button.is-light.is-outlined:hover
40	.button.is-subtle.is-outlined:hover
40	.hs-button.is-subtle.is-outlined:hover
40	.switch-checkbox:checked+.switch-slider .switch-icon
40	.switch-checkbox:checked+.switch-slider .switch-marker
40	.button.is-active.is-primary:hover
40	.button.is-active.is-secondary:hover
40	.button.is-active.is-info:hover
40	.button.is-active.is-success:hover
40	.button.is-active.is-warning:hover
40	.button.is-active.is-danger:hover
40	.button.is-light.is-primary:hover
40	.button.is-light.is-secondary:hover
40	.button.is-light.is-info:hover
40	.button.is-light.is-success:hover
40	.button.is-light.is-warning:hover
40	.button.is-light.is-danger:hover
40	.button.is-outlined.is-primary:hover
40	.button.is-outlined.is-secondary:hover
40	.button.is-outlined.is-info:hover
40	.button.is-outlined.is-success:hover
40	.button.is-outlined.is-warning:hover
40	.button.is-outlined.is-danger:hover
40	.button.is-text:hover .is-left-icon
40	.button.is-text:hover .is-right-icon
40	.buttons .button:not(:last-child):not(.is-full-width)
40	.topbar .toggle__checkbox:checked~.toggle__content
40	.control .append-icon.is-interactive:hover
40	.control .prepend-icon.is-interactive:hover
40	.control:focus-within .append-icon:not(.is-interactive)
40	.control:focus-within .prepend-icon:not(.is-interactive)
40	.has-floating-label .input:not(:placeholder-shown)~.label
40	.has-floating-label .select:not(:placeholder-shown)~.label
40	.has-floating-label .textarea:not(:placeholder-shown)~.label
40	.switch-checkbox:checked+.switch-slider .switch-icon
40	.switch-checkbox:checked+.switch-slider .switch-marker
33	.form__wrapper fieldset .input select.hs-input::placeholder
33	.form__wrapper fieldset .input textarea.hs-input::placeholder

31 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors
23	/! minireset.css v0.0.6 \| MIT License \| github.com/jgthms/minireset.css /html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6
11	h1, h2, h3, h4, h5, h6, p, ol, ul, a, button
11	h1, h2, h3, h4, h5, h6, p, ol, ul, a, button
10	body, h1, h2, h3, h4, h5, h6, p, ol, ul
8	h1, h2, h3, h4, h5, h6, .title, .subtitle
8	h1, h2, h3, h4, h5, h6, .title, .subtitle
6	h1, h2, h3, h4, h5, h6
6	h1, h2, h3, h4, h5, h6
6	h1, h2, h3, h4, h5, h6
6	.is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6
6	.input.is-small, .is-small .input, .textarea.is-small, .is-small .textarea, .select select.is-small, .is-small .select select
6	.input.is-large, .is-large .input, .textarea.is-large, .is-large .textarea, .select select.is-large, .is-large .select select
5	.article h2, .article h3, .article h4, .article h5, .article h6
5	.article p, .article blockquote, .article ul li, .article ol li, .article dl dt
5	.article p:not(:last-child), .article blockquote:not(:last-child), .article ul li:not(:last-child), .article ol li:not(:last-child), .article dl dt:not(:last-child)
5	a, input, textarea, select, button
5	a, button, input, select, textarea
5	.article h2, .article h3, .article h4, .article h5, .article h6
5	.article p, .article blockquote, .article ul li, .article ol li, .article dl dt
5	.article p:not(:last-child), .article blockquote:not(:last-child), .article ul li:not(:last-child), .article ol li:not(:last-child), .article dl dt:not(:last-child)
4	.button.primary, .button.is-primary, .hs-button.primary, .hs-button.is-primary
4	.button.primary:hover, .button.is-primary:hover, .hs-button.primary:hover, .hs-button.is-primary:hover
4	.button.primary.is-outlined, .button.is-primary.is-outlined, .hs-button.primary.is-outlined, .hs-button.is-primary.is-outlined
4	.button.primary.is-outlined:hover, .button.is-primary.is-outlined:hover, .hs-button.primary.is-outlined:hover, .hs-button.is-primary.is-outlined:hover
4	.button.secondary, .button.is-secondary, .hs-button.secondary, .hs-button.is-secondary
4	.button.secondary:hover, .button.is-secondary:hover, .hs-button.secondary:hover, .hs-button.is-secondary:hover
4	.button.secondary.is-outlined, .button.is-secondary.is-outlined, .hs-button.secondary.is-outlined, .hs-button.is-secondary.is-outlined
4	.button.secondary.is-outlined:hover, .button.is-secondary.is-outlined:hover, .hs-button.secondary.is-outlined:hover, .hs-button.is-secondary.is-outlined:hover
4	.article ul, .article ol, .article dl, .article table
4	.article ul, .article ol, .article dl, .article table
4	.has-floating-label:focus-within .label, .has-floating-label .input:not(:placeholder-shown)~.label, .has-floating-label .select:not(:placeholder-shown)~.label, .has-floating-label .textarea:not(:placeholder-shown)~.label

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

Number of declarations per ruleset

18 Heavy rulesets This classes potentially could be changed to single class

Declarations
241	:root
59	:root
52	:root
35	:root
27	:root
25	:root
24	:root
23	:root
23	.button
22	:root
20	.button,.hs-button
18	:root
18	.input,.textarea,.select select
17	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]),.form__wrapper fieldset .input select.hs-input,.form__wrapper fieldset .input textarea.hs-input
17	:root
17	:root
16	.tabs ul li a
16	.select::after

0 Empty rulesets This selectors should be removed from project

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation

6 Universal selectors Universal selectors could affect performance and encapsulation of components

*
*:before
*:after
*
*::before
*::after

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

5385 total, 2124 unique declarations. Reusability index: 60%.

Color

14% reusability index

Background Color

10% reusability index

Font Size

56% reusability index

Font Family

45% reusability index

Border radius

76% reusability index

Z-index

20% reusability index

294 Unique Colors

Aa

transparent
Aa

inherit
Aa

#fff
Aa

var(--slideshow-arrow-color)
Aa

var(--slideshow-arrow-background)
Aa

var(--color-primary--20)
Aa

var(--button-color)
Aa

var(--button-hover-color)
Aa

var(--button-color-primary)
Aa

var(--button-hover-color-primary)
Aa

var(--button-bg-primary)
Aa

var(--button-color-secondary)
Aa

var(--button-hover-color-secondary)
Aa

var(--button-bg-secondary)
Aa

var(--button-color-light)
Aa

var(--button-hover-color-light)
Aa

var(--button-bg-light)
Aa

var(--button-color-subtle)
Aa

var(--button-hover-color-subtle)
Aa

var(--color-primary)
Aa

var(--badge-color)
Aa

var(--table-header-text-color)
Aa

var(--table-footer-text-color)
Aa

var(--table-body-text-color)
Aa

var(--input-color)
Aa

var(--input-focus-color)
Aa

var(--input-placeholder-color)
Aa

var(--help-text-error-color)
Aa

var(--label-color)
Aa

var(--switch--off-icon-color)
Aa

var(--switch--on-icon-color)
Aa

var(--color-contrast--medium)
Aa

var(--color-accent)
Aa

var(--color-contrast--high)
Aa

var(--color-contrast--low)
Aa

var(--color-contrast-100)
Aa

var(--color-primary-100)
Aa

var(--color-contrast)
Aa

var(--color-contrast-60)
Aa

var(--color-neutral-50)
Aa

var(--color-neutral-100)
Aa

var(--color-neutral-200)
Aa

var(--color-neutral-300)
Aa

var(--color-neutral-400)
Aa

var(--color-neutral-500)
Aa

var(--color-neutral-600)
Aa

var(--color-neutral-700)
Aa

var(--color-neutral-800)
Aa

var(--color-neutral-900)
Aa

var(--color-primary-50)
Aa

var(--color-primary-200)
Aa

var(--color-primary-300)
Aa

var(--color-primary-400)
Aa

var(--color-primary-500)
Aa

var(--color-primary-600)
Aa

var(--color-primary-700)
Aa

var(--color-primary-800)
Aa

var(--color-primary-900)
Aa

var(--color-secondary-50)
Aa

var(--color-secondary-100)
Aa

var(--color-secondary-200)
Aa

var(--color-secondary-300)
Aa

var(--color-secondary-400)
Aa

var(--color-secondary-500)
Aa

var(--color-secondary-600)
Aa

var(--color-secondary-700)
Aa

var(--color-secondary-800)
Aa

var(--color-secondary-900)
Aa

var(--color-info-50)
Aa

var(--color-info-100)
Aa

var(--color-info-200)
Aa

var(--color-info-300)
Aa

var(--color-info-400)
Aa

var(--color-info-500)
Aa

var(--color-info-600)
Aa

var(--color-info-700)
Aa

var(--color-info-800)
Aa

var(--color-info-900)
Aa

var(--color-success-50)
Aa

var(--color-success-100)
Aa

var(--color-success-200)
Aa

var(--color-success-300)
Aa

var(--color-success-400)
Aa

var(--color-success-500)
Aa

var(--color-success-600)
Aa

var(--color-success-700)
Aa

var(--color-success-800)
Aa

var(--color-success-900)
Aa

var(--color-warning-50)
Aa

var(--color-warning-100)
Aa

var(--color-warning-200)
Aa

var(--color-warning-300)
Aa

var(--color-warning-400)
Aa

var(--color-warning-500)
Aa

var(--color-warning-600)
Aa

var(--color-warning-700)
Aa

var(--color-warning-800)
Aa

var(--color-warning-900)
Aa

var(--color-danger-50)
Aa

var(--color-danger-100)
Aa

var(--color-danger-200)
Aa

var(--color-danger-300)
Aa

var(--color-danger-400)
Aa

var(--color-danger-500)
Aa

var(--color-danger-600)
Aa

var(--color-danger-700)
Aa

var(--color-danger-800)
Aa

var(--color-danger-900)
Aa

var(--color-red-50)
Aa

var(--color-red-100)
Aa

var(--color-red-200)
Aa

var(--color-red-300)
Aa

var(--color-red-400)
Aa

var(--color-red-500)
Aa

var(--color-red-600)
Aa

var(--color-red-700)
Aa

var(--color-red-800)
Aa

var(--color-red-900)
Aa

var(--color-orange-50)
Aa

var(--color-orange-100)
Aa

var(--color-orange-200)
Aa

var(--color-orange-300)
Aa

var(--color-orange-400)
Aa

var(--color-orange-500)
Aa

var(--color-orange-600)
Aa

var(--color-orange-700)
Aa

var(--color-orange-800)
Aa

var(--color-orange-900)
Aa

var(--color-amber-50)
Aa

var(--color-amber-100)
Aa

var(--color-amber-200)
Aa

var(--color-amber-300)
Aa

var(--color-amber-400)
Aa

var(--color-amber-500)
Aa

var(--color-amber-600)
Aa

var(--color-amber-700)
Aa

var(--color-amber-800)
Aa

var(--color-amber-900)
Aa

var(--color-yellow-50)
Aa

var(--color-yellow-100)
Aa

var(--color-yellow-200)
Aa

var(--color-yellow-300)
Aa

var(--color-yellow-400)
Aa

var(--color-yellow-500)
Aa

var(--color-yellow-600)
Aa

var(--color-yellow-700)
Aa

var(--color-yellow-800)
Aa

var(--color-yellow-900)
Aa

var(--color-lime-50)
Aa

var(--color-lime-100)
Aa

var(--color-lime-200)
Aa

var(--color-lime-300)
Aa

var(--color-lime-400)
Aa

var(--color-lime-500)
Aa

var(--color-lime-600)
Aa

var(--color-lime-700)
Aa

var(--color-lime-800)
Aa

var(--color-lime-900)
Aa

var(--color-green-50)
Aa

var(--color-green-100)
Aa

var(--color-green-200)
Aa

var(--color-green-300)
Aa

var(--color-green-400)
Aa

var(--color-green-500)
Aa

var(--color-green-600)
Aa

var(--color-green-700)
Aa

var(--color-green-800)
Aa

var(--color-green-900)
Aa

var(--color-emerald-50)
Aa

var(--color-emerald-100)
Aa

var(--color-emerald-200)
Aa

var(--color-emerald-300)
Aa

var(--color-emerald-400)
Aa

var(--color-emerald-500)
Aa

var(--color-emerald-600)
Aa

var(--color-emerald-700)
Aa

var(--color-emerald-800)
Aa

var(--color-emerald-900)
Aa

var(--color-teal-50)
Aa

var(--color-teal-100)
Aa

var(--color-teal-200)
Aa

var(--color-teal-300)
Aa

var(--color-teal-400)
Aa

var(--color-teal-500)
Aa

var(--color-teal-600)
Aa

var(--color-teal-700)
Aa

var(--color-teal-800)
Aa

var(--color-teal-900)
Aa

var(--color-cyan-50)
Aa

var(--color-cyan-100)
Aa

var(--color-cyan-200)
Aa

var(--color-cyan-300)
Aa

var(--color-cyan-400)
Aa

var(--color-cyan-500)
Aa

var(--color-cyan-600)
Aa

var(--color-cyan-700)
Aa

var(--color-cyan-800)
Aa

var(--color-cyan-900)
Aa

var(--color-sky-50)
Aa

var(--color-sky-100)
Aa

var(--color-sky-200)
Aa

var(--color-sky-300)
Aa

var(--color-sky-400)
Aa

var(--color-sky-500)
Aa

var(--color-sky-600)
Aa

var(--color-sky-700)
Aa

var(--color-sky-800)
Aa

var(--color-sky-900)
Aa

var(--color-blue-50)
Aa

var(--color-blue-100)
Aa

var(--color-blue-200)
Aa

var(--color-blue-300)
Aa

var(--color-blue-400)
Aa

var(--color-blue-500)
Aa

var(--color-blue-600)
Aa

var(--color-blue-700)
Aa

var(--color-blue-800)
Aa

var(--color-blue-900)
Aa

var(--color-indigo-50)
Aa

var(--color-indigo-100)
Aa

var(--color-indigo-200)
Aa

var(--color-indigo-300)
Aa

var(--color-indigo-400)
Aa

var(--color-indigo-500)
Aa

var(--color-indigo-600)
Aa

var(--color-indigo-700)
Aa

var(--color-indigo-800)
Aa

var(--color-indigo-900)
Aa

var(--color-violet-50)
Aa

var(--color-violet-100)
Aa

var(--color-violet-200)
Aa

var(--color-violet-300)
Aa

var(--color-violet-400)
Aa

var(--color-violet-500)
Aa

var(--color-violet-600)
Aa

var(--color-violet-700)
Aa

var(--color-violet-800)
Aa

var(--color-violet-900)
Aa

var(--color-purple-50)
Aa

var(--color-purple-100)
Aa

var(--color-purple-200)
Aa

var(--color-purple-300)
Aa

var(--color-purple-400)
Aa

var(--color-purple-500)
Aa

var(--color-purple-600)
Aa

var(--color-purple-700)
Aa

var(--color-purple-800)
Aa

var(--color-purple-900)
Aa

var(--color-fuchsia-50)
Aa

var(--color-fuchsia-100)
Aa

var(--color-fuchsia-200)
Aa

var(--color-fuchsia-300)
Aa

var(--color-fuchsia-400)
Aa

var(--color-fuchsia-500)
Aa

var(--color-fuchsia-600)
Aa

var(--color-fuchsia-700)
Aa

var(--color-fuchsia-800)
Aa

var(--color-fuchsia-900)
Aa

var(--color-pink-50)
Aa

var(--color-pink-100)
Aa

var(--color-pink-200)
Aa

var(--color-pink-300)
Aa

var(--color-pink-400)
Aa

var(--color-pink-500)
Aa

var(--color-pink-600)
Aa

var(--color-pink-700)
Aa

var(--color-pink-800)
Aa

var(--color-pink-900)
Aa

var(--color-rose-50)
Aa

var(--color-rose-100)
Aa

var(--color-rose-200)
Aa

var(--color-rose-300)
Aa

var(--color-rose-400)
Aa

var(--color-rose-500)
Aa

var(--color-rose-600)
Aa

var(--color-rose-700)
Aa

var(--color-rose-800)
Aa

var(--color-rose-900)
Aa

var(--color-white)
Aa

var(--button-primary-color)
Aa

var(--button-secondary-color)
Aa

var(--button-info-color)
Aa

var(--button-success-color)
Aa

var(--button-warning-color)
Aa

var(--button-danger-color)
Aa

var(--heading-caption-color)
Aa

var(--tabs-color)
Aa

var(--tabs-active-color)
Aa

var(--input-icon-color)
Aa

var(--input-hover-color)
Aa

var(--input-icon-active-color)
Aa

var(--input-disabled-color)
Aa

var(--input-arrow-color)
Aa

var(--help-text-success-color)

303 Unique Background Colors

transparent
rgba(0,0,0,.5)
#fff
var(--slideshow-arrow-background)
var(--slideshow-arrow-color)
var(--color-primary--05)
var(--color-contrast--lower)
var(--color-contrast--high)
var(--button-bg)
var(--button-hover-bg)
var(--button-bg-primary)
var(--button-hover-bg-primary)
var(--button-bg-secondary)
var(--button-hover-bg-secondary)
var(--button-bg-light)
var(--button-hover-bg-light)
var(--button-bg-subtle)
var(--button-hover-bg-subtle)
var(--badge-background)
var(--color-rgba-black-30)
var(--table-background)
var(--table-row-odd-background)
var(--table-row-even-background)
var(--table-header-background)
var(--table-footer-background)
var(--table-body-background)
var(--table-hover-background)
var(--input-background-color)
var(--switch--off-background)
var(--switch-marker--off-background)
var(--switch--on-background)
var(--switch-marker--on-background)
var(--color-theme--background)
var(--color-neutral-50)
var(--color-neutral-100)
var(--color-neutral-200)
var(--color-neutral-300)
var(--color-neutral-400)
var(--color-neutral-500)
var(--color-neutral-600)
var(--color-neutral-700)
var(--color-neutral-800)
var(--color-neutral-900)
var(--color-primary-50)
var(--color-primary-100)
var(--color-primary-200)
var(--color-primary-300)
var(--color-primary-400)
var(--color-primary-500)
var(--color-primary-600)
var(--color-primary-700)
var(--color-primary-800)
var(--color-primary-900)
var(--color-secondary-50)
var(--color-secondary-100)
var(--color-secondary-200)
var(--color-secondary-300)
var(--color-secondary-400)
var(--color-secondary-500)
var(--color-secondary-600)
var(--color-secondary-700)
var(--color-secondary-800)
var(--color-secondary-900)
var(--color-info-50)
var(--color-info-100)
var(--color-info-200)
var(--color-info-300)
var(--color-info-400)
var(--color-info-500)
var(--color-info-600)
var(--color-info-700)
var(--color-info-800)
var(--color-info-900)
var(--color-success-50)
var(--color-success-100)
var(--color-success-200)
var(--color-success-300)
var(--color-success-400)
var(--color-success-500)
var(--color-success-600)
var(--color-success-700)
var(--color-success-800)
var(--color-success-900)
var(--color-warning-50)
var(--color-warning-100)
var(--color-warning-200)
var(--color-warning-300)
var(--color-warning-400)
var(--color-warning-500)
var(--color-warning-600)
var(--color-warning-700)
var(--color-warning-800)
var(--color-warning-900)
var(--color-danger-50)
var(--color-danger-100)
var(--color-danger-200)
var(--color-danger-300)
var(--color-danger-400)
var(--color-danger-500)
var(--color-danger-600)
var(--color-danger-700)
var(--color-danger-800)
var(--color-danger-900)
var(--color-red-50)
var(--color-red-100)
var(--color-red-200)
var(--color-red-300)
var(--color-red-400)
var(--color-red-500)
var(--color-red-600)
var(--color-red-700)
var(--color-red-800)
var(--color-red-900)
var(--color-orange-50)
var(--color-orange-100)
var(--color-orange-200)
var(--color-orange-300)
var(--color-orange-400)
var(--color-orange-500)
var(--color-orange-600)
var(--color-orange-700)
var(--color-orange-800)
var(--color-orange-900)
var(--color-amber-50)
var(--color-amber-100)
var(--color-amber-200)
var(--color-amber-300)
var(--color-amber-400)
var(--color-amber-500)
var(--color-amber-600)
var(--color-amber-700)
var(--color-amber-800)
var(--color-amber-900)
var(--color-yellow-50)
var(--color-yellow-100)
var(--color-yellow-200)
var(--color-yellow-300)
var(--color-yellow-400)
var(--color-yellow-500)
var(--color-yellow-600)
var(--color-yellow-700)
var(--color-yellow-800)
var(--color-yellow-900)
var(--color-lime-50)
var(--color-lime-100)
var(--color-lime-200)
var(--color-lime-300)
var(--color-lime-400)
var(--color-lime-500)
var(--color-lime-600)
var(--color-lime-700)
var(--color-lime-800)
var(--color-lime-900)
var(--color-green-50)
var(--color-green-100)
var(--color-green-200)
var(--color-green-300)
var(--color-green-400)
var(--color-green-500)
var(--color-green-600)
var(--color-green-700)
var(--color-green-800)
var(--color-green-900)
var(--color-emerald-50)
var(--color-emerald-100)
var(--color-emerald-200)
var(--color-emerald-300)
var(--color-emerald-400)
var(--color-emerald-500)
var(--color-emerald-600)
var(--color-emerald-700)
var(--color-emerald-800)
var(--color-emerald-900)
var(--color-teal-50)
var(--color-teal-100)
var(--color-teal-200)
var(--color-teal-300)
var(--color-teal-400)
var(--color-teal-500)
var(--color-teal-600)
var(--color-teal-700)
var(--color-teal-800)
var(--color-teal-900)
var(--color-cyan-50)
var(--color-cyan-100)
var(--color-cyan-200)
var(--color-cyan-300)
var(--color-cyan-400)
var(--color-cyan-500)
var(--color-cyan-600)
var(--color-cyan-700)
var(--color-cyan-800)
var(--color-cyan-900)
var(--color-sky-50)
var(--color-sky-100)
var(--color-sky-200)
var(--color-sky-300)
var(--color-sky-400)
var(--color-sky-500)
var(--color-sky-600)
var(--color-sky-700)
var(--color-sky-800)
var(--color-sky-900)
var(--color-blue-50)
var(--color-blue-100)
var(--color-blue-200)
var(--color-blue-300)
var(--color-blue-400)
var(--color-blue-500)
var(--color-blue-600)
var(--color-blue-700)
var(--color-blue-800)
var(--color-blue-900)
var(--color-indigo-50)
var(--color-indigo-100)
var(--color-indigo-200)
var(--color-indigo-300)
var(--color-indigo-400)
var(--color-indigo-500)
var(--color-indigo-600)
var(--color-indigo-700)
var(--color-indigo-800)
var(--color-indigo-900)
var(--color-violet-50)
var(--color-violet-100)
var(--color-violet-200)
var(--color-violet-300)
var(--color-violet-400)
var(--color-violet-500)
var(--color-violet-600)
var(--color-violet-700)
var(--color-violet-800)
var(--color-violet-900)
var(--color-purple-50)
var(--color-purple-100)
var(--color-purple-200)
var(--color-purple-300)
var(--color-purple-400)
var(--color-purple-500)
var(--color-purple-600)
var(--color-purple-700)
var(--color-purple-800)
var(--color-purple-900)
var(--color-fuchsia-50)
var(--color-fuchsia-100)
var(--color-fuchsia-200)
var(--color-fuchsia-300)
var(--color-fuchsia-400)
var(--color-fuchsia-500)
var(--color-fuchsia-600)
var(--color-fuchsia-700)
var(--color-fuchsia-800)
var(--color-fuchsia-900)
var(--color-pink-50)
var(--color-pink-100)
var(--color-pink-200)
var(--color-pink-300)
var(--color-pink-400)
var(--color-pink-500)
var(--color-pink-600)
var(--color-pink-700)
var(--color-pink-800)
var(--color-pink-900)
var(--color-rose-50)
var(--color-rose-100)
var(--color-rose-200)
var(--color-rose-300)
var(--color-rose-400)
var(--color-rose-500)
var(--color-rose-600)
var(--color-rose-700)
var(--color-rose-800)
var(--color-rose-900)
var(--color-primary--80, #3A424B)
var(--button-color)
var(--button-hover-color)
var(--button-primary-color)
var(--button-hover-primary-color)
var(--button-secondary-color)
var(--button-hover-secondary-color)
var(--button-info-color)
var(--button-hover-info-color)
var(--button-success-color)
var(--button-hover-success-color)
var(--button-warning-color)
var(--button-hover-warning-color)
var(--button-danger-color)
var(--button-hover-danger-color)
var(--button-background-color)
var(--button-hover-background-color)
var(--button-primary-background-color)
var(--button-hover-primary-background-color)
var(--button-secondary-background-color)
var(--button-hover-secondary-background-color)
var(--button-info-background-color)
var(--button-hover-info-background-color)
var(--button-success-background-color)
var(--button-hover-success-background-color)
var(--button-warning-background-color)
var(--button-hover-warning-background-color)
var(--button-danger-background-color)
var(--button-hover-danger-background-color)
var(--input-disabled-background-color)

66 Unique Font Sizes

Abc

100%
Abc

16px
Abc

inherit
Abc

0px
Abc

calc( var(--switch-height) / 1.8 )
Abc

calc(var(--switch-height)/1.8)
Abc

var(--base-font-size, 1rem)
Abc

var(--button-font-size)
Abc

var(--button-icon-size)
Abc

var(--button-lg-font-size)
Abc

var(--button-lg-icon-size)
Abc

var(--button-md-font-size)
Abc

var(--button-md-icon-size)
Abc

var(--button-sm-font-size)
Abc

var(--button-sm-icon-size)
Abc

var(--button-xs-font-size)
Abc

var(--button-xs-icon-size)
Abc

var(--display-1-size)
Abc

var(--display-2-size)
Abc

var(--display-3-size)
Abc

var(--font-size-1)
Abc

var(--font-size-10)
Abc

var(--font-size-11)
Abc

var(--font-size-12)
Abc

var(--font-size-2)
Abc

var(--font-size-3)
Abc

var(--font-size-4)
Abc

var(--font-size-5)
Abc

var(--font-size-6)
Abc

var(--font-size-7)
Abc

var(--font-size-8)
Abc

var(--font-size-9)
Abc

var(--font-size-base)
Abc

var(--h1)
Abc

var(--h2)
Abc

var(--h3)
Abc

var(--h4)
Abc

var(--h5)
Abc

var(--h6)
Abc

var(--heading-caption-size)
Abc

var(--heading-subtitle-size)
Abc

var(--help-text-size)
Abc

var(--icons-font-size)
Abc

var(--input-font-size)
Abc

var(--input-large-font-size)
Abc

var(--input-small-font-size)
Abc

var(--label-floating-font-size)
Abc

var(--table-font-size)
Abc

var(--tabs-font-size)
Abc

var(--tabs-lg-font-size)
Abc

var(--tabs-md-font-size)
Abc

var(--tabs-sm-font-size)
Abc

var(--tabs-xs-font-size)
Abc

var(--text-lg)
Abc

var(--text-lg, 1.5rem)
Abc

var(--text-md)
Abc

var(--text-md, 1.125rem)
Abc

var(--text-sm)
Abc

var(--text-sm, 0.875rem)
Abc

var(--text-sm, 875rem)
Abc

var(--text-xl)
Abc

var(--text-xl, 2.25rem)
Abc

var(--text-xs)
Abc

var(--text-xs, 0.75rem)
Abc

var(--text-xxl)
Abc

var(--text-xxl, 3rem)

6 Unique Font Families

Aa

var(--font-awesome--brands)
Aa

var(--font-awesome)
Aa

var(--font-family-code)
Aa

var(--font-family)
Aa

inherit
Aa

var(--font-family-primary)

24 Unique Border Radii

var(--slideshow-border-radius)
var(--slideshow-arrow-border-radius)
var(--slideshow-controls-border-radius)
var(--button-radius)
var(--radius-full, 9999px)
var(--rounded-sm)
var(--radius-sm)
var(--radius-full)
var(--box-radius)
var(--input-border-radius)
var(--switch-radius)
var(--switch-marker-radius)
2px
var(--radius-none)
var(--radius-xs)
var(--radius-md)
var(--radius-lg)
var(--radius-xl)
var(--radius-xxl)
var(--radius-xxs)
var(--button-xs-radius)
var(--button-sm-radius)
var(--button-md-radius)
var(--button-lg-radius)

4 Unique Z Indices

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

5385 total, 2124 unique declarations. Reusability index: 60%.

Margins

78% reusability index

8rem
6rem
4rem
2rem
1rem
.75rem
.5rem
0
auto
var(--space-lg)
var(--space-md)
var(--space-none)
var(--space-sm)
var(--space-xl)
var(--space-xs)
var(--space-xxs)

Paddings

74% reusability index

8rem
6rem
4rem
2rem
16px
1rem
.75rem
.5em
.5rem
.4em
0
var(--box-padding)
var(--slideshow-padding)
var(--space-lg)
var(--space-md)
var(--space-none)
var(--space-sm)
var(--space-xl)
var(--space-xs)
var(--space-xxs)

Line Heights

23% reusability index

1.25
var(--base-font-lh)
var(--table-lh)
18px
24px
var(--text-xxl-lh, 3.25rem)
var(--text-xl-lh, 2.375rem)
var(--text-lg-lh, 1.75rem)
var(--text-md-lh, 1.75rem)
var(--text-sm-lh, 1.5rem)
104%
var(--line-height-base)
var(--line-height-1)
var(--line-height-2)
var(--line-height-3)
var(--line-height-4)
var(--line-height-5)
var(--line-height-6)
var(--line-height-7)
var(--line-height-8)
var(--line-height-9)
var(--line-height-10)
var(--line-height-11)
var(--line-height-12)
var(--button-line-height)
var(--button-xs-line-height)
var(--button-sm-line-height)
var(--button-md-line-height)
var(--button-lg-line-height)
.5em
var(--tabs-xs-line-height)
var(--tabs-sm-line-height)
var(--tabs-md-line-height)
var(--tabs-lg-line-height)
1.25rem

Widths

77% reusability index

var(--slideshow-arrow-size)
var(--slideshow-control-size)
100%
max-content
1.5em
var(--icons-width)
auto
calc( var(--switch-width) + var(--switch-border-width) )
calc( var(--switch-height) - var(--switch-marker-margin) * 2 )
.625em
unset
24px
0px
100vw
600px
calc(var(--switch-width) + var(--switch-border-width))
calc(var(--switch-height) - var(--switch-marker-margin)*2)

Heights

70% reusability index

var(--slideshow-height)
100%
var(--slideshow-arrow-size)
var(--slideshow-control-size)
1.5em
var(--icons-height)
2em
auto
var(--logo-height)
calc( var(--switch-height) + var(--switch-border-width) )
calc( var(--switch-height) - var(--switch-marker-margin) * 2 )
.625em
52px
unset
24px
0px
2px
100vh
calc(var(--switch-height) + var(--switch-border-width))
calc(var(--switch-height) - var(--switch-marker-margin)*2)

6 Media Queries Consistency of media queries utilization on the project

(min-width: 576px)
(min-width: 768px)
(min-width: 1200px)
(min-width: 992px)
(max-width: 768px)
(max-width: 576px)

rosetta-hs.css

111KB / 12KB

1,481

Selectors
1,366

Rules
1,997

Declarations
306

Properties

Total Declarations

width

20
height

20
position

17
float

0
margin

35
padding

33
color

45
background color

40
font size

65

Size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

0

Files
0B

Total

Selectors and rules

Selectors used

1385

Class
138

Type
84

Pseudo class
25

Attribute
20

Pseudo element
3

Universal
0

Id
0

js- prefixed

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

34 Heavy selectors This selectors should be simplified

Specifisity
73	.has-floating-label .form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]):focus
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]).is-small
72	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]).is-large
63	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder
62	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file])
50	.switch-checkbox:checked+.switch-slider .switch-icon>:first-child
50	.switch-checkbox:checked+.switch-slider .switch-icon>:last-child
43	.has-floating-label .form__wrapper fieldset .input select.hs-input::placeholder
43	.has-floating-label .form__wrapper fieldset .input textarea.hs-input::placeholder
42	.form__wrapper fieldset .input select.hs-input:focus
42	.form__wrapper fieldset .input textarea.hs-input:focus
42	.form__wrapper fieldset .input select.hs-input.is-small
42	.form__wrapper fieldset .input textarea.hs-input.is-small
42	.form__wrapper fieldset .input select.hs-input.is-large
42	.form__wrapper fieldset .input textarea.hs-input.is-large
41	.form__wrapper fieldset .legal-consent-container .hs-richtext:not(:last-of-type)
41	.switch-checkbox:checked+.switch-slider .switch-icon i
40	.button.primary.is-outlined:hover
40	.button.is-primary.is-outlined:hover
40	.hs-button.primary.is-outlined:hover
40	.hs-button.is-primary.is-outlined:hover
40	.button.secondary.is-outlined:hover
40	.button.is-secondary.is-outlined:hover
40	.hs-button.secondary.is-outlined:hover
40	.hs-button.is-secondary.is-outlined:hover
40	.button.is-light.is-outlined:hover
40	.hs-button.is-light.is-outlined:hover
40	.button.is-subtle.is-outlined:hover
40	.hs-button.is-subtle.is-outlined:hover
40	.switch-checkbox:checked+.switch-slider .switch-icon
40	.switch-checkbox:checked+.switch-slider .switch-marker
33	.form__wrapper fieldset .input select.hs-input::placeholder
33	.form__wrapper fieldset .input textarea.hs-input::placeholder

17 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors
11	h1, h2, h3, h4, h5, h6, p, ol, ul, a, button
10	body, h1, h2, h3, h4, h5, h6, p, ol, ul
8	h1, h2, h3, h4, h5, h6, .title, .subtitle
6	h1, h2, h3, h4, h5, h6
5	.article h2, .article h3, .article h4, .article h5, .article h6
5	.article p, .article blockquote, .article ul li, .article ol li, .article dl dt
5	.article p:not(:last-child), .article blockquote:not(:last-child), .article ul li:not(:last-child), .article ol li:not(:last-child), .article dl dt:not(:last-child)
5	a, input, textarea, select, button
4	.button.primary, .button.is-primary, .hs-button.primary, .hs-button.is-primary
4	.button.primary:hover, .button.is-primary:hover, .hs-button.primary:hover, .hs-button.is-primary:hover
4	.button.primary.is-outlined, .button.is-primary.is-outlined, .hs-button.primary.is-outlined, .hs-button.is-primary.is-outlined
4	.button.primary.is-outlined:hover, .button.is-primary.is-outlined:hover, .hs-button.primary.is-outlined:hover, .hs-button.is-primary.is-outlined:hover
4	.button.secondary, .button.is-secondary, .hs-button.secondary, .hs-button.is-secondary
4	.button.secondary:hover, .button.is-secondary:hover, .hs-button.secondary:hover, .hs-button.is-secondary:hover
4	.button.secondary.is-outlined, .button.is-secondary.is-outlined, .hs-button.secondary.is-outlined, .hs-button.is-secondary.is-outlined
4	.button.secondary.is-outlined:hover, .button.is-secondary.is-outlined:hover, .hs-button.secondary.is-outlined:hover, .hs-button.is-secondary.is-outlined:hover
4	.article ul, .article ol, .article dl, .article table

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

Number of declarations per ruleset

7 Heavy rulesets This classes potentially could be changed to single class

Declarations
35	:root
27	:root
24	:root
23	:root
20	.button,.hs-button
17	.form__wrapper fieldset .input input.hs-input:not([type=checkbox]):not([type=radio]):not([type=file]),.form__wrapper fieldset .input select.hs-input,.form__wrapper fieldset .input textarea.hs-input
17	:root

0 Empty rulesets This selectors should be removed from project

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation

3 Universal selectors Universal selectors could affect performance and encapsulation of components

*
*:before
*:after

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

523 Important rules Important rules could dramatically decrease project maintainability and scalability

margin-right: 0
margin-left: 0
font-family: var(--font-family)
margin-top: auto
margin-bottom: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-top: auto
margin-bottom: auto
margin-top: auto
margin-bottom: auto
margin-top: auto
margin-bottom: auto
margin: var(--space-none)
margin-top: var(--space-none)
margin-right: var(--space-none)
margin-bottom: var(--space-none)
margin-left: var(--space-none)
margin-left: var(--space-none)
margin-right: var(--space-none)
margin-top: var(--space-none)
margin-bottom: var(--space-none)
margin: var(--space-xxs)
margin-top: var(--space-xxs)
margin-right: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin-left: var(--space-xxs)
margin-left: var(--space-xxs)
margin-right: var(--space-xxs)
margin-top: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin: var(--space-xs)
margin-top: var(--space-xs)
margin-right: var(--space-xs)
margin-bottom: var(--space-xs)
margin-left: var(--space-xs)
margin-left: var(--space-xs)
margin-right: var(--space-xs)
margin-top: var(--space-xs)
margin-bottom: var(--space-xs)
margin: var(--space-sm)
margin-top: var(--space-sm)
margin-right: var(--space-sm)
margin-bottom: var(--space-sm)
margin-left: var(--space-sm)
margin-left: var(--space-sm)
margin-right: var(--space-sm)
margin-top: var(--space-sm)
margin-bottom: var(--space-sm)
margin: var(--space-md)
margin-top: var(--space-md)
margin-right: var(--space-md)
margin-bottom: var(--space-md)
margin-left: var(--space-md)
margin-left: var(--space-md)
margin-right: var(--space-md)
margin-top: var(--space-md)
margin-bottom: var(--space-md)
margin: var(--space-lg)
margin-top: var(--space-lg)
margin-right: var(--space-lg)
margin-bottom: var(--space-lg)
margin-left: var(--space-lg)
margin-left: var(--space-lg)
margin-right: var(--space-lg)
margin-top: var(--space-lg)
margin-bottom: var(--space-lg)
margin: var(--space-xl)
margin-top: var(--space-xl)
margin-right: var(--space-xl)
margin-bottom: var(--space-xl)
margin-left: var(--space-xl)
margin-left: var(--space-xl)
margin-right: var(--space-xl)
margin-top: var(--space-xl)
margin-bottom: var(--space-xl)
padding: var(--space-none)
padding-top: var(--space-none)
padding-right: var(--space-none)
padding-bottom: var(--space-none)
padding-left: var(--space-none)
padding-left: var(--space-none)
padding-right: var(--space-none)
padding-top: var(--space-none)
padding-bottom: var(--space-none)
padding: var(--space-xxs)
padding-top: var(--space-xxs)
padding-right: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding-left: var(--space-xxs)
padding-left: var(--space-xxs)
padding-right: var(--space-xxs)
padding-top: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding: var(--space-xs)
padding-top: var(--space-xs)
padding-right: var(--space-xs)
padding-bottom: var(--space-xs)
padding-left: var(--space-xs)
padding-left: var(--space-xs)
padding-right: var(--space-xs)
padding-top: var(--space-xs)
padding-bottom: var(--space-xs)
padding: var(--space-sm)
padding-top: var(--space-sm)
padding-right: var(--space-sm)
padding-bottom: var(--space-sm)
padding-left: var(--space-sm)
padding-left: var(--space-sm)
padding-right: var(--space-sm)
padding-top: var(--space-sm)
padding-bottom: var(--space-sm)
padding: var(--space-md)
padding-top: var(--space-md)
padding-right: var(--space-md)
padding-bottom: var(--space-md)
padding-left: var(--space-md)
padding-left: var(--space-md)
padding-right: var(--space-md)
padding-top: var(--space-md)
padding-bottom: var(--space-md)
padding: var(--space-lg)
padding-top: var(--space-lg)
padding-right: var(--space-lg)
padding-bottom: var(--space-lg)
padding-left: var(--space-lg)
padding-left: var(--space-lg)
padding-right: var(--space-lg)
padding-top: var(--space-lg)
padding-bottom: var(--space-lg)
padding: var(--space-xl)
padding-top: var(--space-xl)
padding-right: var(--space-xl)
padding-bottom: var(--space-xl)
padding-left: var(--space-xl)
padding-left: var(--space-xl)
padding-right: var(--space-xl)
padding-top: var(--space-xl)
padding-bottom: var(--space-xl)
margin: var(--space-none)
margin-top: var(--space-none)
margin-right: var(--space-none)
margin-bottom: var(--space-none)
margin-left: var(--space-none)
margin-left: var(--space-none)
margin-right: var(--space-none)
margin-top: var(--space-none)
margin-bottom: var(--space-none)
margin: var(--space-xxs)
margin-top: var(--space-xxs)
margin-right: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin-left: var(--space-xxs)
margin-left: var(--space-xxs)
margin-right: var(--space-xxs)
margin-top: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin: var(--space-xs)
margin-top: var(--space-xs)
margin-right: var(--space-xs)
margin-bottom: var(--space-xs)
margin-left: var(--space-xs)
margin-left: var(--space-xs)
margin-right: var(--space-xs)
margin-top: var(--space-xs)
margin-bottom: var(--space-xs)
margin: var(--space-sm)
margin-top: var(--space-sm)
margin-right: var(--space-sm)
margin-bottom: var(--space-sm)
margin-left: var(--space-sm)
margin-left: var(--space-sm)
margin-right: var(--space-sm)
margin-top: var(--space-sm)
margin-bottom: var(--space-sm)
margin: var(--space-md)
margin-top: var(--space-md)
margin-right: var(--space-md)
margin-bottom: var(--space-md)
margin-left: var(--space-md)
margin-left: var(--space-md)
margin-right: var(--space-md)
margin-top: var(--space-md)
margin-bottom: var(--space-md)
margin: var(--space-lg)
margin-top: var(--space-lg)
margin-right: var(--space-lg)
margin-bottom: var(--space-lg)
margin-left: var(--space-lg)
margin-left: var(--space-lg)
margin-right: var(--space-lg)
margin-top: var(--space-lg)
margin-bottom: var(--space-lg)
margin: var(--space-xl)
margin-top: var(--space-xl)
margin-right: var(--space-xl)
margin-bottom: var(--space-xl)
margin-left: var(--space-xl)
margin-left: var(--space-xl)
margin-right: var(--space-xl)
margin-top: var(--space-xl)
margin-bottom: var(--space-xl)
padding: var(--space-none)
padding-top: var(--space-none)
padding-right: var(--space-none)
padding-bottom: var(--space-none)
padding-left: var(--space-none)
padding-left: var(--space-none)
padding-right: var(--space-none)
padding-top: var(--space-none)
padding-bottom: var(--space-none)
padding: var(--space-xxs)
padding-top: var(--space-xxs)
padding-right: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding-left: var(--space-xxs)
padding-left: var(--space-xxs)
padding-right: var(--space-xxs)
padding-top: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding: var(--space-xs)
padding-top: var(--space-xs)
padding-right: var(--space-xs)
padding-bottom: var(--space-xs)
padding-left: var(--space-xs)
padding-left: var(--space-xs)
padding-right: var(--space-xs)
padding-top: var(--space-xs)
padding-bottom: var(--space-xs)
padding: var(--space-sm)
padding-top: var(--space-sm)
padding-right: var(--space-sm)
padding-bottom: var(--space-sm)
padding-left: var(--space-sm)
padding-left: var(--space-sm)
padding-right: var(--space-sm)
padding-top: var(--space-sm)
padding-bottom: var(--space-sm)
padding: var(--space-md)
padding-top: var(--space-md)
padding-right: var(--space-md)
padding-bottom: var(--space-md)
padding-left: var(--space-md)
padding-left: var(--space-md)
padding-right: var(--space-md)
padding-top: var(--space-md)
padding-bottom: var(--space-md)
padding: var(--space-lg)
padding-top: var(--space-lg)
padding-right: var(--space-lg)
padding-bottom: var(--space-lg)
padding-left: var(--space-lg)
padding-left: var(--space-lg)
padding-right: var(--space-lg)
padding-top: var(--space-lg)
padding-bottom: var(--space-lg)
padding: var(--space-xl)
padding-top: var(--space-xl)
padding-right: var(--space-xl)
padding-bottom: var(--space-xl)
padding-left: var(--space-xl)
padding-left: var(--space-xl)
padding-right: var(--space-xl)
padding-top: var(--space-xl)
padding-bottom: var(--space-xl)
margin: var(--space-none)
margin-top: var(--space-none)
margin-right: var(--space-none)
margin-bottom: var(--space-none)
margin-left: var(--space-none)
margin-left: var(--space-none)
margin-right: var(--space-none)
margin-top: var(--space-none)
margin-bottom: var(--space-none)
margin: var(--space-xxs)
margin-top: var(--space-xxs)
margin-right: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin-left: var(--space-xxs)
margin-left: var(--space-xxs)
margin-right: var(--space-xxs)
margin-top: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin: var(--space-xs)
margin-top: var(--space-xs)
margin-right: var(--space-xs)
margin-bottom: var(--space-xs)
margin-left: var(--space-xs)
margin-left: var(--space-xs)
margin-right: var(--space-xs)
margin-top: var(--space-xs)
margin-bottom: var(--space-xs)
margin: var(--space-sm)
margin-top: var(--space-sm)
margin-right: var(--space-sm)
margin-bottom: var(--space-sm)
margin-left: var(--space-sm)
margin-left: var(--space-sm)
margin-right: var(--space-sm)
margin-top: var(--space-sm)
margin-bottom: var(--space-sm)
margin: var(--space-md)
margin-top: var(--space-md)
margin-right: var(--space-md)
margin-bottom: var(--space-md)
margin-left: var(--space-md)
margin-left: var(--space-md)
margin-right: var(--space-md)
margin-top: var(--space-md)
margin-bottom: var(--space-md)
margin: var(--space-lg)
margin-top: var(--space-lg)
margin-right: var(--space-lg)
margin-bottom: var(--space-lg)
margin-left: var(--space-lg)
margin-left: var(--space-lg)
margin-right: var(--space-lg)
margin-top: var(--space-lg)
margin-bottom: var(--space-lg)
margin: var(--space-xl)
margin-top: var(--space-xl)
margin-right: var(--space-xl)
margin-bottom: var(--space-xl)
margin-left: var(--space-xl)
margin-left: var(--space-xl)
margin-right: var(--space-xl)
margin-top: var(--space-xl)
margin-bottom: var(--space-xl)
padding: var(--space-none)
padding-top: var(--space-none)
padding-right: var(--space-none)
padding-bottom: var(--space-none)
padding-left: var(--space-none)
padding-left: var(--space-none)
padding-right: var(--space-none)
padding-top: var(--space-none)
padding-bottom: var(--space-none)
padding: var(--space-xxs)
padding-top: var(--space-xxs)
padding-right: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding-left: var(--space-xxs)
padding-left: var(--space-xxs)
padding-right: var(--space-xxs)
padding-top: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding: var(--space-xs)
padding-top: var(--space-xs)
padding-right: var(--space-xs)
padding-bottom: var(--space-xs)
padding-left: var(--space-xs)
padding-left: var(--space-xs)
padding-right: var(--space-xs)
padding-top: var(--space-xs)
padding-bottom: var(--space-xs)
padding: var(--space-sm)
padding-top: var(--space-sm)
padding-right: var(--space-sm)
padding-bottom: var(--space-sm)
padding-left: var(--space-sm)
padding-left: var(--space-sm)
padding-right: var(--space-sm)
padding-top: var(--space-sm)
padding-bottom: var(--space-sm)
padding: var(--space-md)
padding-top: var(--space-md)
padding-right: var(--space-md)
padding-bottom: var(--space-md)
padding-left: var(--space-md)
padding-left: var(--space-md)
padding-right: var(--space-md)
padding-top: var(--space-md)
padding-bottom: var(--space-md)
padding: var(--space-lg)
padding-top: var(--space-lg)
padding-right: var(--space-lg)
padding-bottom: var(--space-lg)
padding-left: var(--space-lg)
padding-left: var(--space-lg)
padding-right: var(--space-lg)
padding-top: var(--space-lg)
padding-bottom: var(--space-lg)
padding: var(--space-xl)
padding-top: var(--space-xl)
padding-right: var(--space-xl)
padding-bottom: var(--space-xl)
padding-left: var(--space-xl)
padding-left: var(--space-xl)
padding-right: var(--space-xl)
padding-top: var(--space-xl)
padding-bottom: var(--space-xl)
margin: var(--space-none)
margin-top: var(--space-none)
margin-right: var(--space-none)
margin-bottom: var(--space-none)
margin-left: var(--space-none)
margin-left: var(--space-none)
margin-right: var(--space-none)
margin-top: var(--space-none)
margin-bottom: var(--space-none)
margin: var(--space-xxs)
margin-top: var(--space-xxs)
margin-right: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin-left: var(--space-xxs)
margin-left: var(--space-xxs)
margin-right: var(--space-xxs)
margin-top: var(--space-xxs)
margin-bottom: var(--space-xxs)
margin: var(--space-xs)
margin-top: var(--space-xs)
margin-right: var(--space-xs)
margin-bottom: var(--space-xs)
margin-left: var(--space-xs)
margin-left: var(--space-xs)
margin-right: var(--space-xs)
margin-top: var(--space-xs)
margin-bottom: var(--space-xs)
margin: var(--space-sm)
margin-top: var(--space-sm)
margin-right: var(--space-sm)
margin-bottom: var(--space-sm)
margin-left: var(--space-sm)
margin-left: var(--space-sm)
margin-right: var(--space-sm)
margin-top: var(--space-sm)
margin-bottom: var(--space-sm)
margin: var(--space-md)
margin-top: var(--space-md)
margin-right: var(--space-md)
margin-bottom: var(--space-md)
margin-left: var(--space-md)
margin-left: var(--space-md)
margin-right: var(--space-md)
margin-top: var(--space-md)
margin-bottom: var(--space-md)
margin: var(--space-lg)
margin-top: var(--space-lg)
margin-right: var(--space-lg)
margin-bottom: var(--space-lg)
margin-left: var(--space-lg)
margin-left: var(--space-lg)
margin-right: var(--space-lg)
margin-top: var(--space-lg)
margin-bottom: var(--space-lg)
margin: var(--space-xl)
margin-top: var(--space-xl)
margin-right: var(--space-xl)
margin-bottom: var(--space-xl)
margin-left: var(--space-xl)
margin-left: var(--space-xl)
margin-right: var(--space-xl)
margin-top: var(--space-xl)
margin-bottom: var(--space-xl)
padding: var(--space-none)
padding-top: var(--space-none)
padding-right: var(--space-none)
padding-bottom: var(--space-none)
padding-left: var(--space-none)
padding-left: var(--space-none)
padding-right: var(--space-none)
padding-top: var(--space-none)
padding-bottom: var(--space-none)
padding: var(--space-xxs)
padding-top: var(--space-xxs)
padding-right: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding-left: var(--space-xxs)
padding-left: var(--space-xxs)
padding-right: var(--space-xxs)
padding-top: var(--space-xxs)
padding-bottom: var(--space-xxs)
padding: var(--space-xs)
padding-top: var(--space-xs)
padding-right: var(--space-xs)
padding-bottom: var(--space-xs)
padding-left: var(--space-xs)
padding-left: var(--space-xs)
padding-right: var(--space-xs)
padding-top: var(--space-xs)
padding-bottom: var(--space-xs)
padding: var(--space-sm)
padding-top: var(--space-sm)
padding-right: var(--space-sm)
padding-bottom: var(--space-sm)
padding-left: var(--space-sm)
padding-left: var(--space-sm)
padding-right: var(--space-sm)
padding-top: var(--space-sm)
padding-bottom: var(--space-sm)
padding: var(--space-md)
padding-top: var(--space-md)
padding-right: var(--space-md)
padding-bottom: var(--space-md)
padding-left: var(--space-md)
padding-left: var(--space-md)
padding-right: var(--space-md)
padding-top: var(--space-md)
padding-bottom: var(--space-md)
padding: var(--space-lg)
padding-top: var(--space-lg)
padding-right: var(--space-lg)
padding-bottom: var(--space-lg)
padding-left: var(--space-lg)
padding-left: var(--space-lg)
padding-right: var(--space-lg)
padding-top: var(--space-lg)
padding-bottom: var(--space-lg)
padding: var(--space-xl)
padding-top: var(--space-xl)
padding-right: var(--space-xl)
padding-bottom: var(--space-xl)
padding-left: var(--space-xl)
padding-left: var(--space-xl)
padding-right: var(--space-xl)
padding-top: var(--space-xl)
padding-bottom: var(--space-xl)

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

1997 total, 791 unique declarations. Reusability index: 60%.

Color

24% reusability index

Background Color

20% reusability index

Font Size

55% reusability index

Font Family

0% reusability index

Border radius

58% reusability index

Z-index

0% reusability index

34 Unique Colors

Aa

transparent
Aa

#fff
Aa

var(--slideshow-arrow-color)
Aa

var(--slideshow-arrow-background)
Aa

var(--color-primary--20)
Aa

var(--button-color)
Aa

var(--button-hover-color)
Aa

var(--button-color-primary)
Aa

var(--button-hover-color-primary)
Aa

var(--button-bg-primary)
Aa

var(--button-color-secondary)
Aa

var(--button-hover-color-secondary)
Aa

var(--button-bg-secondary)
Aa

var(--button-color-light)
Aa

var(--button-hover-color-light)
Aa

var(--button-bg-light)
Aa

var(--button-color-subtle)
Aa

var(--button-hover-color-subtle)
Aa

var(--color-primary)
Aa

var(--badge-color)
Aa

var(--table-header-text-color)
Aa

var(--table-footer-text-color)
Aa

var(--table-body-text-color)
Aa

var(--input-color)
Aa

var(--input-focus-color)
Aa

var(--input-placeholder-color)
Aa

var(--help-text-error-color)
Aa

var(--label-color)
Aa

var(--switch--off-icon-color)
Aa

var(--switch--on-icon-color)
Aa

var(--color-contrast--medium)
Aa

var(--color-accent)
Aa

var(--color-contrast--high)
Aa

var(--color-contrast--low)

32 Unique Background Colors

transparent
#fff
var(--slideshow-arrow-background)
var(--slideshow-arrow-color)
var(--color-primary--05)
var(--color-contrast--lower)
var(--color-contrast--high)
var(--button-bg)
var(--button-hover-bg)
var(--button-bg-primary)
var(--button-hover-bg-primary)
var(--button-bg-secondary)
var(--button-hover-bg-secondary)
var(--button-bg-light)
var(--button-hover-bg-light)
var(--button-bg-subtle)
var(--button-hover-bg-subtle)
var(--badge-background)
var(--color-rgba-black-30)
var(--table-background)
var(--table-row-odd-background)
var(--table-row-even-background)
var(--table-header-background)
var(--table-footer-background)
var(--table-body-background)
var(--table-hover-background)
var(--input-background-color)
var(--switch--off-background)
var(--switch-marker--off-background)
var(--switch--on-background)
var(--switch-marker--on-background)
var(--color-theme--background)

29 Unique Font Sizes

Abc

16px
Abc

inherit
Abc

calc( var(--switch-height) / 1.8 )
Abc

var(--base-font-size, 1rem)
Abc

var(--button-font-size)
Abc

var(--button-lg-font-size)
Abc

var(--button-sm-font-size)
Abc

var(--display-1-size)
Abc

var(--display-2-size)
Abc

var(--display-3-size)
Abc

var(--help-text-size)
Abc

var(--icons-font-size)
Abc

var(--input-font-size)
Abc

var(--input-large-font-size)
Abc

var(--input-small-font-size)
Abc

var(--table-font-size)
Abc

var(--text-lg)
Abc

var(--text-lg, 1.5rem)
Abc

var(--text-md)
Abc

var(--text-md, 1.125rem)
Abc

var(--text-sm)
Abc

var(--text-sm, 0.875rem)
Abc

var(--text-sm, 875rem)
Abc

var(--text-xl)
Abc

var(--text-xl, 2.25rem)
Abc

var(--text-xs)
Abc

var(--text-xs, 0.75rem)
Abc

var(--text-xxl)
Abc

var(--text-xxl, 3rem)

5 Unique Font Families

Aa

var(--font-awesome--brands)
Aa

var(--font-awesome)
Aa

var(--font-family-code)
Aa

var(--font-family)
Aa

inherit

19 Unique Border Radii

var(--slideshow-border-radius)
var(--slideshow-arrow-border-radius)
var(--slideshow-controls-border-radius)
var(--button-radius)
var(--radius-full, 9999px)
var(--rounded-sm)
var(--radius-sm)
var(--radius-full)
var(--box-radius)
var(--input-border-radius)
var(--switch-radius)
var(--switch-marker-radius)
2px
var(--radius-none)
var(--radius-xs)
var(--radius-md)
var(--radius-lg)
var(--radius-xl)
var(--radius-xxl)

1 Unique Z Index

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

1997 total, 791 unique declarations. Reusability index: 60%.

Margins

74% reusability index

0
auto
var(--space-lg)
var(--space-md)
var(--space-none)
var(--space-sm)
var(--space-xl)
var(--space-xs)
var(--space-xxs)

Paddings

66% reusability index

16px
0
var(--box-padding)
var(--slideshow-padding)
var(--space-lg)
var(--space-md)
var(--space-none)
var(--space-sm)
var(--space-xl)
var(--space-xs)
var(--space-xxs)

Line Heights

15% reusability index

1.25
var(--base-font-lh)
var(--table-lh)
18px
24px
var(--text-xxl-lh, 3.25rem)
var(--text-xl-lh, 2.375rem)
var(--text-lg-lh, 1.75rem)
var(--text-md-lh, 1.75rem)
var(--text-sm-lh, 1.5rem)
104%

Widths

50% reusability index

var(--slideshow-arrow-size)
var(--slideshow-control-size)
100%
max-content
1.5em
var(--icons-width)
auto
calc( var(--switch-width) + var(--switch-border-width) )
calc( var(--switch-height) - var(--switch-marker-margin) * 2 )
.625em

Heights

35% reusability index

var(--slideshow-height)
100%
var(--slideshow-arrow-size)
var(--slideshow-control-size)
1.5em
var(--icons-height)
2em
auto
var(--logo-height)
calc( var(--switch-height) + var(--switch-border-width) )
calc( var(--switch-height) - var(--switch-marker-margin) * 2 )
.625em
52px

4 Media Queries Consistency of media queries utilization on the project

(min-width: 576px)
(min-width: 768px)
(min-width: 1200px)
(min-width: 992px)

rosetta.css

172KB / 20KB

2,265

Selectors
2,121

Rules
3,388

Declarations
653

Properties

Total Declarations

width

56
height

47
position

56
float

2
margin

40
padding

41
color

299
background color

300
font size

87

Size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

0

Files
0B

Total

Selectors and rules

Selectors used

2130

Class
168

Type
118

Pseudo class
27

Pseudo element
23

Attribute
3

Universal
0

Id
0

js- prefixed

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

44 Heavy selectors This selectors should be simplified

Specifisity
50	.topbar--expand-always .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-always .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-tablet .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-tablet .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-laptop .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-laptop .topbar__search .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-desktop .topbar__navigation .toggle__checkbox:checked~.toggle__content
50	.topbar--expand-desktop .topbar__search .toggle__checkbox:checked~.toggle__content
50	.switch-checkbox:checked+.switch-slider .switch-icon>:first-child
50	.switch-checkbox:checked+.switch-slider .switch-icon>:last-child
41	.toggle__checkbox:checked~[class$=__button]>[class$=__icon]:before
41	.toggle__checkbox:checked~[class$=__button]>[class$=__icon]:after
41	.switch-checkbox:checked+.switch-slider .switch-icon i
40	.button.is-active.is-primary:hover
40	.button.is-active.is-secondary:hover
40	.button.is-active.is-info:hover
40	.button.is-active.is-success:hover
40	.button.is-active.is-warning:hover
40	.button.is-active.is-danger:hover
40	.button.is-light.is-primary:hover
40	.button.is-light.is-secondary:hover
40	.button.is-light.is-info:hover
40	.button.is-light.is-success:hover
40	.button.is-light.is-warning:hover
40	.button.is-light.is-danger:hover
40	.button.is-outlined.is-primary:hover
40	.button.is-outlined.is-secondary:hover
40	.button.is-outlined.is-info:hover
40	.button.is-outlined.is-success:hover
40	.button.is-outlined.is-warning:hover
40	.button.is-outlined.is-danger:hover
40	.button.is-text:hover .is-left-icon
40	.button.is-text:hover .is-right-icon
40	.buttons .button:not(:last-child):not(.is-full-width)
40	.topbar .toggle__checkbox:checked~.toggle__content
40	.control .append-icon.is-interactive:hover
40	.control .prepend-icon.is-interactive:hover
40	.control:focus-within .append-icon:not(.is-interactive)
40	.control:focus-within .prepend-icon:not(.is-interactive)
40	.has-floating-label .input:not(:placeholder-shown)~.label
40	.has-floating-label .select:not(:placeholder-shown)~.label
40	.has-floating-label .textarea:not(:placeholder-shown)~.label
40	.switch-checkbox:checked+.switch-slider .switch-icon
40	.switch-checkbox:checked+.switch-slider .switch-marker

14 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors
23	html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6
11	h1, h2, h3, h4, h5, h6, p, ol, ul, a, button
8	h1, h2, h3, h4, h5, h6, .title, .subtitle
6	h1, h2, h3, h4, h5, h6
6	h1, h2, h3, h4, h5, h6
6	.is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6
6	.input.is-small, .is-small .input, .textarea.is-small, .is-small .textarea, .select select.is-small, .is-small .select select
6	.input.is-large, .is-large .input, .textarea.is-large, .is-large .textarea, .select select.is-large, .is-large .select select
5	a, button, input, select, textarea
5	.article h2, .article h3, .article h4, .article h5, .article h6
5	.article p, .article blockquote, .article ul li, .article ol li, .article dl dt
5	.article p:not(:last-child), .article blockquote:not(:last-child), .article ul li:not(:last-child), .article ol li:not(:last-child), .article dl dt:not(:last-child)
4	.article ul, .article ol, .article dl, .article table
4	.has-floating-label:focus-within .label, .has-floating-label .input:not(:placeholder-shown)~.label, .has-floating-label .select:not(:placeholder-shown)~.label, .has-floating-label .textarea:not(:placeholder-shown)~.label

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

Number of declarations per ruleset

11 Heavy rulesets This classes potentially could be changed to single class

Declarations
241	:root
59	:root
52	:root
25	:root
23	.button
22	:root
18	:root
18	.input,.textarea,.select select
17	:root
16	.tabs ul li a
16	.select::after

0 Empty rulesets This selectors should be removed from project

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation

3 Universal selectors Universal selectors could affect performance and encapsulation of components

*
*::before
*::after

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

1572 Important rules Important rules could dramatically decrease project maintainability and scalability

justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
justify-content: stretch
align-content: center
align-content: flex-start
align-content: flex-end
align-content: space-between
align-content: space-around
align-content: space-evenly
align-content: stretch
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
justify-content: stretch
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
justify-content: stretch
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
justify-content: stretch
align-content: center
align-content: flex-start
align-content: flex-end
align-content: space-between
align-content: space-around
align-content: space-evenly
align-content: stretch
align-content: center
align-content: flex-start
align-content: flex-end
align-content: space-between
align-content: space-around
align-content: space-evenly
align-content: stretch
align-content: center
align-content: flex-start
align-content: flex-end
align-content: space-between
align-content: space-around
align-content: space-evenly
align-content: stretch
justify-items: center
justify-items: flex-start
justify-items: flex-end
justify-items: stretch
justify-items: baseline
justify-self: center
justify-self: flex-start
justify-self: flex-end
justify-self: stretch
justify-self: baseline
align-items: center
align-items: flex-start
align-items: flex-end
align-items: stretch
align-items: baseline
align-self: center
align-self: flex-start
align-self: flex-end
align-self: stretch
align-self: baseline
justify-items: center
justify-items: flex-start
justify-items: flex-end
justify-items: stretch
justify-items: baseline
justify-items: center
justify-items: flex-start
justify-items: flex-end
justify-items: stretch
justify-items: baseline
justify-items: center
justify-items: flex-start
justify-items: flex-end
justify-items: stretch
justify-items: baseline
justify-self: center
justify-self: flex-start
justify-self: flex-end
justify-self: stretch
justify-self: baseline
justify-self: center
justify-self: flex-start
justify-self: flex-end
justify-self: stretch
justify-self: baseline
justify-self: center
justify-self: flex-start
justify-self: flex-end
justify-self: stretch
justify-self: baseline
align-items: center
align-items: flex-start
align-items: flex-end
align-items: stretch
align-items: baseline
align-items: center
align-items: flex-start
align-items: flex-end
align-items: stretch
align-items: baseline
align-items: center
align-items: flex-start
align-items: flex-end
align-items: stretch
align-items: baseline
align-self: center
align-self: flex-start
align-self: flex-end
align-self: stretch
align-self: baseline
align-self: center
align-self: flex-start
align-self: flex-end
align-self: stretch
align-self: baseline
align-self: center
align-self: flex-start
align-self: flex-end
align-self: stretch
align-self: baseline
margin-top: auto
margin-bottom: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-left: auto
margin-right: auto
margin-top: auto
margin-bottom: auto
margin-top: auto
margin-bottom: auto
margin-top: auto
margin-bottom: auto
gap: 0
gap: .5rem
gap: .75rem
gap: 1rem
gap: 2rem
gap: 4rem
gap: 6rem
gap: 8rem
gap: 0
gap: .5rem
gap: .75rem
gap: 1rem
gap: 2rem
gap: 4rem
gap: 6rem
gap: 8rem
gap: 0
gap: .5rem
gap: .75rem
gap: 1rem
gap: 2rem
gap: 4rem
gap: 6rem
gap: 8rem
gap: 0
gap: .5rem
gap: .75rem
gap: 1rem
gap: 2rem
gap: 4rem
gap: 6rem
gap: 8rem
row-gap: 0
row-gap: .5rem
row-gap: .75rem
row-gap: 1rem
row-gap: 2rem
row-gap: 4rem
row-gap: 6rem
row-gap: 8rem
row-gap: 0
row-gap: .5rem
row-gap: .75rem
row-gap: 1rem
row-gap: 2rem
row-gap: 4rem
row-gap: 6rem
row-gap: 8rem
row-gap: 0
row-gap: .5rem
row-gap: .75rem
row-gap: 1rem
row-gap: 2rem
row-gap: 4rem
row-gap: 6rem
row-gap: 8rem
row-gap: 0
row-gap: .5rem
row-gap: .75rem
row-gap: 1rem
row-gap: 2rem
row-gap: 4rem
row-gap: 6rem
row-gap: 8rem
column-gap: 0
column-gap: .5rem
column-gap: .75rem
column-gap: 1rem
column-gap: 2rem
column-gap: 4rem
column-gap: 6rem
column-gap: 8rem
column-gap: 0
column-gap: .5rem
column-gap: .75rem
column-gap: 1rem
column-gap: 2rem
column-gap: 4rem
column-gap: 6rem
column-gap: 8rem
column-gap: 0
column-gap: .5rem
column-gap: .75rem
column-gap: 1rem
column-gap: 2rem
column-gap: 4rem
column-gap: 6rem
column-gap: 8rem
column-gap: 0
column-gap: .5rem
column-gap: .75rem
column-gap: 1rem
column-gap: 2rem
column-gap: 4rem
column-gap: 6rem
column-gap: 8rem
margin: 0
margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
margin-left: 0
margin-right: 0
margin-top: 0
margin-bottom: 0
margin: .5rem
margin-top: .5rem
margin-right: .5rem
margin-bottom: .5rem
margin-left: .5rem
margin-left: .5rem
margin-right: .5rem
margin-top: .5rem
margin-bottom: .5rem
margin: .75rem
margin-top: .75rem
margin-right: .75rem
margin-bottom: .75rem
margin-left: .75rem
margin-left: .75rem
margin-right: .75rem
margin-top: .75rem
margin-bottom: .75rem
margin: 1rem
margin-top: 1rem
margin-right: 1rem
margin-bottom: 1rem
margin-left: 1rem
margin-left: 1rem
margin-right: 1rem
margin-top: 1rem
margin-bottom: 1rem
margin: 2rem
margin-top: 2rem
margin-right: 2rem
margin-bottom: 2rem
margin-left: 2rem
margin-left: 2rem
margin-right: 2rem
margin-top: 2rem
margin-bottom: 2rem
margin: 4rem
margin-top: 4rem
margin-right: 4rem
margin-bottom: 4rem
margin-left: 4rem
margin-left: 4rem
margin-right: 4rem
margin-top: 4rem
margin-bottom: 4rem
margin: 6rem
margin-top: 6rem
margin-right: 6rem
margin-bottom: 6rem
margin-left: 6rem
margin-left: 6rem
margin-right: 6rem
margin-top: 6rem
margin-bottom: 6rem
margin: 8rem
margin-top: 8rem
margin-right: 8rem
margin-bottom: 8rem
margin-left: 8rem
margin-left: 8rem
margin-right: 8rem
margin-top: 8rem
margin-bottom: 8rem
padding: 0
padding-top: 0
padding-right: 0
padding-bottom: 0
padding-left: 0
padding-left: 0
padding-right: 0
padding-top: 0
padding-bottom: 0
padding: .5rem
padding-top: .5rem
padding-right: .5rem
padding-bottom: .5rem
padding-left: .5rem
padding-left: .5rem
padding-right: .5rem
padding-top: .5rem
padding-bottom: .5rem
padding: .75rem
padding-top: .75rem
padding-right: .75rem
padding-bottom: .75rem
padding-left: .75rem
padding-left: .75rem
padding-right: .75rem
padding-top: .75rem
padding-bottom: .75rem
padding: 1rem
padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
padding-left: 1rem
padding-right: 1rem
padding-top: 1rem
padding-bottom: 1rem
padding: 2rem
padding-top: 2rem
padding-right: 2rem
padding-bottom: 2rem
padding-left: 2rem
padding-left: 2rem
padding-right: 2rem
padding-top: 2rem
padding-bottom: 2rem
padding: 4rem
padding-top: 4rem
padding-right: 4rem
padding-bottom: 4rem
padding-left: 4rem
padding-left: 4rem
padding-right: 4rem
padding-top: 4rem
padding-bottom: 4rem
padding: 6rem
padding-top: 6rem
padding-right: 6rem
padding-bottom: 6rem
padding-left: 6rem
padding-left: 6rem
padding-right: 6rem
padding-top: 6rem
padding-bottom: 6rem
padding: 8rem
padding-top: 8rem
padding-right: 8rem
padding-bottom: 8rem
padding-left: 8rem
padding-left: 8rem
padding-right: 8rem
padding-top: 8rem
padding-bottom: 8rem
margin: 0
margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
margin-left: 0
margin-right: 0
margin-top: 0
margin-bottom: 0
margin: .5rem
margin-top: .5rem
margin-right: .5rem
margin-bottom: .5rem
margin-left: .5rem
margin-left: .5rem
margin-right: .5rem
margin-top: .5rem
margin-bottom: .5rem
margin: .75rem
margin-top: .75rem
margin-right: .75rem
margin-bottom: .75rem
margin-left: .75rem
margin-left: .75rem
margin-right: .75rem
margin-top: .75rem
margin-bottom: .75rem
margin: 1rem
margin-top: 1rem
margin-right: 1rem
margin-bottom: 1rem
margin-left: 1rem
margin-left: 1rem
margin-right: 1rem
margin-top: 1rem
margin-bottom: 1rem
margin: 2rem
margin-top: 2rem
margin-right: 2rem
margin-bottom: 2rem
margin-left: 2rem
margin-left: 2rem
margin-right: 2rem
margin-top: 2rem
margin-bottom: 2rem
margin: 4rem
margin-top: 4rem
margin-right: 4rem
margin-bottom: 4rem
margin-left: 4rem
margin-left: 4rem
margin-right: 4rem
margin-top: 4rem
margin-bottom: 4rem
margin: 6rem
margin-top: 6rem
margin-right: 6rem
margin-bottom: 6rem
margin-left: 6rem
margin-left: 6rem
margin-right: 6rem
margin-top: 6rem
margin-bottom: 6rem
margin: 8rem
margin-top: 8rem
margin-right: 8rem
margin-bottom: 8rem
margin-left: 8rem
margin-left: 8rem
margin-right: 8rem
margin-top: 8rem
margin-bottom: 8rem
padding: 0
padding-top: 0
padding-right: 0
padding-bottom: 0
padding-left: 0
padding-left: 0
padding-right: 0
padding-top: 0
padding-bottom: 0
padding: .5rem
padding-top: .5rem
padding-right: .5rem
padding-bottom: .5rem
padding-left: .5rem
padding-left: .5rem
padding-right: .5rem
padding-top: .5rem
padding-bottom: .5rem
padding: .75rem
padding-top: .75rem
padding-right: .75rem
padding-bottom: .75rem
padding-left: .75rem
padding-left: .75rem
padding-right: .75rem
padding-top: .75rem
padding-bottom: .75rem
padding: 1rem
padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
padding-left: 1rem
padding-right: 1rem
padding-top: 1rem
padding-bottom: 1rem
padding: 2rem
padding-top: 2rem
padding-right: 2rem
padding-bottom: 2rem
padding-left: 2rem
padding-left: 2rem
padding-right: 2rem
padding-top: 2rem
padding-bottom: 2rem
padding: 4rem
padding-top: 4rem
padding-right: 4rem
padding-bottom: 4rem
padding-left: 4rem
padding-left: 4rem
padding-right: 4rem
padding-top: 4rem
padding-bottom: 4rem
padding: 6rem
padding-top: 6rem
padding-right: 6rem
padding-bottom: 6rem
padding-left: 6rem
padding-left: 6rem
padding-right: 6rem
padding-top: 6rem
padding-bottom: 6rem
padding: 8rem
padding-top: 8rem
padding-right: 8rem
padding-bottom: 8rem
padding-left: 8rem
padding-left: 8rem
padding-right: 8rem
padding-top: 8rem
padding-bottom: 8rem
margin: 0
margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
margin-left: 0
margin-right: 0
margin-top: 0
margin-bottom: 0
margin: .5rem
margin-top: .5rem
margin-right: .5rem
margin-bottom: .5rem
margin-left: .5rem
margin-left: .5rem
margin-right: .5rem
margin-top: .5rem
margin-bottom: .5rem
margin: .75rem
margin-top: .75rem
margin-right: .75rem
margin-bottom: .75rem
margin-left: .75rem
margin-left: .75rem
margin-right: .75rem
margin-top: .75rem
margin-bottom: .75rem
margin: 1rem
margin-top: 1rem
margin-right: 1rem
margin-bottom: 1rem
margin-left: 1rem
margin-left: 1rem
margin-right: 1rem
margin-top: 1rem
margin-bottom: 1rem
margin: 2rem
margin-top: 2rem
margin-right: 2rem
margin-bottom: 2rem
margin-left: 2rem
margin-left: 2rem
margin-right: 2rem
margin-top: 2rem
margin-bottom: 2rem
margin: 4rem
margin-top: 4rem
margin-right: 4rem
margin-bottom: 4rem
margin-left: 4rem
margin-left: 4rem
margin-right: 4rem
margin-top: 4rem
margin-bottom: 4rem
margin: 6rem
margin-top: 6rem
margin-right: 6rem
margin-bottom: 6rem
margin-left: 6rem
margin-left: 6rem
margin-right: 6rem
margin-top: 6rem
margin-bottom: 6rem
margin: 8rem
margin-top: 8rem
margin-right: 8rem
margin-bottom: 8rem
margin-left: 8rem
margin-left: 8rem
margin-right: 8rem
margin-top: 8rem
margin-bottom: 8rem
padding: 0
padding-top: 0
padding-right: 0
padding-bottom: 0
padding-left: 0
padding-left: 0
padding-right: 0
padding-top: 0
padding-bottom: 0
padding: .5rem
padding-top: .5rem
padding-right: .5rem
padding-bottom: .5rem
padding-left: .5rem
padding-left: .5rem
padding-right: .5rem
padding-top: .5rem
padding-bottom: .5rem
padding: .75rem
padding-top: .75rem
padding-right: .75rem
padding-bottom: .75rem
padding-left: .75rem
padding-left: .75rem
padding-right: .75rem
padding-top: .75rem
padding-bottom: .75rem
padding: 1rem
padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
padding-left: 1rem
padding-right: 1rem
padding-top: 1rem
padding-bottom: 1rem
padding: 2rem
padding-top: 2rem
padding-right: 2rem
padding-bottom: 2rem
padding-left: 2rem
padding-left: 2rem
padding-right: 2rem
padding-top: 2rem
padding-bottom: 2rem
padding: 4rem
padding-top: 4rem
padding-right: 4rem
padding-bottom: 4rem
padding-left: 4rem
padding-left: 4rem
padding-right: 4rem
padding-top: 4rem
padding-bottom: 4rem
padding: 6rem
padding-top: 6rem
padding-right: 6rem
padding-bottom: 6rem
padding-left: 6rem
padding-left: 6rem
padding-right: 6rem
padding-top: 6rem
padding-bottom: 6rem
padding: 8rem
padding-top: 8rem
padding-right: 8rem
padding-bottom: 8rem
padding-left: 8rem
padding-left: 8rem
padding-right: 8rem
padding-top: 8rem
padding-bottom: 8rem
margin: 0
margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
margin-left: 0
margin-right: 0
margin-top: 0
margin-bottom: 0
margin: .5rem
margin-top: .5rem
margin-right: .5rem
margin-bottom: .5rem
margin-left: .5rem
margin-left: .5rem
margin-right: .5rem
margin-top: .5rem
margin-bottom: .5rem
margin: .75rem
margin-top: .75rem
margin-right: .75rem
margin-bottom: .75rem
margin-left: .75rem
margin-left: .75rem
margin-right: .75rem
margin-top: .75rem
margin-bottom: .75rem
margin: 1rem
margin-top: 1rem
margin-right: 1rem
margin-bottom: 1rem
margin-left: 1rem
margin-left: 1rem
margin-right: 1rem
margin-top: 1rem
margin-bottom: 1rem
margin: 2rem
margin-top: 2rem
margin-right: 2rem
margin-bottom: 2rem
margin-left: 2rem
margin-left: 2rem
margin-right: 2rem
margin-top: 2rem
margin-bottom: 2rem
margin: 4rem
margin-top: 4rem
margin-right: 4rem
margin-bottom: 4rem
margin-left: 4rem
margin-left: 4rem
margin-right: 4rem
margin-top: 4rem
margin-bottom: 4rem
margin: 6rem
margin-top: 6rem
margin-right: 6rem
margin-bottom: 6rem
margin-left: 6rem
margin-left: 6rem
margin-right: 6rem
margin-top: 6rem
margin-bottom: 6rem
margin: 8rem
margin-top: 8rem
margin-right: 8rem
margin-bottom: 8rem
margin-left: 8rem
margin-left: 8rem
margin-right: 8rem
margin-top: 8rem
margin-bottom: 8rem
padding: 0
padding-top: 0
padding-right: 0
padding-bottom: 0
padding-left: 0
padding-left: 0
padding-right: 0
padding-top: 0
padding-bottom: 0
padding: .5rem
padding-top: .5rem
padding-right: .5rem
padding-bottom: .5rem
padding-left: .5rem
padding-left: .5rem
padding-right: .5rem
padding-top: .5rem
padding-bottom: .5rem
padding: .75rem
padding-top: .75rem
padding-right: .75rem
padding-bottom: .75rem
padding-left: .75rem
padding-left: .75rem
padding-right: .75rem
padding-top: .75rem
padding-bottom: .75rem
padding: 1rem
padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
padding-left: 1rem
padding-right: 1rem
padding-top: 1rem
padding-bottom: 1rem
padding: 2rem
padding-top: 2rem
padding-right: 2rem
padding-bottom: 2rem
padding-left: 2rem
padding-left: 2rem
padding-right: 2rem
padding-top: 2rem
padding-bottom: 2rem
padding: 4rem
padding-top: 4rem
padding-right: 4rem
padding-bottom: 4rem
padding-left: 4rem
padding-left: 4rem
padding-right: 4rem
padding-top: 4rem
padding-bottom: 4rem
padding: 6rem
padding-top: 6rem
padding-right: 6rem
padding-bottom: 6rem
padding-left: 6rem
padding-left: 6rem
padding-right: 6rem
padding-top: 6rem
padding-bottom: 6rem
padding: 8rem
padding-top: 8rem
padding-right: 8rem
padding-bottom: 8rem
padding-left: 8rem
padding-left: 8rem
padding-right: 8rem
padding-top: 8rem
padding-bottom: 8rem
max-width: var(--breakpoint-min)
max-width: var(--breakpoint-mobile)
max-width: var(--breakpoint-tablet)
max-width: var(--breakpoint-laptop)
max-width: var(--breakpoint-menu)
max-width: var(--breakpoint-desktop)
max-width: var(--breakpoint-large)
max-width: var(--breakpoint-min)
max-width: var(--breakpoint-mobile)
max-width: var(--breakpoint-tablet)
max-width: var(--breakpoint-laptop)
max-width: var(--breakpoint-menu)
max-width: var(--breakpoint-desktop)
max-width: var(--breakpoint-large)
max-width: var(--breakpoint-min)
max-width: var(--breakpoint-mobile)
max-width: var(--breakpoint-tablet)
max-width: var(--breakpoint-laptop)
max-width: var(--breakpoint-menu)
max-width: var(--breakpoint-desktop)
max-width: var(--breakpoint-large)
max-width: var(--breakpoint-min)
max-width: var(--breakpoint-mobile)
max-width: var(--breakpoint-tablet)
max-width: var(--breakpoint-laptop)
max-width: var(--breakpoint-menu)
max-width: var(--breakpoint-desktop)
max-width: var(--breakpoint-large)
color: var(--color-neutral-50)
color: var(--color-neutral-100)
color: var(--color-neutral-200)
color: var(--color-neutral-300)
color: var(--color-neutral-400)
color: var(--color-neutral-500)
color: var(--color-neutral-600)
color: var(--color-neutral-700)
color: var(--color-neutral-800)
color: var(--color-neutral-900)
color: var(--color-primary-50)
color: var(--color-primary-100)
color: var(--color-primary-200)
color: var(--color-primary-300)
color: var(--color-primary-400)
color: var(--color-primary-500)
color: var(--color-primary-600)
color: var(--color-primary-700)
color: var(--color-primary-800)
color: var(--color-primary-900)
color: var(--color-secondary-50)
color: var(--color-secondary-100)
color: var(--color-secondary-200)
color: var(--color-secondary-300)
color: var(--color-secondary-400)
color: var(--color-secondary-500)
color: var(--color-secondary-600)
color: var(--color-secondary-700)
color: var(--color-secondary-800)
color: var(--color-secondary-900)
color: var(--color-info-50)
color: var(--color-info-100)
color: var(--color-info-200)
color: var(--color-info-300)
color: var(--color-info-400)
color: var(--color-info-500)
color: var(--color-info-600)
color: var(--color-info-700)
color: var(--color-info-800)
color: var(--color-info-900)
color: var(--color-success-50)
color: var(--color-success-100)
color: var(--color-success-200)
color: var(--color-success-300)
color: var(--color-success-400)
color: var(--color-success-500)
color: var(--color-success-600)
color: var(--color-success-700)
color: var(--color-success-800)
color: var(--color-success-900)
color: var(--color-warning-50)
color: var(--color-warning-100)
color: var(--color-warning-200)
color: var(--color-warning-300)
color: var(--color-warning-400)
color: var(--color-warning-500)
color: var(--color-warning-600)
color: var(--color-warning-700)
color: var(--color-warning-800)
color: var(--color-warning-900)
color: var(--color-danger-50)
color: var(--color-danger-100)
color: var(--color-danger-200)
color: var(--color-danger-300)
color: var(--color-danger-400)
color: var(--color-danger-500)
color: var(--color-danger-600)
color: var(--color-danger-700)
color: var(--color-danger-800)
color: var(--color-danger-900)
color: var(--color-red-50)
color: var(--color-red-100)
color: var(--color-red-200)
color: var(--color-red-300)
color: var(--color-red-400)
color: var(--color-red-500)
color: var(--color-red-600)
color: var(--color-red-700)
color: var(--color-red-800)
color: var(--color-red-900)
color: var(--color-orange-50)
color: var(--color-orange-100)
color: var(--color-orange-200)
color: var(--color-orange-300)
color: var(--color-orange-400)
color: var(--color-orange-500)
color: var(--color-orange-600)
color: var(--color-orange-700)
color: var(--color-orange-800)
color: var(--color-orange-900)
color: var(--color-amber-50)
color: var(--color-amber-100)
color: var(--color-amber-200)
color: var(--color-amber-300)
color: var(--color-amber-400)
color: var(--color-amber-500)
color: var(--color-amber-600)
color: var(--color-amber-700)
color: var(--color-amber-800)
color: var(--color-amber-900)
color: var(--color-yellow-50)
color: var(--color-yellow-100)
color: var(--color-yellow-200)
color: var(--color-yellow-300)
color: var(--color-yellow-400)
color: var(--color-yellow-500)
color: var(--color-yellow-600)
color: var(--color-yellow-700)
color: var(--color-yellow-800)
color: var(--color-yellow-900)
color: var(--color-lime-50)
color: var(--color-lime-100)
color: var(--color-lime-200)
color: var(--color-lime-300)
color: var(--color-lime-400)
color: var(--color-lime-500)
color: var(--color-lime-600)
color: var(--color-lime-700)
color: var(--color-lime-800)
color: var(--color-lime-900)
color: var(--color-green-50)
color: var(--color-green-100)
color: var(--color-green-200)
color: var(--color-green-300)
color: var(--color-green-400)
color: var(--color-green-500)
color: var(--color-green-600)
color: var(--color-green-700)
color: var(--color-green-800)
color: var(--color-green-900)
color: var(--color-emerald-50)
color: var(--color-emerald-100)
color: var(--color-emerald-200)
color: var(--color-emerald-300)
color: var(--color-emerald-400)
color: var(--color-emerald-500)
color: var(--color-emerald-600)
color: var(--color-emerald-700)
color: var(--color-emerald-800)
color: var(--color-emerald-900)
color: var(--color-teal-50)
color: var(--color-teal-100)
color: var(--color-teal-200)
color: var(--color-teal-300)
color: var(--color-teal-400)
color: var(--color-teal-500)
color: var(--color-teal-600)
color: var(--color-teal-700)
color: var(--color-teal-800)
color: var(--color-teal-900)
color: var(--color-cyan-50)
color: var(--color-cyan-100)
color: var(--color-cyan-200)
color: var(--color-cyan-300)
color: var(--color-cyan-400)
color: var(--color-cyan-500)
color: var(--color-cyan-600)
color: var(--color-cyan-700)
color: var(--color-cyan-800)
color: var(--color-cyan-900)
color: var(--color-sky-50)
color: var(--color-sky-100)
color: var(--color-sky-200)
color: var(--color-sky-300)
color: var(--color-sky-400)
color: var(--color-sky-500)
color: var(--color-sky-600)
color: var(--color-sky-700)
color: var(--color-sky-800)
color: var(--color-sky-900)
color: var(--color-blue-50)
color: var(--color-blue-100)
color: var(--color-blue-200)
color: var(--color-blue-300)
color: var(--color-blue-400)
color: var(--color-blue-500)
color: var(--color-blue-600)
color: var(--color-blue-700)
color: var(--color-blue-800)
color: var(--color-blue-900)
color: var(--color-indigo-50)
color: var(--color-indigo-100)
color: var(--color-indigo-200)
color: var(--color-indigo-300)
color: var(--color-indigo-400)
color: var(--color-indigo-500)
color: var(--color-indigo-600)
color: var(--color-indigo-700)
color: var(--color-indigo-800)
color: var(--color-indigo-900)
color: var(--color-violet-50)
color: var(--color-violet-100)
color: var(--color-violet-200)
color: var(--color-violet-300)
color: var(--color-violet-400)
color: var(--color-violet-500)
color: var(--color-violet-600)
color: var(--color-violet-700)
color: var(--color-violet-800)
color: var(--color-violet-900)
color: var(--color-purple-50)
color: var(--color-purple-100)
color: var(--color-purple-200)
color: var(--color-purple-300)
color: var(--color-purple-400)
color: var(--color-purple-500)
color: var(--color-purple-600)
color: var(--color-purple-700)
color: var(--color-purple-800)
color: var(--color-purple-900)
color: var(--color-fuchsia-50)
color: var(--color-fuchsia-100)
color: var(--color-fuchsia-200)
color: var(--color-fuchsia-300)
color: var(--color-fuchsia-400)
color: var(--color-fuchsia-500)
color: var(--color-fuchsia-600)
color: var(--color-fuchsia-700)
color: var(--color-fuchsia-800)
color: var(--color-fuchsia-900)
color: var(--color-pink-50)
color: var(--color-pink-100)
color: var(--color-pink-200)
color: var(--color-pink-300)
color: var(--color-pink-400)
color: var(--color-pink-500)
color: var(--color-pink-600)
color: var(--color-pink-700)
color: var(--color-pink-800)
color: var(--color-pink-900)
color: var(--color-rose-50)
color: var(--color-rose-100)
color: var(--color-rose-200)
color: var(--color-rose-300)
color: var(--color-rose-400)
color: var(--color-rose-500)
color: var(--color-rose-600)
color: var(--color-rose-700)
color: var(--color-rose-800)
color: var(--color-rose-900)
background-color: var(--color-neutral-50)
background-color: var(--color-neutral-100)
background-color: var(--color-neutral-200)
background-color: var(--color-neutral-300)
background-color: var(--color-neutral-400)
background-color: var(--color-neutral-500)
background-color: var(--color-neutral-600)
background-color: var(--color-neutral-700)
background-color: var(--color-neutral-800)
background-color: var(--color-neutral-900)
background-color: var(--color-primary-50)
background-color: var(--color-primary-100)
background-color: var(--color-primary-200)
background-color: var(--color-primary-300)
background-color: var(--color-primary-400)
background-color: var(--color-primary-500)
background-color: var(--color-primary-600)
background-color: var(--color-primary-700)
background-color: var(--color-primary-800)
background-color: var(--color-primary-900)
background-color: var(--color-secondary-50)
background-color: var(--color-secondary-100)
background-color: var(--color-secondary-200)
background-color: var(--color-secondary-300)
background-color: var(--color-secondary-400)
background-color: var(--color-secondary-500)
background-color: var(--color-secondary-600)
background-color: var(--color-secondary-700)
background-color: var(--color-secondary-800)
background-color: var(--color-secondary-900)
background-color: var(--color-info-50)
background-color: var(--color-info-100)
background-color: var(--color-info-200)
background-color: var(--color-info-300)
background-color: var(--color-info-400)
background-color: var(--color-info-500)
background-color: var(--color-info-600)
background-color: var(--color-info-700)
background-color: var(--color-info-800)
background-color: var(--color-info-900)
background-color: var(--color-success-50)
background-color: var(--color-success-100)
background-color: var(--color-success-200)
background-color: var(--color-success-300)
background-color: var(--color-success-400)
background-color: var(--color-success-500)
background-color: var(--color-success-600)
background-color: var(--color-success-700)
background-color: var(--color-success-800)
background-color: var(--color-success-900)
background-color: var(--color-warning-50)
background-color: var(--color-warning-100)
background-color: var(--color-warning-200)
background-color: var(--color-warning-300)
background-color: var(--color-warning-400)
background-color: var(--color-warning-500)
background-color: var(--color-warning-600)
background-color: var(--color-warning-700)
background-color: var(--color-warning-800)
background-color: var(--color-warning-900)
background-color: var(--color-danger-50)
background-color: var(--color-danger-100)
background-color: var(--color-danger-200)
background-color: var(--color-danger-300)
background-color: var(--color-danger-400)
background-color: var(--color-danger-500)
background-color: var(--color-danger-600)
background-color: var(--color-danger-700)
background-color: var(--color-danger-800)
background-color: var(--color-danger-900)
background-color: var(--color-red-50)
background-color: var(--color-red-100)
background-color: var(--color-red-200)
background-color: var(--color-red-300)
background-color: var(--color-red-400)
background-color: var(--color-red-500)
background-color: var(--color-red-600)
background-color: var(--color-red-700)
background-color: var(--color-red-800)
background-color: var(--color-red-900)
background-color: var(--color-orange-50)
background-color: var(--color-orange-100)
background-color: var(--color-orange-200)
background-color: var(--color-orange-300)
background-color: var(--color-orange-400)
background-color: var(--color-orange-500)
background-color: var(--color-orange-600)
background-color: var(--color-orange-700)
background-color: var(--color-orange-800)
background-color: var(--color-orange-900)
background-color: var(--color-amber-50)
background-color: var(--color-amber-100)
background-color: var(--color-amber-200)
background-color: var(--color-amber-300)
background-color: var(--color-amber-400)
background-color: var(--color-amber-500)
background-color: var(--color-amber-600)
background-color: var(--color-amber-700)
background-color: var(--color-amber-800)
background-color: var(--color-amber-900)
background-color: var(--color-yellow-50)
background-color: var(--color-yellow-100)
background-color: var(--color-yellow-200)
background-color: var(--color-yellow-300)
background-color: var(--color-yellow-400)
background-color: var(--color-yellow-500)
background-color: var(--color-yellow-600)
background-color: var(--color-yellow-700)
background-color: var(--color-yellow-800)
background-color: var(--color-yellow-900)
background-color: var(--color-lime-50)
background-color: var(--color-lime-100)
background-color: var(--color-lime-200)
background-color: var(--color-lime-300)
background-color: var(--color-lime-400)
background-color: var(--color-lime-500)
background-color: var(--color-lime-600)
background-color: var(--color-lime-700)
background-color: var(--color-lime-800)
background-color: var(--color-lime-900)
background-color: var(--color-green-50)
background-color: var(--color-green-100)
background-color: var(--color-green-200)
background-color: var(--color-green-300)
background-color: var(--color-green-400)
background-color: var(--color-green-500)
background-color: var(--color-green-600)
background-color: var(--color-green-700)
background-color: var(--color-green-800)
background-color: var(--color-green-900)
background-color: var(--color-emerald-50)
background-color: var(--color-emerald-100)
background-color: var(--color-emerald-200)
background-color: var(--color-emerald-300)
background-color: var(--color-emerald-400)
background-color: var(--color-emerald-500)
background-color: var(--color-emerald-600)
background-color: var(--color-emerald-700)
background-color: var(--color-emerald-800)
background-color: var(--color-emerald-900)
background-color: var(--color-teal-50)
background-color: var(--color-teal-100)
background-color: var(--color-teal-200)
background-color: var(--color-teal-300)
background-color: var(--color-teal-400)
background-color: var(--color-teal-500)
background-color: var(--color-teal-600)
background-color: var(--color-teal-700)
background-color: var(--color-teal-800)
background-color: var(--color-teal-900)
background-color: var(--color-cyan-50)
background-color: var(--color-cyan-100)
background-color: var(--color-cyan-200)
background-color: var(--color-cyan-300)
background-color: var(--color-cyan-400)
background-color: var(--color-cyan-500)
background-color: var(--color-cyan-600)
background-color: var(--color-cyan-700)
background-color: var(--color-cyan-800)
background-color: var(--color-cyan-900)
background-color: var(--color-sky-50)
background-color: var(--color-sky-100)
background-color: var(--color-sky-200)
background-color: var(--color-sky-300)
background-color: var(--color-sky-400)
background-color: var(--color-sky-500)
background-color: var(--color-sky-600)
background-color: var(--color-sky-700)
background-color: var(--color-sky-800)
background-color: var(--color-sky-900)
background-color: var(--color-blue-50)
background-color: var(--color-blue-100)
background-color: var(--color-blue-200)
background-color: var(--color-blue-300)
background-color: var(--color-blue-400)
background-color: var(--color-blue-500)
background-color: var(--color-blue-600)
background-color: var(--color-blue-700)
background-color: var(--color-blue-800)
background-color: var(--color-blue-900)
background-color: var(--color-indigo-50)
background-color: var(--color-indigo-100)
background-color: var(--color-indigo-200)
background-color: var(--color-indigo-300)
background-color: var(--color-indigo-400)
background-color: var(--color-indigo-500)
background-color: var(--color-indigo-600)
background-color: var(--color-indigo-700)
background-color: var(--color-indigo-800)
background-color: var(--color-indigo-900)
background-color: var(--color-violet-50)
background-color: var(--color-violet-100)
background-color: var(--color-violet-200)
background-color: var(--color-violet-300)
background-color: var(--color-violet-400)
background-color: var(--color-violet-500)
background-color: var(--color-violet-600)
background-color: var(--color-violet-700)
background-color: var(--color-violet-800)
background-color: var(--color-violet-900)
background-color: var(--color-purple-50)
background-color: var(--color-purple-100)
background-color: var(--color-purple-200)
background-color: var(--color-purple-300)
background-color: var(--color-purple-400)
background-color: var(--color-purple-500)
background-color: var(--color-purple-600)
background-color: var(--color-purple-700)
background-color: var(--color-purple-800)
background-color: var(--color-purple-900)
background-color: var(--color-fuchsia-50)
background-color: var(--color-fuchsia-100)
background-color: var(--color-fuchsia-200)
background-color: var(--color-fuchsia-300)
background-color: var(--color-fuchsia-400)
background-color: var(--color-fuchsia-500)
background-color: var(--color-fuchsia-600)
background-color: var(--color-fuchsia-700)
background-color: var(--color-fuchsia-800)
background-color: var(--color-fuchsia-900)
background-color: var(--color-pink-50)
background-color: var(--color-pink-100)
background-color: var(--color-pink-200)
background-color: var(--color-pink-300)
background-color: var(--color-pink-400)
background-color: var(--color-pink-500)
background-color: var(--color-pink-600)
background-color: var(--color-pink-700)
background-color: var(--color-pink-800)
background-color: var(--color-pink-900)
background-color: var(--color-rose-50)
background-color: var(--color-rose-100)
background-color: var(--color-rose-200)
background-color: var(--color-rose-300)
background-color: var(--color-rose-400)
background-color: var(--color-rose-500)
background-color: var(--color-rose-600)
background-color: var(--color-rose-700)
background-color: var(--color-rose-800)
background-color: var(--color-rose-900)
border-radius: var(--radius-none)
border-radius: var(--radius-xxs)
border-radius: var(--radius-xs)
border-radius: var(--radius-sm)
border-radius: var(--radius-md)
border-radius: var(--radius-lg)
border-radius: var(--radius-xl)
border-radius: var(--radius-xxl)
border-radius: var(--radius-full)
border-radius: var(--radius-none)
border-radius: var(--radius-xxs)
border-radius: var(--radius-xs)
border-radius: var(--radius-sm)
border-radius: var(--radius-md)
border-radius: var(--radius-lg)
border-radius: var(--radius-xl)
border-radius: var(--radius-xxl)
border-radius: var(--radius-full)
border-radius: var(--radius-none)
border-radius: var(--radius-xxs)
border-radius: var(--radius-xs)
border-radius: var(--radius-sm)
border-radius: var(--radius-md)
border-radius: var(--radius-lg)
border-radius: var(--radius-xl)
border-radius: var(--radius-xxl)
border-radius: var(--radius-full)
border-radius: var(--radius-none)
border-radius: var(--radius-xxs)
border-radius: var(--radius-xs)
border-radius: var(--radius-sm)
border-radius: var(--radius-md)
border-radius: var(--radius-lg)
border-radius: var(--radius-xl)
border-radius: var(--radius-xxl)
border-radius: var(--radius-full)
font-size: var(--font-size-1)
font-size: var(--font-size-2)
font-size: var(--font-size-3)
font-size: var(--font-size-4)
font-size: var(--font-size-5)
font-size: var(--font-size-6)
font-size: var(--font-size-7)
font-size: var(--font-size-8)
font-size: var(--font-size-9)
font-size: var(--font-size-10)
font-size: var(--font-size-11)
font-size: var(--font-size-12)
line-height: var(--line-height-1)
line-height: var(--line-height-2)
line-height: var(--line-height-3)
line-height: var(--line-height-4)
line-height: var(--line-height-5)
line-height: var(--line-height-6)
line-height: var(--line-height-7)
line-height: var(--line-height-8)
line-height: var(--line-height-9)
line-height: var(--line-height-10)
line-height: var(--line-height-11)
line-height: var(--line-height-12)
font-size: var(--display-1-size)
font-size: var(--display-2-size)
font-size: var(--display-3-size)
font-size: var(--display-1-size)
font-size: var(--display-2-size)
font-size: var(--display-3-size)
font-size: var(--display-1-size)
font-size: var(--display-2-size)
font-size: var(--display-3-size)
font-size: var(--display-1-size)
font-size: var(--display-2-size)
font-size: var(--display-3-size)
text-align: left
text-align: center
text-align: right
text-align: left
text-align: center
text-align: right
text-align: left
text-align: center
text-align: right
text-align: left
text-align: center
text-align: right
text-transform: lowercase
text-transform: uppercase
text-transform: capitalize
text-transform: none
text-transform: lowercase
text-transform: uppercase
text-transform: capitalize
text-transform: none
text-transform: lowercase
text-transform: uppercase
text-transform: capitalize
text-transform: none
text-transform: lowercase
text-transform: uppercase
text-transform: capitalize
text-transform: none
font-weight: var(--weight-light)
font-weight: var(--weight-normal)
font-weight: var(--weight-medium)
font-weight: var(--weight-semibold)
font-weight: var(--weight-bold)
font-weight: var(--weight-light)
font-weight: var(--weight-normal)
font-weight: var(--weight-medium)
font-weight: var(--weight-semibold)
font-weight: var(--weight-bold)
font-weight: var(--weight-light)
font-weight: var(--weight-normal)
font-weight: var(--weight-medium)
font-weight: var(--weight-semibold)
font-weight: var(--weight-bold)
font-weight: var(--weight-light)
font-weight: var(--weight-normal)
font-weight: var(--weight-medium)
font-weight: var(--weight-semibold)
font-weight: var(--weight-bold)
box-shadow: var(--shadow-none)
box-shadow: var(--shadow-xs)
box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
box-shadow: var(--shadow-xl)
box-shadow: var(--shadow-xxl)
box-shadow: var(--shadow-none)
box-shadow: var(--shadow-xs)
box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
box-shadow: var(--shadow-xl)
box-shadow: var(--shadow-xxl)
box-shadow: var(--shadow-none)
box-shadow: var(--shadow-xs)
box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
box-shadow: var(--shadow-xl)
box-shadow: var(--shadow-xxl)
box-shadow: var(--shadow-none)
box-shadow: var(--shadow-xs)
box-shadow: var(--shadow-sm)
box-shadow: var(--shadow-md)
box-shadow: var(--shadow-lg)
box-shadow: var(--shadow-xl)
box-shadow: var(--shadow-xxl)
flex: 1 1 0%
flex: 1 1 auto
flex: 0 1 auto
flex: 0 0 100%
flex-wrap: wrap
flex-wrap: nowrap
flex-wrap: wrap-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
flex: 1 1 0%
flex: 1 1 auto
flex: 0 1 auto
flex: 0 0 100%
flex: 1 1 0%
flex: 1 1 auto
flex: 0 1 auto
flex: 0 0 100%
flex: 1 1 0%
flex: 1 1 auto
flex: 0 1 auto
flex: 0 0 100%
flex-wrap: wrap
flex-wrap: nowrap
flex-wrap: wrap-reverse
flex-wrap: wrap
flex-wrap: nowrap
flex-wrap: wrap-reverse
flex-wrap: wrap
flex-wrap: nowrap
flex-wrap: wrap-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
display: flex
display: grid
display: block
display: inline
display: inline-flex
display: inline-grid
display: inline-block
display: none
display: flex
display: grid
display: block
display: inline
display: inline-flex
display: inline-grid
display: inline-block
display: none
display: flex
display: grid
display: block
display: inline
display: inline-flex
display: inline-grid
display: inline-block
display: none
display: flex
display: grid
display: block
display: inline
display: inline-flex
display: inline-grid
display: inline-block
display: none
position: sticky
position: fixed
position: absolute
position: relative
position: sticky
position: fixed
position: absolute
position: relative
position: sticky
position: fixed
position: absolute
position: relative
position: sticky
position: fixed
position: absolute
position: relative

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

3388 total, 1836 unique declarations. Reusability index: 45%.

Color

7% reusability index

Background Color

2% reusability index

Font Size

29% reusability index

Font Family

16% reusability index

Border radius

58% reusability index

Z-index

0% reusability index

278 Unique Colors

Aa

inherit
Aa

transparent
Aa

#fff
Aa

var(--color-contrast-100)
Aa

var(--color-primary-100)
Aa

var(--color-contrast)
Aa

var(--color-contrast-60)
Aa

var(--color-neutral-50)
Aa

var(--color-neutral-100)
Aa

var(--color-neutral-200)
Aa

var(--color-neutral-300)
Aa

var(--color-neutral-400)
Aa

var(--color-neutral-500)
Aa

var(--color-neutral-600)
Aa

var(--color-neutral-700)
Aa

var(--color-neutral-800)
Aa

var(--color-neutral-900)
Aa

var(--color-primary-50)
Aa

var(--color-primary-200)
Aa

var(--color-primary-300)
Aa

var(--color-primary-400)
Aa

var(--color-primary-500)
Aa

var(--color-primary-600)
Aa

var(--color-primary-700)
Aa

var(--color-primary-800)
Aa

var(--color-primary-900)
Aa

var(--color-secondary-50)
Aa

var(--color-secondary-100)
Aa

var(--color-secondary-200)
Aa

var(--color-secondary-300)
Aa

var(--color-secondary-400)
Aa

var(--color-secondary-500)
Aa

var(--color-secondary-600)
Aa

var(--color-secondary-700)
Aa

var(--color-secondary-800)
Aa

var(--color-secondary-900)
Aa

var(--color-info-50)
Aa

var(--color-info-100)
Aa

var(--color-info-200)
Aa

var(--color-info-300)
Aa

var(--color-info-400)
Aa

var(--color-info-500)
Aa

var(--color-info-600)
Aa

var(--color-info-700)
Aa

var(--color-info-800)
Aa

var(--color-info-900)
Aa

var(--color-success-50)
Aa

var(--color-success-100)
Aa

var(--color-success-200)
Aa

var(--color-success-300)
Aa

var(--color-success-400)
Aa

var(--color-success-500)
Aa

var(--color-success-600)
Aa

var(--color-success-700)
Aa

var(--color-success-800)
Aa

var(--color-success-900)
Aa

var(--color-warning-50)
Aa

var(--color-warning-100)
Aa

var(--color-warning-200)
Aa

var(--color-warning-300)
Aa

var(--color-warning-400)
Aa

var(--color-warning-500)
Aa

var(--color-warning-600)
Aa

var(--color-warning-700)
Aa

var(--color-warning-800)
Aa

var(--color-warning-900)
Aa

var(--color-danger-50)
Aa

var(--color-danger-100)
Aa

var(--color-danger-200)
Aa

var(--color-danger-300)
Aa

var(--color-danger-400)
Aa

var(--color-danger-500)
Aa

var(--color-danger-600)
Aa

var(--color-danger-700)
Aa

var(--color-danger-800)
Aa

var(--color-danger-900)
Aa

var(--color-red-50)
Aa

var(--color-red-100)
Aa

var(--color-red-200)
Aa

var(--color-red-300)
Aa

var(--color-red-400)
Aa

var(--color-red-500)
Aa

var(--color-red-600)
Aa

var(--color-red-700)
Aa

var(--color-red-800)
Aa

var(--color-red-900)
Aa

var(--color-orange-50)
Aa

var(--color-orange-100)
Aa

var(--color-orange-200)
Aa

var(--color-orange-300)
Aa

var(--color-orange-400)
Aa

var(--color-orange-500)
Aa

var(--color-orange-600)
Aa

var(--color-orange-700)
Aa

var(--color-orange-800)
Aa

var(--color-orange-900)
Aa

var(--color-amber-50)
Aa

var(--color-amber-100)
Aa

var(--color-amber-200)
Aa

var(--color-amber-300)
Aa

var(--color-amber-400)
Aa

var(--color-amber-500)
Aa

var(--color-amber-600)
Aa

var(--color-amber-700)
Aa

var(--color-amber-800)
Aa

var(--color-amber-900)
Aa

var(--color-yellow-50)
Aa

var(--color-yellow-100)
Aa

var(--color-yellow-200)
Aa

var(--color-yellow-300)
Aa

var(--color-yellow-400)
Aa

var(--color-yellow-500)
Aa

var(--color-yellow-600)
Aa

var(--color-yellow-700)
Aa

var(--color-yellow-800)
Aa

var(--color-yellow-900)
Aa

var(--color-lime-50)
Aa

var(--color-lime-100)
Aa

var(--color-lime-200)
Aa

var(--color-lime-300)
Aa

var(--color-lime-400)
Aa

var(--color-lime-500)
Aa

var(--color-lime-600)
Aa

var(--color-lime-700)
Aa

var(--color-lime-800)
Aa

var(--color-lime-900)
Aa

var(--color-green-50)
Aa

var(--color-green-100)
Aa

var(--color-green-200)
Aa

var(--color-green-300)
Aa

var(--color-green-400)
Aa

var(--color-green-500)
Aa

var(--color-green-600)
Aa

var(--color-green-700)
Aa

var(--color-green-800)
Aa

var(--color-green-900)
Aa

var(--color-emerald-50)
Aa

var(--color-emerald-100)
Aa

var(--color-emerald-200)
Aa

var(--color-emerald-300)
Aa

var(--color-emerald-400)
Aa

var(--color-emerald-500)
Aa

var(--color-emerald-600)
Aa

var(--color-emerald-700)
Aa

var(--color-emerald-800)
Aa

var(--color-emerald-900)
Aa

var(--color-teal-50)
Aa

var(--color-teal-100)
Aa

var(--color-teal-200)
Aa

var(--color-teal-300)
Aa

var(--color-teal-400)
Aa

var(--color-teal-500)
Aa

var(--color-teal-600)
Aa

var(--color-teal-700)
Aa

var(--color-teal-800)
Aa

var(--color-teal-900)
Aa

var(--color-cyan-50)
Aa

var(--color-cyan-100)
Aa

var(--color-cyan-200)
Aa

var(--color-cyan-300)
Aa

var(--color-cyan-400)
Aa

var(--color-cyan-500)
Aa

var(--color-cyan-600)
Aa

var(--color-cyan-700)
Aa

var(--color-cyan-800)
Aa

var(--color-cyan-900)
Aa

var(--color-sky-50)
Aa

var(--color-sky-100)
Aa

var(--color-sky-200)
Aa

var(--color-sky-300)
Aa

var(--color-sky-400)
Aa

var(--color-sky-500)
Aa

var(--color-sky-600)
Aa

var(--color-sky-700)
Aa

var(--color-sky-800)
Aa

var(--color-sky-900)
Aa

var(--color-blue-50)
Aa

var(--color-blue-100)
Aa

var(--color-blue-200)
Aa

var(--color-blue-300)
Aa

var(--color-blue-400)
Aa

var(--color-blue-500)
Aa

var(--color-blue-600)
Aa

var(--color-blue-700)
Aa

var(--color-blue-800)
Aa

var(--color-blue-900)
Aa

var(--color-indigo-50)
Aa

var(--color-indigo-100)
Aa

var(--color-indigo-200)
Aa

var(--color-indigo-300)
Aa

var(--color-indigo-400)
Aa

var(--color-indigo-500)
Aa

var(--color-indigo-600)
Aa

var(--color-indigo-700)
Aa

var(--color-indigo-800)
Aa

var(--color-indigo-900)
Aa

var(--color-violet-50)
Aa

var(--color-violet-100)
Aa

var(--color-violet-200)
Aa

var(--color-violet-300)
Aa

var(--color-violet-400)
Aa

var(--color-violet-500)
Aa

var(--color-violet-600)
Aa

var(--color-violet-700)
Aa

var(--color-violet-800)
Aa

var(--color-violet-900)
Aa

var(--color-purple-50)
Aa

var(--color-purple-100)
Aa

var(--color-purple-200)
Aa

var(--color-purple-300)
Aa

var(--color-purple-400)
Aa

var(--color-purple-500)
Aa

var(--color-purple-600)
Aa

var(--color-purple-700)
Aa

var(--color-purple-800)
Aa

var(--color-purple-900)
Aa

var(--color-fuchsia-50)
Aa

var(--color-fuchsia-100)
Aa

var(--color-fuchsia-200)
Aa

var(--color-fuchsia-300)
Aa

var(--color-fuchsia-400)
Aa

var(--color-fuchsia-500)
Aa

var(--color-fuchsia-600)
Aa

var(--color-fuchsia-700)
Aa

var(--color-fuchsia-800)
Aa

var(--color-fuchsia-900)
Aa

var(--color-pink-50)
Aa

var(--color-pink-100)
Aa

var(--color-pink-200)
Aa

var(--color-pink-300)
Aa

var(--color-pink-400)
Aa

var(--color-pink-500)
Aa

var(--color-pink-600)
Aa

var(--color-pink-700)
Aa

var(--color-pink-800)
Aa

var(--color-pink-900)
Aa

var(--color-rose-50)
Aa

var(--color-rose-100)
Aa

var(--color-rose-200)
Aa

var(--color-rose-300)
Aa

var(--color-rose-400)
Aa

var(--color-rose-500)
Aa

var(--color-rose-600)
Aa

var(--color-rose-700)
Aa

var(--color-rose-800)
Aa

var(--color-rose-900)
Aa

var(--color-contrast--medium)
Aa

var(--color-white)
Aa

var(--badge-color)
Aa

var(--button-color)
Aa

var(--button-primary-color)
Aa

var(--button-secondary-color)
Aa

var(--button-info-color)
Aa

var(--button-success-color)
Aa

var(--button-warning-color)
Aa

var(--button-danger-color)
Aa

var(--table-header-text-color)
Aa

var(--table-footer-text-color)
Aa

var(--table-body-text-color)
Aa

var(--heading-caption-color)
Aa

var(--slideshow-arrow-color)
Aa

var(--slideshow-arrow-background)
Aa

var(--color-primary--20)
Aa

var(--tabs-color)
Aa

var(--tabs-active-color)
Aa

var(--input-icon-color)
Aa

var(--input-hover-color)
Aa

var(--input-icon-active-color)
Aa

var(--input-color)
Aa

var(--input-focus-color)
Aa

var(--input-disabled-color)
Aa

var(--input-placeholder-color)
Aa

var(--label-color)
Aa

var(--switch--off-icon-color)
Aa

var(--switch--on-icon-color)
Aa

var(--input-arrow-color)
Aa

var(--help-text-success-color)
Aa

var(--help-text-error-color)

292 Unique Background Colors

transparent
rgba(0,0,0,.5)
#fff
var(--color-neutral-50)
var(--color-neutral-100)
var(--color-neutral-200)
var(--color-neutral-300)
var(--color-neutral-400)
var(--color-neutral-500)
var(--color-neutral-600)
var(--color-neutral-700)
var(--color-neutral-800)
var(--color-neutral-900)
var(--color-primary-50)
var(--color-primary-100)
var(--color-primary-200)
var(--color-primary-300)
var(--color-primary-400)
var(--color-primary-500)
var(--color-primary-600)
var(--color-primary-700)
var(--color-primary-800)
var(--color-primary-900)
var(--color-secondary-50)
var(--color-secondary-100)
var(--color-secondary-200)
var(--color-secondary-300)
var(--color-secondary-400)
var(--color-secondary-500)
var(--color-secondary-600)
var(--color-secondary-700)
var(--color-secondary-800)
var(--color-secondary-900)
var(--color-info-50)
var(--color-info-100)
var(--color-info-200)
var(--color-info-300)
var(--color-info-400)
var(--color-info-500)
var(--color-info-600)
var(--color-info-700)
var(--color-info-800)
var(--color-info-900)
var(--color-success-50)
var(--color-success-100)
var(--color-success-200)
var(--color-success-300)
var(--color-success-400)
var(--color-success-500)
var(--color-success-600)
var(--color-success-700)
var(--color-success-800)
var(--color-success-900)
var(--color-warning-50)
var(--color-warning-100)
var(--color-warning-200)
var(--color-warning-300)
var(--color-warning-400)
var(--color-warning-500)
var(--color-warning-600)
var(--color-warning-700)
var(--color-warning-800)
var(--color-warning-900)
var(--color-danger-50)
var(--color-danger-100)
var(--color-danger-200)
var(--color-danger-300)
var(--color-danger-400)
var(--color-danger-500)
var(--color-danger-600)
var(--color-danger-700)
var(--color-danger-800)
var(--color-danger-900)
var(--color-red-50)
var(--color-red-100)
var(--color-red-200)
var(--color-red-300)
var(--color-red-400)
var(--color-red-500)
var(--color-red-600)
var(--color-red-700)
var(--color-red-800)
var(--color-red-900)
var(--color-orange-50)
var(--color-orange-100)
var(--color-orange-200)
var(--color-orange-300)
var(--color-orange-400)
var(--color-orange-500)
var(--color-orange-600)
var(--color-orange-700)
var(--color-orange-800)
var(--color-orange-900)
var(--color-amber-50)
var(--color-amber-100)
var(--color-amber-200)
var(--color-amber-300)
var(--color-amber-400)
var(--color-amber-500)
var(--color-amber-600)
var(--color-amber-700)
var(--color-amber-800)
var(--color-amber-900)
var(--color-yellow-50)
var(--color-yellow-100)
var(--color-yellow-200)
var(--color-yellow-300)
var(--color-yellow-400)
var(--color-yellow-500)
var(--color-yellow-600)
var(--color-yellow-700)
var(--color-yellow-800)
var(--color-yellow-900)
var(--color-lime-50)
var(--color-lime-100)
var(--color-lime-200)
var(--color-lime-300)
var(--color-lime-400)
var(--color-lime-500)
var(--color-lime-600)
var(--color-lime-700)
var(--color-lime-800)
var(--color-lime-900)
var(--color-green-50)
var(--color-green-100)
var(--color-green-200)
var(--color-green-300)
var(--color-green-400)
var(--color-green-500)
var(--color-green-600)
var(--color-green-700)
var(--color-green-800)
var(--color-green-900)
var(--color-emerald-50)
var(--color-emerald-100)
var(--color-emerald-200)
var(--color-emerald-300)
var(--color-emerald-400)
var(--color-emerald-500)
var(--color-emerald-600)
var(--color-emerald-700)
var(--color-emerald-800)
var(--color-emerald-900)
var(--color-teal-50)
var(--color-teal-100)
var(--color-teal-200)
var(--color-teal-300)
var(--color-teal-400)
var(--color-teal-500)
var(--color-teal-600)
var(--color-teal-700)
var(--color-teal-800)
var(--color-teal-900)
var(--color-cyan-50)
var(--color-cyan-100)
var(--color-cyan-200)
var(--color-cyan-300)
var(--color-cyan-400)
var(--color-cyan-500)
var(--color-cyan-600)
var(--color-cyan-700)
var(--color-cyan-800)
var(--color-cyan-900)
var(--color-sky-50)
var(--color-sky-100)
var(--color-sky-200)
var(--color-sky-300)
var(--color-sky-400)
var(--color-sky-500)
var(--color-sky-600)
var(--color-sky-700)
var(--color-sky-800)
var(--color-sky-900)
var(--color-blue-50)
var(--color-blue-100)
var(--color-blue-200)
var(--color-blue-300)
var(--color-blue-400)
var(--color-blue-500)
var(--color-blue-600)
var(--color-blue-700)
var(--color-blue-800)
var(--color-blue-900)
var(--color-indigo-50)
var(--color-indigo-100)
var(--color-indigo-200)
var(--color-indigo-300)
var(--color-indigo-400)
var(--color-indigo-500)
var(--color-indigo-600)
var(--color-indigo-700)
var(--color-indigo-800)
var(--color-indigo-900)
var(--color-violet-50)
var(--color-violet-100)
var(--color-violet-200)
var(--color-violet-300)
var(--color-violet-400)
var(--color-violet-500)
var(--color-violet-600)
var(--color-violet-700)
var(--color-violet-800)
var(--color-violet-900)
var(--color-purple-50)
var(--color-purple-100)
var(--color-purple-200)
var(--color-purple-300)
var(--color-purple-400)
var(--color-purple-500)
var(--color-purple-600)
var(--color-purple-700)
var(--color-purple-800)
var(--color-purple-900)
var(--color-fuchsia-50)
var(--color-fuchsia-100)
var(--color-fuchsia-200)
var(--color-fuchsia-300)
var(--color-fuchsia-400)
var(--color-fuchsia-500)
var(--color-fuchsia-600)
var(--color-fuchsia-700)
var(--color-fuchsia-800)
var(--color-fuchsia-900)
var(--color-pink-50)
var(--color-pink-100)
var(--color-pink-200)
var(--color-pink-300)
var(--color-pink-400)
var(--color-pink-500)
var(--color-pink-600)
var(--color-pink-700)
var(--color-pink-800)
var(--color-pink-900)
var(--color-rose-50)
var(--color-rose-100)
var(--color-rose-200)
var(--color-rose-300)
var(--color-rose-400)
var(--color-rose-500)
var(--color-rose-600)
var(--color-rose-700)
var(--color-rose-800)
var(--color-rose-900)
var(--color-theme--background)
var(--color-primary--80, #3A424B)
var(--badge-background)
var(--button-color)
var(--button-hover-color)
var(--button-primary-color)
var(--button-hover-primary-color)
var(--button-secondary-color)
var(--button-hover-secondary-color)
var(--button-info-color)
var(--button-hover-info-color)
var(--button-success-color)
var(--button-hover-success-color)
var(--button-warning-color)
var(--button-hover-warning-color)
var(--button-danger-color)
var(--button-hover-danger-color)
var(--button-background-color)
var(--button-hover-background-color)
var(--button-primary-background-color)
var(--button-hover-primary-background-color)
var(--button-secondary-background-color)
var(--button-hover-secondary-background-color)
var(--button-info-background-color)
var(--button-hover-info-background-color)
var(--button-success-background-color)
var(--button-hover-success-background-color)
var(--button-warning-background-color)
var(--button-hover-warning-background-color)
var(--button-danger-background-color)
var(--button-hover-danger-background-color)
var(--table-background)
var(--table-row-odd-background)
var(--table-row-even-background)
var(--table-header-background)
var(--table-footer-background)
var(--table-body-background)
var(--table-hover-background)
var(--slideshow-arrow-background)
var(--slideshow-arrow-color)
var(--color-primary--05)
var(--color-contrast--lower)
var(--color-contrast--high)
var(--input-background-color)
var(--input-disabled-background-color)
var(--switch--off-background)
var(--switch-marker--off-background)
var(--switch--on-background)
var(--switch-marker--on-background)

61 Unique Font Sizes

Abc

100%
Abc

inherit
Abc

0px
Abc

calc(var(--switch-height)/1.8)
Abc

var(--base-font-size, 1rem)
Abc

var(--button-font-size)
Abc

var(--button-icon-size)
Abc

var(--button-lg-font-size)
Abc

var(--button-lg-icon-size)
Abc

var(--button-md-font-size)
Abc

var(--button-md-icon-size)
Abc

var(--button-sm-font-size)
Abc

var(--button-sm-icon-size)
Abc

var(--button-xs-font-size)
Abc

var(--button-xs-icon-size)
Abc

var(--display-1-size)
Abc

var(--display-2-size)
Abc

var(--display-3-size)
Abc

var(--font-size-1)
Abc

var(--font-size-10)
Abc

var(--font-size-11)
Abc

var(--font-size-12)
Abc

var(--font-size-2)
Abc

var(--font-size-3)
Abc

var(--font-size-4)
Abc

var(--font-size-5)
Abc

var(--font-size-6)
Abc

var(--font-size-7)
Abc

var(--font-size-8)
Abc

var(--font-size-9)
Abc

var(--font-size-base)
Abc

var(--h1)
Abc

var(--h2)
Abc

var(--h3)
Abc

var(--h4)
Abc

var(--h5)
Abc

var(--h6)
Abc

var(--heading-caption-size)
Abc

var(--heading-subtitle-size)
Abc

var(--help-text-size)
Abc

var(--icons-font-size)
Abc

var(--input-font-size)
Abc

var(--input-large-font-size)
Abc

var(--input-small-font-size)
Abc

var(--label-floating-font-size)
Abc

var(--table-font-size)
Abc

var(--tabs-font-size)
Abc

var(--tabs-lg-font-size)
Abc

var(--tabs-md-font-size)
Abc

var(--tabs-sm-font-size)
Abc

var(--tabs-xs-font-size)
Abc

var(--text-lg, 1.5rem)
Abc

var(--text-md)
Abc

var(--text-md, 1.125rem)
Abc

var(--text-sm)
Abc

var(--text-sm, 875rem)
Abc

var(--text-xl, 2.25rem)
Abc

var(--text-xs)
Abc

var(--text-xs, 0.75rem)
Abc

var(--text-xxl)
Abc

var(--text-xxl, 3rem)

5 Unique Font Families

Aa

var(--font-family-primary)
Aa

inherit
Aa

var(--font-family-code)
Aa

var(--font-awesome--brands)
Aa

var(--font-awesome)

23 Unique Border Radii

var(--radius-none)
var(--radius-xxs)
var(--radius-xs)
var(--radius-sm)
var(--radius-md)
var(--radius-lg)
var(--radius-xl)
var(--radius-xxl)
var(--radius-full)
var(--box-radius)
var(--button-radius)
var(--button-xs-radius)
var(--button-sm-radius)
var(--button-md-radius)
var(--button-lg-radius)
var(--radius-full, 9999px)
2px
var(--slideshow-border-radius)
var(--slideshow-arrow-border-radius)
var(--slideshow-controls-border-radius)
var(--input-border-radius)
var(--switch-radius)
var(--switch-marker-radius)

4 Unique Z Indices

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

3388 total, 1836 unique declarations. Reusability index: 45%.

Margins

75% reusability index

8rem
6rem
4rem
2rem
1rem
.75rem
.5rem
0
auto
var(--space-none)

Paddings

70% reusability index

8rem
6rem
4rem
2rem
16px
1rem
.75rem
.5em
.5rem
.4em
0
var(--box-padding)
var(--slideshow-padding)
var(--space-sm)

Line Heights

3% reusability index

var(--line-height-base)
var(--text-xxl-lh, 3.25rem)
var(--text-xl-lh, 2.375rem)
var(--text-lg-lh, 1.75rem)
var(--text-md-lh, 1.75rem)
var(--text-sm-lh, 1.5rem)
var(--line-height-1)
var(--line-height-2)
var(--line-height-3)
var(--line-height-4)
var(--line-height-5)
var(--line-height-6)
var(--line-height-7)
var(--line-height-8)
var(--line-height-9)
var(--line-height-10)
var(--line-height-11)
var(--line-height-12)
104%
var(--base-font-lh)
var(--button-line-height)
var(--button-xs-line-height)
var(--button-sm-line-height)
var(--button-md-line-height)
var(--button-lg-line-height)
var(--table-lh)
.5em
var(--tabs-xs-line-height)
var(--tabs-sm-line-height)
var(--tabs-md-line-height)
var(--tabs-lg-line-height)
1.25rem

Widths

73% reusability index

100%
max-content
1.5em
auto
unset
24px
0px
var(--slideshow-arrow-size)
var(--slideshow-control-size)
var(--icons-width)
100vw
600px
calc(var(--switch-width) + var(--switch-border-width))
calc(var(--switch-height) - var(--switch-marker-margin)*2)
.625em

Heights

61% reusability index

auto
2em
1.5em
var(--logo-height)
100%
unset
24px
0px
2px
var(--slideshow-height)
var(--slideshow-arrow-size)
var(--slideshow-control-size)
var(--icons-height)
52px
100vh
calc(var(--switch-height) + var(--switch-border-width))
calc(var(--switch-height) - var(--switch-marker-margin)*2)
.625em

6 Media Queries Consistency of media queries utilization on the project

(max-width: 768px)
(max-width: 576px)
(min-width: 576px)
(min-width: 768px)
(min-width: 1200px)
(min-width: 992px)

Total Declarations

Size

Files size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

Selectors and rules

Selectors used

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

79 Heavy selectors This selectors should be simplified

31 Long selectors lists This selectors is potential candidates for simple CSS class

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

18 Heavy rulesets This classes potentially could be changed to single class

0 Empty rulesets This selectors should be removed from project

0 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

6 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

294 Unique Colors

303 Unique Background Colors

66 Unique Font Sizes

6 Unique Font Families

24 Unique Border Radii

4 Unique Z Indices

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

6 Media Queries Consistency of media queries utilization on the project

Total Declarations

Size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

Selectors and rules

Selectors used

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

34 Heavy selectors This selectors should be simplified

17 Long selectors lists This selectors is potential candidates for simple CSS class

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

7 Heavy rulesets This classes potentially could be changed to single class

0 Empty rulesets This selectors should be removed from project

0 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

3 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

523 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

34 Unique Colors

32 Unique Background Colors

29 Unique Font Sizes

5 Unique Font Families

19 Unique Border Radii

1 Unique Z Index

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

4 Media Queries Consistency of media queries utilization on the project

Total Declarations

Size

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

Selectors and rules

Selectors used

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

44 Heavy selectors This selectors should be simplified

14 Long selectors lists This selectors is potential candidates for simple CSS class

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

11 Heavy rulesets This classes potentially could be changed to single class

0 Empty rulesets This selectors should be removed from project

0 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

3 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

1572 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

278 Unique Colors

292 Unique Background Colors

61 Unique Font Sizes

5 Unique Font Families

23 Unique Border Radii

4 Unique Z Indices

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

6 Media Queries Consistency of media queries utilization on the project

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation

0 `js-` prefixed selectors This selectors should not be used for styling, since it SoC violation