Packages
design_styles_hex

1.0.9
1.0.9 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0
Custom styles
HexDocs
Current section
Files
Jump to
Readme 10 Versions 1 Dependency Dependants Files Activity
design_styles_hex lib index.css
Raw
lib/index.css

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e3e3e3;
  --color-neutral-300: #cecece;
  --color-neutral-400: #b7b7b7;
  --color-neutral-500: #9c9c9c;
  --color-neutral-600: #656565;
  --color-neutral-700: #505050;
  --color-neutral-800: #404040;
  --color-neutral-900: #1f1f1f;
  --color-blue-50: #F1F9FF;
  --color-blue-100: #B8DCFF;
  --color-blue-200: #86C7FF;
  --color-blue-300: #48B1FF;
  --color-blue-400: #00A3FF;
  --color-blue-500: #008DFF;
  --color-blue-600: #006AFF;
  --color-blue-700: #0054CC;
  --color-blue-800: #004099;
  --color-blue-900: #002B66;
  --color-green-50: #F1F8F1;
  --color-green-100: #C2E4BC;
  --color-green-200: #9AD291;
  --color-green-300: #6FC263;
  --color-green-400: #4CB53F;
  --color-green-500: #21A80F;
  --color-green-600: #149901;
  --color-green-700: #008700;
  --color-green-800: #007700;
  --color-green-900: #005900;
  --color-orange-50: #FFFEF0;
  --color-orange-100: #FADFCC;
  --color-orange-200: #F5C099;
  --color-orange-300: #F0A066;
  --color-orange-400: #EB8133;
  --color-orange-500: #E66100;
  --color-orange-600: #B84E00;
  --color-orange-700: #8A3A00;
  --color-orange-800: #5C2700;
  --color-orange-900: #2E1300;
  --color-red-50: #FEF1F1;
  --color-red-100: #FFCECC;
  --color-red-200: #FF9E9A;
  --color-red-300: #FF6D67;
  --color-red-400: #FF3D35;
  --color-red-500: #FF0C02;
  --color-red-600: #D0021B;
  --color-red-700: #990701;
  --color-red-800: #660501;
  --color-red-900: #330200;
}

:root {
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
}

:root {
  --desktop-font-size-xs: 0.688rem;
  --desktop-font-size-sm: 0.75rem;
  --desktop-font-size-base: 0.813rem;
  --desktop-font-size-lg: 0.938rem;
  --desktop-font-size-xl: 1rem;
  --desktop-font-size-2xl: 1.125rem;
  --desktop-font-size-3xl: 1.25rem;
  --desktop-font-size-4xl: 1.5rem;
  --desktop-font-size-5xl: 2.5rem;
  --desktop-font-size-6xl: 3.75rem;
  --desktop-font-tracking-0: 0rem;
  --desktop-font-tracking-1: -0.025rem;
  --desktop-font-tracking-2: -0.0525rem;
  --desktop-font-tracking-3: -0.0781rem;
  --desktop-font-tracking-4: -0.125rem;
  --desktop-font-leading-xs: 0.75rem;
  --desktop-font-leading-sm: 0.875rem;
  --desktop-font-leading-base: 1rem;
  --desktop-font-leading-lg: 1.125rem;
  --desktop-font-leading-xl: 1.25rem;
  --desktop-font-leading-2xl: 1.5rem;
  --desktop-font-leading-3xl: 2rem;
  --desktop-font-leading-4xl: 2.5rem;
  --desktop-font-leading-5xl: 3.25rem;
  --font-family-primary: Gotham;
  --font-family-secondary: Gotham;
  --font-weight-light: Light;
  --font-weight-normal: Book;
  --font-weight-medium: Medium;
  --font-weight-bold: Bold;
  --font-text-decoration-underline: underline;
  --font-text-decoration-line-through: line-through;
  --font-text-decoration-no-underline: none;
  --font-text-transform-uppercase: uppercase;
  --font-text-transform-lowercase: lowercase;
  --font-text-transform-capitalize: capitalize;
  --font-text-transform-normal-case: unset;
  --mobile-font-leading-xs: 0.75rem;
  --mobile-font-leading-sm: 0.875rem;
  --mobile-font-leading-base: 1rem;
  --mobile-font-leading-lg: 1.125rem;
  --mobile-font-leading-xl: 1.25rem;
  --mobile-font-leading-2xl: 1.5rem;
  --mobile-font-leading-3xl: 2rem;
  --mobile-font-leading-4xl: 2.5rem;
  --mobile-font-leading-5xl: 3.25rem;
  --mobile-font-size-xs: 0.688rem;
  --mobile-font-size-sm: 0.75rem;
  --mobile-font-size-base: 0.813rem;
  --mobile-font-size-lg: 0.938rem;
  --mobile-font-size-xl: 1rem;
  --mobile-font-size-2xl: 1.125rem;
  --mobile-font-size-3xl: 1.25rem;
  --mobile-font-size-4xl: 1.5rem;
  --mobile-font-size-5xl: 2rem;
  --mobile-font-size-6xl: 3.75rem;
  --mobile-font-tracking-0: 0rem;
  --mobile-font-tracking-1: -0.025rem;
  --mobile-font-tracking-2: -0.0525rem;
  --mobile-font-tracking-3: -0.0781rem;
  --mobile-font-tracking-4: -0.125rem;
}

:root {
  --zindex-positioned: 10;
  --zindex-sticky: 20;
  --zindex-fixed: 30;
  --zindex-menu: 40;
  --zindex-backdrop: 50;
  --zindex-modal: 60;
  --zindex-tooltip: 70;
}

.button-full-width {
  width: 100%;
}

.button-fixed-width {
  padding-right: var(--spacing-5);
  padding-left: var(--spacing-5);
}

.button-primary {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-black);
}
.button-primary:hover {
  background-color: var(--color-neutral-600);
  border-color: var(--color-neutral-600);
}

.button-secondary {
  background-color: transparent;
  color: var(--color-neutral-800);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-black);
}
.button-secondary:hover {
  background-color: transparent;
  border-color: var(--color-neutral-400);
}

.button-primary--disabled {
  background-color: var(--color-neutral-200);
  color: var(--color-black);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-neutral-400);
}

.button-secondary--disabled {
  background-color: var(--color-neutral-200);
  color: var(--color-black);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-neutral-400);
}

.button-primary-inverse {
  background-color: var(--color-white);
  color: var(--color-white);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-white);
  color: var(--color-black);
}
.button-primary-inverse:hover {
  color: var(--color-neutral-800);
  background-color: var(--color-black);
  border-color: var(--color-neutral-600);
}

.button-primary-inverse--disabled {
  background-color: var(--color-neutral-800);
  color: var(--color-white);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-neutral-600);
}

.button-secondary-inverse {
  background-color: transparent;
  color: var(--color-white);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-white);
  color: var(--color-white);
}
.button-secondary-inverse:hover {
  background-color: rgba(64, 64, 64, 0.5);
  border-color: var(--color-white);
}

.button-secondary-inverse--disabled {
  background-color: var(--color-neutral-800);
  color: var(--color-white);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border: 1px solid var(--color-neutral-600);
}

/*# sourceMappingURL=button.module.css.map */


/*# sourceMappingURL=colors.module.css.map */
:root {
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
}

/*# sourceMappingURL=spacing.module.css.map */
:root {
  --desktop-font-size-xs: 0.688rem;
  --desktop-font-size-sm: 0.75rem;
  --desktop-font-size-base: 0.813rem;
  --desktop-font-size-lg: 0.938rem;
  --desktop-font-size-xl: 1rem;
  --desktop-font-size-2xl: 1.125rem;
  --desktop-font-size-3xl: 1.25rem;
  --desktop-font-size-4xl: 1.5rem;
  --desktop-font-size-5xl: 2.5rem;
  --desktop-font-size-6xl: 3.75rem;
  --desktop-font-tracking-0: 0rem;
  --desktop-font-tracking-1: -0.025rem;
  --desktop-font-tracking-2: -0.0525rem;
  --desktop-font-tracking-3: -0.0781rem;
  --desktop-font-tracking-4: -0.125rem;
  --desktop-font-leading-xs: 0.75rem;
  --desktop-font-leading-sm: 0.875rem;
  --desktop-font-leading-base: 1rem;
  --desktop-font-leading-lg: 1.125rem;
  --desktop-font-leading-xl: 1.25rem;
  --desktop-font-leading-2xl: 1.5rem;
  --desktop-font-leading-3xl: 2rem;
  --desktop-font-leading-4xl: 2.5rem;
  --desktop-font-leading-5xl: 3.25rem;
  --font-family-primary: Gotham;
  --font-family-secondary: Gotham;
  --font-weight-light: Light;
  --font-weight-normal: Book;
  --font-weight-medium: Medium;
  --font-weight-bold: Bold;
  --font-text-decoration-underline: underline;
  --font-text-decoration-line-through: line-through;
  --font-text-decoration-no-underline: none;
  --font-text-transform-uppercase: uppercase;
  --font-text-transform-lowercase: lowercase;
  --font-text-transform-capitalize: capitalize;
  --font-text-transform-normal-case: unset;
  --mobile-font-leading-xs: 0.75rem;
  --mobile-font-leading-sm: 0.875rem;
  --mobile-font-leading-base: 1rem;
  --mobile-font-leading-lg: 1.125rem;
  --mobile-font-leading-xl: 1.25rem;
  --mobile-font-leading-2xl: 1.5rem;
  --mobile-font-leading-3xl: 2rem;
  --mobile-font-leading-4xl: 2.5rem;
  --mobile-font-leading-5xl: 3.25rem;
  --mobile-font-size-xs: 0.688rem;
  --mobile-font-size-sm: 0.75rem;
  --mobile-font-size-base: 0.813rem;
  --mobile-font-size-lg: 0.938rem;
  --mobile-font-size-xl: 1rem;
  --mobile-font-size-2xl: 1.125rem;
  --mobile-font-size-3xl: 1.25rem;
  --mobile-font-size-4xl: 1.5rem;
  --mobile-font-size-5xl: 2rem;
  --mobile-font-size-6xl: 3.75rem;
  --mobile-font-tracking-0: 0rem;
  --mobile-font-tracking-1: -0.025rem;
  --mobile-font-tracking-2: -0.0525rem;
  --mobile-font-tracking-3: -0.0781rem;
  --mobile-font-tracking-4: -0.125rem;
}

/*# sourceMappingURL=typography.module.css.map */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e3e3e3;
  --color-neutral-300: #cecece;
  --color-neutral-400: #b7b7b7;
  --color-neutral-500: #9c9c9c;
  --color-neutral-600: #656565;
  --color-neutral-700: #505050;
  --color-neutral-800: #404040;
  --color-neutral-900: #1f1f1f;
  --color-blue-50: #F1F9FF;
  --color-blue-100: #B8DCFF;
  --color-blue-200: #86C7FF;
  --color-blue-300: #48B1FF;
  --color-blue-400: #00A3FF;
  --color-blue-500: #008DFF;
  --color-blue-600: #006AFF;
  --color-blue-700: #0054CC;
  --color-blue-800: #004099;
  --color-blue-900: #002B66;
  --color-green-50: #F1F8F1;
  --color-green-100: #C2E4BC;
  --color-green-200: #9AD291;
  --color-green-300: #6FC263;
  --color-green-400: #4CB53F;
  --color-green-500: #21A80F;
  --color-green-600: #149901;
  --color-green-700: #008700;
  --color-green-800: #007700;
  --color-green-900: #005900;
  --color-orange-50: #FFFEF0;
  --color-orange-100: #FADFCC;
  --color-orange-200: #F5C099;
  --color-orange-300: #F0A066;
  --color-orange-400: #EB8133;
  --color-orange-500: #E66100;
  --color-orange-600: #B84E00;
  --color-orange-700: #8A3A00;
  --color-orange-800: #5C2700;
  --color-orange-900: #2E1300;
  --color-red-50: #FEF1F1;
  --color-red-100: #FFCECC;
  --color-red-200: #FF9E9A;
  --color-red-300: #FF6D67;
  --color-red-400: #FF3D35;
  --color-red-500: #FF0C02;
  --color-red-600: #D0021B;
  --color-red-700: #990701;
  --color-red-800: #660501;
  --color-red-900: #330200;
}

/*# sourceMappingURL=variables.module.css.map */
:root {
  --zindex-positioned: 10;
  --zindex-sticky: 20;
  --zindex-fixed: 30;
  --zindex-menu: 40;
  --zindex-backdrop: 50;
  --zindex-modal: 60;
  --zindex-tooltip: 70;
}

/*# sourceMappingURL=zindex.module.css.map */
Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT