@neo-design/foundations 1.0.0-rc.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Neo Design System contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+# `@neo-design/foundations`
+
+**Who it is for:** dev, with React or without it. **Ships**: yes — these are the system's foundations.
+
+Neo's semantic tokens in JS and in CSS, the icons and the plain CSS layer. It does not depend on React or
+on Material UI: `@neo-design/mui` uses it underneath, and an app in another framework can use it on its own.
+
+| import | what it ships |
+|---|---|
+| `@neo-design/foundations/tokens.css` · `/foundations.css` | the tokens as CSS variables — [`tokens/neo-color.css`](tokens/neo-color.css) and [`tokens/neo-foundations.css`](tokens/neo-foundations.css) |
+| `@neo-design/foundations/icons.css` · `/sprite` · `/icons.json` | the icon layer: the classes, the sprite as a string and the index — see [`icons/README.md`](icons/README.md) |
+| `@neo-design/foundations/css/<component>.css` | one plain sheet per component, to consume without React — [`css/index.css`](css/index.css) loads them all |
+
+The `css/` sheets resolve their variables against the two token sheets, so those load first.
+
+**How to mount it, and the full reference, are in the repository this package is published from** —
+its README covers installation, and `docs/dev/` covers the token dictionary, the layout recipe and
+the composition examples.

package/css/alert.css

@@ -0,0 +1,133 @@
+/* packages/foundations/css/alert.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--neo-space-xs-rem);
+  padding-inline: var(--neo-space-lg-rem);
+  padding-block: var(--neo-space-md-rem);
+  border-radius: var(--neo-radius-sm);
+  border-width: var(--neo-stroke-xs);
+  border-style: solid;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.alert__icon {
+  flex-shrink: 0;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  margin-top: var(--neo-space-xs-rem);
+  margin-right: var(--neo-space-xs-rem);
+}
+
+.alert__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  flex: 1;
+  min-width: 0;
+}
+
+.alert__title,
+.alert__description {
+  margin: 0;
+}
+
+.alert__title {
+  font-size: var(--neo-type-title-xs-bold-size-rem);
+  font-weight: var(--neo-type-title-xs-bold-weight);
+  line-height: var(--neo-type-title-xs-bold-line-height-rem);
+}
+
+.alert__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  padding-block: var(--neo-space-xs-rem);
+}
+
+.alert__description {
+  font-size: var(--neo-type-body-md-regular-size-rem);
+  font-weight: var(--neo-type-body-md-regular-weight);
+  line-height: var(--neo-type-body-md-regular-line-height-rem);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.alert__link {
+  color: var(--text--base--default);
+  font-size: var(--neo-type-body-md-medium-size-rem);
+  font-weight: var(--neo-type-body-md-medium-weight);
+  line-height: var(--neo-type-body-md-medium-line-height-rem);
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-skip-ink: auto;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  min-height: 24px;
+}
+
+
+.alert__close {
+  flex-shrink: 0;
+  color: var(--icon--base--default);
+  background: var(--fill--tertiary--default);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-icon-size-lg-rem);
+  height: var(--neo-icon-size-lg-rem);
+  border-radius: var(--neo-radius-pill);
+}
+
+.alert__close svg {
+  width: var(--neo-icon-size-xs-rem);
+  height: var(--neo-icon-size-xs-rem);
+}
+
+.alert__close:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+}
+
+
+.alert--info {
+  background: var(--fill--semantic--info--soft);
+  border-color: var(--border--semantic--info);
+}
+
+.alert--info .alert__title { color: var(--text--semantic--info); }
+.alert--info .alert__description { color: var(--text--base--default); }
+
+.alert--success {
+  background: var(--fill--semantic--success--soft);
+  border-color: var(--border--semantic--success);
+}
+
+.alert--success .alert__title { color: var(--text--semantic--success); }
+.alert--success .alert__description { color: var(--text--base--default); }
+
+.alert--warning {
+  background: var(--fill--semantic--warning--soft);
+  border-color: var(--border--semantic--warning);
+}
+
+.alert--warning .alert__title { color: var(--text--semantic--warning); }
+.alert--warning .alert__description { color: var(--text--base--default); }
+
+.alert--error {
+  background: var(--fill--semantic--error--soft);
+  border-color: var(--border--semantic--error-soft);
+}
+
+.alert--error .alert__title { color: var(--text--semantic--error); }
+.alert--error .alert__description { color: var(--text--base--default); }

package/css/aspect-ratio.css

@@ -0,0 +1,32 @@
+/* packages/foundations/css/aspect-ratio.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.aspect-ratio {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+.aspect-ratio > img,
+.aspect-ratio > video,
+.aspect-ratio > picture,
+.aspect-ratio > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.aspect-ratio--1-1  { aspect-ratio: 1 / 1; }
+.aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
+.aspect-ratio--4-3  { aspect-ratio: 4 / 3; }
+.aspect-ratio--3-4  { aspect-ratio: 3 / 4; }
+.aspect-ratio--21-9 { aspect-ratio: 21 / 9; }
+
+.aspect-ratio--contain > img,
+.aspect-ratio--contain > video,
+.aspect-ratio--contain > picture,
+.aspect-ratio--contain > svg {
+  object-fit: contain;
+}

package/css/badge.css

@@ -0,0 +1,57 @@
+/* packages/foundations/css/badge.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--neo-space-md-rem);
+  padding-block: var(--neo-space-xs-rem);
+  border: var(--neo-stroke-xs) solid transparent;
+  border-radius: var(--neo-radius-pill);
+  font-size: var(--neo-type-body-md-medium-size-rem);
+  font-weight: var(--neo-type-body-md-medium-weight);
+  line-height: var(--neo-type-body-md-medium-line-height-rem);
+  white-space: nowrap;
+}
+
+.badge--error   { background: var(--fill--semantic--error--soft);   border-color: var(--border--semantic--error-soft); color: var(--text--semantic--error); }
+.badge--warning { background: var(--fill--semantic--warning--soft); border-color: var(--border--semantic--warning);    color: var(--text--semantic--warning); }
+.badge--success { background: var(--fill--semantic--success--soft); border-color: var(--border--semantic--success);    color: var(--text--semantic--success); }
+.badge--info    { background: var(--fill--semantic--info--soft);    border-color: var(--border--semantic--info);       color: var(--text--semantic--info); }
+.badge--neutral { background: var(--fill--base--light);             border-color: var(--border--base--default);        color: var(--text--base--default); }
+
+.badge--dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: var(--neo-radius-pill);
+  background: var(--fill--semantic--error--solid);
+}
+
+.badge--number {
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding-inline: var(--neo-space-xs-rem);
+  padding-block: 0;
+  border: none;
+  border-radius: var(--neo-radius-pill);
+  background: var(--fill--semantic--error--solid);
+  color: var(--text--base--contrast);
+  font-size: var(--neo-type-caption-sm-medium-size-rem);
+  font-weight: var(--neo-type-caption-sm-medium-weight);
+  line-height: var(--neo-type-caption-sm-medium-line-height-rem);
+}
+
+.notification {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.notification .badge {
+  position: absolute;
+  top: var(--neo-space-xs-rem);
+  right: var(--neo-space-xs-rem);
+}

package/css/banner.css

@@ -0,0 +1,220 @@
+/* packages/foundations/css/banner.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.banner-shell {
+  container-type: inline-size;
+  container-name: banner;
+}
+
+.banner {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--neo-radius-lg);
+  background: var(--fill--base--default);
+}
+
+.banner:not(.banner--small) .banner__content { grid-row: 1; }
+.banner:not(.banner--small):not(.banner--full-photo) .banner__media { grid-row: 2; }
+
+.banner--large  { height: 504px; }
+.banner--medium { height: 340px; }
+.banner--small  { height: 148px; }
+
+.banner--small  { grid-template-rows: minmax(0, 1fr); }
+
+.banner--large:not(.banner--full-photo)  { grid-template-rows: auto 223px; }
+.banner--medium:not(.banner--full-photo) { grid-template-rows: auto 127px; }
+.banner--large:not(.banner--full-photo) .banner__content  { min-height: 281px; }
+.banner--medium:not(.banner--full-photo) .banner__content { min-height: 217px; }
+
+@container banner (min-width: 720px) {
+  .banner { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
+  .banner:not(.banner--small) .banner__content { grid-column: 1; grid-row: 1; }
+  .banner:not(.banner--small):not(.banner--full-photo) .banner__media { grid-column: 2; grid-row: 1; }
+  .banner--large  { height: 374px; }
+  .banner--medium { height: 230px; }
+  .banner--small  { height: 90px; }
+  .banner--large:not(.banner--full-photo),
+  .banner--medium:not(.banner--full-photo) { grid-template-rows: none; }
+  .banner--large:not(.banner--full-photo) .banner__content,
+  .banner--medium:not(.banner--full-photo) .banner__content { min-height: auto; }
+}
+
+.banner__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--neo-space-sm-rem);
+  padding-top: var(--neo-space-2xl-rem);
+  padding-inline: var(--neo-space-xl-rem);
+  padding-bottom: var(--neo-space-lg-rem);
+  min-width: 0;
+}
+
+.banner:not(.banner--large) .banner__icon { display: none; }
+
+
+.banner__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-icon-size-2xl-rem);
+  height: var(--neo-icon-size-2xl-rem);
+  flex-shrink: 0;
+}
+
+.banner__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.banner__title,
+.banner__subtitle,
+.banner__description { align-self: stretch; flex-shrink: 0; }
+
+.banner--small .banner__description { flex-grow: 1; }
+
+.banner__title {
+  margin: 0 0 var(--neo-space-xs-rem);
+  color: var(--text--base--default);
+  font-size: var(--neo-type-title-md-bold-size-rem);
+  font-weight: var(--neo-type-title-md-bold-weight);
+  line-height: var(--neo-type-title-md-bold-line-height-rem);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+@container banner (min-width: 720px) {
+  .banner--large .banner__title {
+    font-size: var(--neo-type-title-lg-bold-size-rem);
+    line-height: var(--neo-type-title-lg-bold-line-height-rem);
+  }
+}
+
+.banner__subtitle {
+  margin: 0;
+  color: var(--text--base--default);
+  font-size: var(--neo-type-title-sm-bold-size-rem);
+  font-weight: var(--neo-type-title-sm-bold-weight);
+  line-height: var(--neo-type-title-sm-bold-line-height-rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@container banner (min-width: 720px) {
+  .banner--large .banner__subtitle {
+    font-size: var(--neo-type-title-md-bold-size-rem);
+    line-height: var(--neo-type-title-md-bold-line-height-rem);
+  }
+}
+
+.banner__description {
+  margin: 0;
+  color: var(--text--base--default);
+  font-size: var(--neo-type-body-md-regular-size-rem);
+  font-weight: var(--neo-type-body-md-regular-weight);
+  line-height: var(--neo-type-body-md-regular-line-height-rem);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+@container banner (min-width: 720px) {
+  .banner--large .banner__description {
+    font-size: var(--neo-type-body-lg-regular-size-rem);
+    line-height: var(--neo-type-body-lg-regular-line-height-rem);
+  }
+}
+
+.banner__actions {
+  display: flex;
+  gap: var(--neo-space-md-rem);
+  padding-top: var(--neo-space-sm-rem);
+  align-items: center;
+}
+
+.banner--large .banner__actions { align-self: stretch; }
+.banner--medium.banner--full-photo .banner__actions { align-self: stretch; }
+
+.banner--full-photo.banner--large .banner__actions,
+.banner--full-photo.banner--medium .banner__actions { display: grid; }
+
+.banner--full-photo.banner--large .banner__actions > :not(button):not(a),
+.banner--full-photo.banner--medium .banner__actions > :not(button):not(a) { display: contents; }
+
+.banner__media { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
+.banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.banner--small { grid-template-columns: 1fr 108px; }
+.banner--small .banner__media { order: 1; }
+.banner--small .banner__content {
+  padding: var(--neo-space-lg-rem) var(--neo-space-md-rem);
+}
+.banner--small.banner--image-left { grid-template-columns: 108px 1fr; }
+.banner--small.banner--image-left .banner__media { order: -1; }
+
+@container banner (min-width: 720px) {
+  .banner__content { padding: var(--neo-space-2xl-rem); }
+  .banner--small { grid-template-columns: 1fr 280px; }
+  .banner--small .banner__content {
+    padding: var(--neo-space-lg-rem) var(--neo-space-2xl-rem);
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--neo-space-xl-rem);
+  }
+  .banner--large.banner--full-photo .banner__actions,
+  .banner--medium.banner--full-photo .banner__actions { align-self: flex-start; }
+  .banner--full-photo.banner--large .banner__actions,
+  .banner--full-photo.banner--medium .banner__actions { display: flex; }
+  .banner--full-photo.banner--large .banner__actions > :not(button):not(a),
+  .banner--full-photo.banner--medium .banner__actions > :not(button):not(a) { display: block; }
+  .banner--small .banner__title,
+  .banner--small .banner__subtitle,
+  .banner--small .banner__description { align-self: auto; }
+  .banner--small .banner__description { flex: 1; min-height: 0; }
+  .banner--small .banner__actions { flex: none; align-self: auto; }
+  .banner--small.banner--image-left { grid-template-columns: 280px 1fr; }
+}
+
+.banner--full-photo .banner__media {
+  position: absolute;
+  inset: 0;
+}
+
+.banner--full-photo .banner__media::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+.banner--full-photo .banner__content { position: relative; z-index: 1; }
+
+.banner--full-photo:not(.banner--small) .banner__content { padding-bottom: var(--neo-space-2xl-rem); }
+.banner--large.banner--full-photo .banner__content  { justify-content: flex-start; }
+.banner--full-photo:not(.banner--small) { grid-template-rows: minmax(0, 1fr); }
+.banner--large.banner--full-photo .banner__content,
+.banner--medium.banner--full-photo .banner__content { justify-content: flex-start; }
+.banner--large.banner--full-photo .banner__actions,
+.banner--medium.banner--full-photo .banner__actions { margin-top: auto; }
+.banner--large.banner--full-photo .banner__actions { align-items: flex-end; }
+.banner--full-photo .banner__title,
+.banner--full-photo .banner__subtitle,
+.banner--full-photo .banner__description { color: var(--text--base--contrast); }
+
+@container banner (min-width: 720px) {
+  .banner--large.banner--full-photo .banner__content,
+  .banner--large.banner--full-photo .banner__content,
+  .banner--medium.banner--full-photo .banner__content { justify-content: center; }
+  .banner--large.banner--full-photo .banner__actions,
+  .banner--medium.banner--full-photo .banner__actions { margin-top: 0; }
+  .banner--large.banner--full-photo .banner__actions { align-items: center; }
+}

package/css/button-icon.css

@@ -0,0 +1,14 @@
+/* packages/foundations/css/button-icon.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.btn--icon-only.btn--large { padding: 0; width: var(--neo-button-height-lg-rem); height: var(--neo-button-height-lg-rem); }
+.btn--icon-only.btn--medium { padding: 0; width: var(--neo-button-height-md-rem); height: var(--neo-button-height-md-rem); }
+.btn--icon-only.btn--small { padding: 0; width: var(--neo-button-height-sm-rem); height: var(--neo-button-height-sm-rem); }
+
+.btn--icon-only svg.icon--xs { width: var(--neo-icon-size-xs-rem); height: var(--neo-icon-size-xs-rem); }
+.btn--icon-only svg.icon--sm { width: var(--neo-icon-size-sm-rem); height: var(--neo-icon-size-sm-rem); }
+.btn--icon-only svg.icon--md { width: var(--neo-icon-size-md-rem); height: var(--neo-icon-size-md-rem); }
+.btn--icon-only svg.icon--lg { width: var(--neo-icon-size-lg-rem); height: var(--neo-icon-size-lg-rem); }
+.btn--icon-only svg.icon--xl { width: var(--neo-icon-size-xl-rem); height: var(--neo-icon-size-xl-rem); }
+.btn--icon-only svg.icon--2xl { width: var(--neo-icon-size-2xl-rem); height: var(--neo-icon-size-2xl-rem); }
+.btn--icon-only svg.icon--3xl { width: var(--neo-icon-size-3xl-rem); height: var(--neo-icon-size-3xl-rem); }
+.btn--icon-only svg.icon--4xl { width: var(--neo-icon-size-4xl-rem); height: var(--neo-icon-size-4xl-rem); }

package/css/button.css

@@ -0,0 +1,174 @@
+/* packages/foundations/css/button.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--neo-space-sm-rem);
+  white-space: nowrap;
+  border-radius: var(--neo-radius-pill);
+  cursor: pointer;
+  font-weight: var(--neo-type-body-lg-medium-weight);
+  white-space: nowrap;
+  transition: background 100ms ease, color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
+  text-decoration: none;
+}
+
+.btn:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 0.125rem;
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default);
+}
+
+.btn--inverse:focus-visible {
+  outline-color: var(--focus--ring--inverse);
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--inverse);
+}
+
+.btn[disabled],
+.btn--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn svg {
+  flex-shrink: 0;
+}
+
+.btn--large {
+  padding-inline: var(--neo-space-xl-rem);
+  padding-block: var(--neo-space-sm-rem);
+  font-size: var(--neo-type-title-sm-medium-size-rem);
+  line-height: var(--neo-type-title-sm-medium-line-height-rem);
+  min-height: var(--neo-button-height-lg-rem);
+}
+
+.btn--medium {
+  padding-inline: var(--neo-space-lg-rem);
+  padding-block: var(--neo-space-sm-rem);
+  font-size: var(--neo-type-body-lg-medium-size-rem);
+  line-height: var(--neo-type-body-lg-medium-line-height-rem);
+  min-height: var(--neo-button-height-md-rem);
+}
+
+.btn--small {
+  padding-inline: var(--neo-space-md-rem);
+  padding-block: var(--neo-space-xs-rem);
+  font-size: var(--neo-type-body-md-medium-size-rem);
+  font-weight: var(--neo-type-body-md-medium-weight);
+  line-height: var(--neo-type-body-md-medium-line-height-rem);
+  min-height: var(--neo-button-height-sm-rem);
+}
+
+.btn--large svg { width: var(--neo-icon-size-md-rem); height: var(--neo-icon-size-md-rem); }
+.btn--medium svg { width: var(--neo-icon-size-sm-rem); height: var(--neo-icon-size-sm-rem); }
+.btn--small svg { width: var(--neo-icon-size-xs-rem); height: var(--neo-icon-size-xs-rem); }
+
+.btn--primary {
+  background: var(--fill--primary--default);
+  color: var(--text--base--contrast);
+  border-color: transparent;
+}
+.btn--primary:hover  { background: var(--fill--primary--hover); }
+.btn--primary:active { background: var(--fill--primary--active); }
+.btn--primary[disabled] {
+  background: var(--fill--base--disabled);
+  color: var(--text--base--disabled);
+}
+
+.btn--secondary {
+  background: var(--fill--secondary--default);
+  color: var(--text--base--default);
+  border-color: transparent;
+}
+.btn--secondary:hover  { background: var(--fill--secondary--hover); }
+.btn--secondary:active { background: var(--fill--secondary--active); }
+.btn--secondary[disabled] {
+  color: var(--text--base--disabled);
+  border-color: transparent;
+}
+
+.btn--tertiary {
+  background: var(--fill--tertiary--default);
+  color: var(--text--base--default);
+  border-color: transparent;
+}
+.btn--tertiary:hover  { background: var(--fill--tertiary--hover); }
+.btn--tertiary:active { background: var(--fill--tertiary--active); }
+.btn--tertiary[disabled] { color: var(--text--base--disabled); }
+
+.btn--inverse.btn--primary {
+  background: var(--fill--primary--inverse--default);
+  color: var(--text--base--default);
+  border-color: transparent;
+}
+.btn--inverse.btn--primary:hover  { background: var(--fill--primary--inverse--hover); }
+.btn--inverse.btn--primary:active { background: var(--fill--primary--inverse--active); }
+
+.btn--inverse.btn--secondary {
+  background: var(--fill--secondary--inverse--default);
+  color: var(--text--base--contrast);
+  box-shadow: inset 0 0 0 var(--neo-stroke-xs) var(--border--base--contrast);
+}
+.btn--inverse.btn--secondary:hover  { background: var(--fill--secondary--inverse--hover); }
+.btn--inverse.btn--secondary:active { background: var(--fill--secondary--inverse--active); }
+
+.btn--inverse.btn--tertiary {
+  background: var(--fill--tertiary--inverse--default);
+  color: var(--text--base--contrast);
+  border-color: transparent;
+}
+.btn--inverse.btn--tertiary:hover  { background: var(--fill--tertiary--inverse--hover); }
+.btn--inverse.btn--tertiary:active { background: var(--fill--tertiary--inverse--active); }
+
+.btn--inverse[disabled],
+.btn--inverse.btn--disabled {
+  background: var(--fill--base--disabled);
+  color: var(--text--base--disabled);
+  border-color: transparent;
+}
+
+.btn--brand {
+  background: var(--fill--brand--primary--default);
+  color: var(--text--base--contrast);
+  font-size: var(--neo-type-title-md-bold-size-rem);
+  font-weight: var(--neo-type-title-md-bold-weight);
+  line-height: var(--neo-type-title-md-bold-line-height-rem);
+}
+.btn--brand:hover  { background: var(--fill--brand--primary--hover); }
+.btn--brand:active { background: var(--fill--brand--primary--active); }
+.btn--brand.btn--secondary {
+  background: var(--fill--brand--secondary--default);
+  color: var(--text--base--brand-strong);
+}
+.btn--brand.btn--secondary:hover  { background: var(--fill--brand--secondary--hover); }
+.btn--brand.btn--secondary:active { background: var(--fill--brand--secondary--active); }
+
+.btn--brand.btn--tertiary {
+  background: var(--fill--brand--tertiary--default);
+  color: var(--text--base--brand-strong);
+}
+.btn--brand.btn--tertiary:hover  { background: var(--fill--brand--tertiary--hover); }
+.btn--brand.btn--tertiary:active { background: var(--fill--brand--tertiary--active); }
+
+.btn--brand[disabled],
+.btn--brand.btn--disabled {
+  background: var(--fill--base--disabled);
+  color: var(--text--base--disabled);
+}
+
+.btn--primary svg { fill: var(--icon--base--contrast); color: var(--icon--base--contrast); }
+.btn--secondary svg,
+.btn--tertiary svg { fill: var(--icon--base--default); color: var(--icon--base--default); }
+.btn--inverse.btn--primary svg { fill: var(--icon--base--default); color: var(--icon--base--default); }
+.btn--inverse.btn--secondary svg,
+.btn--inverse.btn--tertiary svg { fill: var(--icon--base--contrast); color: var(--icon--base--contrast); }
+.btn--brand svg { fill: var(--icon--base--contrast); color: var(--icon--base--contrast); }
+.btn--brand.btn--secondary svg,
+.btn--brand.btn--tertiary svg { fill: var(--icon--base--brand-strong); color: var(--icon--base--brand-strong); }
+.btn[disabled] svg,
+.btn--disabled svg {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+