diff --git a/.size-snapshot.json b/.size-snapshot.json
index 42ee05a6..fdedbda4 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -81,8 +81,8 @@
     "gzipped": 9217
   },
   "dist/rbx.umd.js": {
-    "bundled": 92904,
-    "minified": 46726,
-    "gzipped": 9618
+    "bundled": 94443,
+    "minified": 47449,
+    "gzipped": 9762
   }
 }
diff --git a/examples/with-customization/src/theme.tsx b/examples/with-customization/src/theme.tsx
index 02c95fc1..6fb8e73b 100644
--- a/examples/with-customization/src/theme.tsx
+++ b/examples/with-customization/src/theme.tsx
@@ -1,8 +1,7 @@
 import { makeRootValidatingTransform } from "rbx/base/helpers";
 import { DEFAULTS } from "rbx/base/helpers/variables";
-import { tuple } from "rbx/utils";
 
-const COLORS = tuple(...DEFAULTS.colors, "react");
+const COLORS = [...DEFAULTS.colors, "react"] as const;
 
 export const themeValue = {
   transform: makeRootValidatingTransform({ colors: COLORS }),
diff --git a/src/__docs__/customize.mdx b/src/__docs__/customize.mdx
index 1b07096f..258dff93 100644
--- a/src/__docs__/customize.mdx
+++ b/src/__docs__/customize.mdx
@@ -21,7 +21,7 @@ Before we get on to an example, here's an overview of how we use _TypeScript_ to
 
 Take a look at the [source code for the **helpers variables**](https://github.com/dfee/rbx/blob/master/src/base/helpers/variables.ts), or the [source code for `<Button>`](https://github.com/dfee/rbx/blob/master/src/elements/button/button.tsx), and you'll notice two very important expressions:
 
-1. the `DEFAULTS` or `<COMPONENT>_DEFAULTS` variable that defines the defaults in a `tuple()`
+1. the `DEFAULTS` or `<COMPONENT>_DEFAULTS` variable that defines the defaults in a `const`
 2. a `Variables` or `<Component>Variables` `type` that uses those defaults to construct a _TypeScript_ type.
 
 Looking deeper at the **DEFAULTS**, that's where the _Bulma_ defaults are defined in code.
@@ -68,12 +68,11 @@ If you've altered a [Bulma modifier](https://bulma.io/documentation/modifiers/),
 
 import { makeRootValidatingTransform } from "rbx/base/helpers";
 import { DEFAULTS } from "rbx/base/helpers/variables";
-import { tuple } from "rbx/utils";
 
 import { MyAppNavbar } from "./components";
 import "./App.sass";
 
-const COLORS = tuple(...DEFAULTS.colors, "react");
+const COLORS = [ ...DEFAULTS.colors, "react" ] as const;
 
 const themeValue = {
   transform: makeRootValidatingTransform({ colors: COLORS })
diff --git a/src/__tests__/testing.tsx b/src/__tests__/testing.tsx
index 6aacf383..affde648 100644
--- a/src/__tests__/testing.tsx
+++ b/src/__tests__/testing.tsx
@@ -187,7 +187,7 @@ export const validateNumberPropType = <T extends {}>(
 export const validateOneOfPropType = <T extends {}>(
   propTypes: React.WeakValidationMap<T>,
   propName: string,
-  choices: (string | number)[],
+  choices: Readonly<(string | number)[]>,
   extras?: Partial<T>,
 ) =>
   validatePropType(propTypes, propName, [
diff --git a/src/base/helpers/__tests__/badge.test.tsx b/src/base/helpers/__tests__/badge.test.tsx
index dae03662..3aa07907 100644
--- a/src/base/helpers/__tests__/badge.test.tsx
+++ b/src/base/helpers/__tests__/badge.test.tsx
@@ -1,6 +1,5 @@
 import { makePropTypes, makeValidatingTransform } from "src/base/helpers/badge";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -32,7 +31,7 @@ describe("Badge helpers", () => {
     });
 
     describe("custom", () => {
-      const customBadgeSizes = tuple("a", "b");
+      const customBadgeSizes = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         badgeSizes: customBadgeSizes,
       });
diff --git a/src/base/helpers/__tests__/float.test.tsx b/src/base/helpers/__tests__/float.test.tsx
index 922c36ab..c4068e2a 100644
--- a/src/base/helpers/__tests__/float.test.tsx
+++ b/src/base/helpers/__tests__/float.test.tsx
@@ -1,6 +1,5 @@
 import { makePropTypes, makeValidatingTransform } from "src/base/helpers/float";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -26,7 +25,7 @@ describe("Float helpers", () => {
     testItShouldUseDefaultLocationProp(vtfunc, { clearfix: "__UNKNOWN" });
 
     describe("custom", () => {
-      const customFloatPulledAlignments = tuple("a", "b");
+      const customFloatPulledAlignments = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         floatPulledAlignments: customFloatPulledAlignments,
       });
diff --git a/src/base/helpers/__tests__/responsive.test.tsx b/src/base/helpers/__tests__/responsive.test.tsx
index f3d44d8a..deaccc17 100644
--- a/src/base/helpers/__tests__/responsive.test.tsx
+++ b/src/base/helpers/__tests__/responsive.test.tsx
@@ -17,7 +17,8 @@ const LOC = "prop";
 
 /** these sizes support the `only` prop. */
 const checkIsLimited = (breakpoint: string) =>
-  (DEFAULTS.breakpointsLimited as string[]).indexOf(breakpoint) !== -1;
+  (DEFAULTS.breakpointsLimited as Readonly<string[]>).indexOf(breakpoint) !==
+  -1;
 
 describe("Responsive modifiers", () => {
   const propTypes = makePropTypes();
diff --git a/src/base/helpers/__tests__/tooltip.test.tsx b/src/base/helpers/__tests__/tooltip.test.tsx
index 61fc0477..847658f6 100644
--- a/src/base/helpers/__tests__/tooltip.test.tsx
+++ b/src/base/helpers/__tests__/tooltip.test.tsx
@@ -3,7 +3,6 @@ import {
   makeValidatingTransform,
 } from "src/base/helpers/tooltip";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -61,7 +60,7 @@ describe("Tooltip helpers", () => {
     });
 
     describe("custom", () => {
-      const customTooltipPositions = tuple("a", "b");
+      const customTooltipPositions = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         tooltipPositions: customTooltipPositions,
       });
diff --git a/src/base/helpers/factory.ts b/src/base/helpers/factory.ts
index ced57a23..4f27da66 100644
--- a/src/base/helpers/factory.ts
+++ b/src/base/helpers/factory.ts
@@ -79,8 +79,8 @@ export const makeRootValidatingTransformFactory = <
   T extends MakeValidatingTransformFunction<any, any>[]
 >(
   ...mvtfs: T
-) => (variables: VariablesDefinitions) => {
-  const vtfs = mvtfs.map(func => func(variables));
+) => (variables: Partial<VariablesDefinitions>) => {
+  const vtfs = mvtfs.map(func => func({ ...DEFAULTS, ...variables }));
   return <
     P extends { className?: string | undefined } & UnionToIntersection<
       ExtractTTransformProps<T[number]>
diff --git a/src/base/helpers/variables.ts b/src/base/helpers/variables.ts
index 4721246b..6b2db857 100644
--- a/src/base/helpers/variables.ts
+++ b/src/base/helpers/variables.ts
@@ -1,35 +1,34 @@
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export type VariablesDefinitions = {
-  colors: (string | number)[];
-  shades: (string | number)[];
+  colors: Readonly<(string | number)[]>;
+  shades: Readonly<(string | number)[]>;
 
   // Badge
-  badgeSizes: (string | number)[];
+  badgeSizes: Readonly<(string | number)[]>;
 
   // Float
-  floatPulledAlignments: (string | number)[];
+  floatPulledAlignments: Readonly<(string | number)[]>;
 
   // Responsive
-  breakpoints: (string | number)[];
-  breakpointsLimited: (string | number)[];
+  breakpoints: Readonly<(string | number)[]>;
+  breakpointsLimited: Readonly<(string | number)[]>;
 
   // Tooltip
-  tooltipPositions: (string | number)[];
+  tooltipPositions: Readonly<(string | number)[]>;
 
   // Typography
-  textAlignments: (string | number)[];
-  textSizes: (string | number)[];
-  textTransforms: (string | number)[];
-  textWeights: (string | number)[];
+  textAlignments: Readonly<(string | number)[]>;
+  textSizes: Readonly<(string | number)[]>;
+  textTransforms: Readonly<(string | number)[]>;
+  textWeights: Readonly<(string | number)[]>;
 
   // Visibility
-  displays: (string | number)[];
+  displays: Readonly<(string | number)[]>;
 };
 
 export const DEFAULTS = {
-  colors: tuple(
+  colors: [
     "primary",
     "success",
     "info",
@@ -40,8 +39,8 @@ export const DEFAULTS = {
     "white",
     "black",
     "link",
-  ),
-  shades: tuple(
+  ] as const,
+  shades: [
     "black-bis",
     "black-ter",
     "grey-darker",
@@ -51,41 +50,41 @@ export const DEFAULTS = {
     "grey-lighter",
     "white-ter",
     "white-bis",
-  ),
+  ] as const,
 
   // Badge
-  badgeSizes: tuple("small", "medium", "large"),
+  badgeSizes: ["small", "medium", "large"] as const,
 
   // Float
-  floatPulledAlignments: tuple("left", "right"),
+  floatPulledAlignments: ["left", "right"] as const,
 
   // Responsive
-  breakpoints: tuple(
+  breakpoints: [
     "mobile", // up to 768px
     "tablet", // between 769px and 1023px
     "desktop", // between 1024px and 1215px
     "widescreen", // between 1216px and 1407px
     "fullhd", // 1408px and above
     "touch", // mobile or tablet
-  ),
+  ] as const,
   /**
    * Breakpoints that are limited don't support the `only` option, e.g.:
    *   `is-hidden-mobile`: supported
    *   `is-hidden-mobile-only`: unsupported
    */
-  breakpointsLimited: tuple("mobile", "fullhd", "touch"),
+  breakpointsLimited: ["mobile", "fullhd", "touch"] as const,
 
   // Tooltips:
-  tooltipPositions: tuple("top", "right", "bottom", "left"),
+  tooltipPositions: ["top", "right", "bottom", "left"] as const,
 
   // Typography
-  textAlignments: tuple("centered", "justified", "left", "right"),
-  textSizes: tuple(1, 2, 3, 4, 5, 6, 7),
-  textTransforms: tuple("capitalized", "lowercase", "uppercase"),
-  textWeights: tuple("light", "medium", "normal", "semibold", "bold"),
+  textAlignments: ["centered", "justified", "left", "right"] as const,
+  textSizes: [1, 2, 3, 4, 5, 6, 7] as const,
+  textTransforms: ["capitalized", "lowercase", "uppercase"] as const,
+  textWeights: ["light", "medium", "normal", "semibold", "bold"] as const,
 
   // Visibility
-  displays: tuple("block", "flex", "inline", "inline-block", "inline-flex"),
+  displays: ["block", "flex", "inline", "inline-block", "inline-flex"] as const,
 };
 
 // tslint:disable-next-line: no-empty-interface
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index a05b84b0..11ce1309 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -5,13 +5,12 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { BreadcrumbItem } from "./breadcrumb-item";
 
 export const BREADCRUMB_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  separators: tuple("arrow", "bullet", "dot", "succeeds"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  separators: ["arrow", "bullet", "dot", "succeeds"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface BreadcrumbVariablesOverrides {}
diff --git a/src/components/card/card-header-title.tsx b/src/components/card/card-header-title.tsx
index 12c3f848..548ccdc2 100644
--- a/src/components/card/card-header-title.tsx
+++ b/src/components/card/card-header-title.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const CARD_HEADER_TITLE_DEFAULTS = {
-  alignments: tuple("centered"),
+  alignments: ["centered"] as const,
 };
 
 export interface CardHeaderTitleVariablesOverrides {}
diff --git a/src/components/dropdown/dropdown-container.tsx b/src/components/dropdown/dropdown-container.tsx
index 55ce821a..bb84c91e 100644
--- a/src/components/dropdown/dropdown-container.tsx
+++ b/src/components/dropdown/dropdown-container.tsx
@@ -4,11 +4,11 @@ import React from "react";
 import { Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { combineRefs, tuple } from "../../utils";
+import { combineRefs } from "../../utils";
 import { DropdownContext } from "./dropdown-context";
 
 export const DROPDOWN_DEFAULTS = {
-  alignments: tuple("right"),
+  alignments: ["right"] as const,
 };
 
 export interface DropdownVariablesOverrides {}
diff --git a/src/components/level/level-item.tsx b/src/components/level/level-item.tsx
index b5fec2dd..8483764b 100644
--- a/src/components/level/level-item.tsx
+++ b/src/components/level/level-item.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const LEVEL_ITEM_DEFAULTS = {
-  alignments: tuple("left", "right"),
+  alignments: ["left", "right"] as const,
 };
 
 export interface LevelItemVariablesOverrides {}
diff --git a/src/components/media/media-item.tsx b/src/components/media/media-item.tsx
index 66070261..4f2e3754 100644
--- a/src/components/media/media-item.tsx
+++ b/src/components/media/media-item.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const MEDIA_ITEM_DEFAULTS = {
-  alignments: tuple("content", "left", "right"),
+  alignments: ["content", "left", "right"] as const,
 };
 
 export interface MediaItemVariablesOverrides {}
diff --git a/src/components/message/message.tsx b/src/components/message/message.tsx
index 2b22cf9e..ed68cd7e 100644
--- a/src/components/message/message.tsx
+++ b/src/components/message/message.tsx
@@ -6,12 +6,11 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { MessageBody } from "./message-body";
 import { MessageHeader } from "./message-header";
 
 export const MESSAGE_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface MessageVariablesOverrides {}
diff --git a/src/components/navbar/navbar-container.tsx b/src/components/navbar/navbar-container.tsx
index 118832dc..95e10968 100644
--- a/src/components/navbar/navbar-container.tsx
+++ b/src/components/navbar/navbar-container.tsx
@@ -5,11 +5,11 @@ import { Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { canUseDOM, tuple } from "../../utils";
+import { canUseDOM } from "../../utils";
 import { NavbarContext } from "./navbar-context";
 
 export const NAVBAR_DEFAULTS = {
-  fixedAlignments: tuple("top", "bottom"),
+  fixedAlignments: ["top", "bottom"] as const,
 };
 
 export interface NavbarVariablesOverrides {}
diff --git a/src/components/navbar/navbar-dropdown.tsx b/src/components/navbar/navbar-dropdown.tsx
index a0af75c7..64d74ae7 100644
--- a/src/components/navbar/navbar-dropdown.tsx
+++ b/src/components/navbar/navbar-dropdown.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const NAVBAR_DROPDOWN_DEFAULTS = {
-  alignments: tuple("right"),
+  alignments: ["right"] as const,
 };
 
 export interface NavbarDropdownVariablesOverrides {}
diff --git a/src/components/navbar/navbar-segment.tsx b/src/components/navbar/navbar-segment.tsx
index 385442a2..69a2f579 100644
--- a/src/components/navbar/navbar-segment.tsx
+++ b/src/components/navbar/navbar-segment.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const NAVBAR_SEGMENT_DEFAULTS = {
-  alignments: tuple("start", "end"),
+  alignments: ["start", "end"] as const,
 };
 
 export interface NavbarSegmentVariablesOverrides {}
diff --git a/src/components/pagination/pagination-step.tsx b/src/components/pagination/pagination-step.tsx
index ead2104e..60dec50c 100644
--- a/src/components/pagination/pagination-step.tsx
+++ b/src/components/pagination/pagination-step.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const PAGINATION_STEP_DEFAULTS = {
-  alignments: tuple("next", "previous"),
+  alignments: ["next", "previous"] as const,
 };
 
 export interface PaginationStepVariablesOverrides {}
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 2e72b5f3..4b3dc96f 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -5,15 +5,14 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { PaginationEllipsis } from "./pagination-ellipsis";
 import { PaginationLink } from "./pagination-link";
 import { PaginationList } from "./pagination-list";
 import { PaginationStep } from "./pagination-step";
 
 export const PAGINATION_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface PaginationVariablesOverrides {}
diff --git a/src/components/tab/tab-group.tsx b/src/components/tab/tab-group.tsx
index 067b6e46..e40a7ba3 100644
--- a/src/components/tab/tab-group.tsx
+++ b/src/components/tab/tab-group.tsx
@@ -5,12 +5,11 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const TAB_GROUP_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  sizes: tuple("small", "medium", "large"),
-  kinds: tuple("boxed", "toggle", "toggle-rounded"),
+  alignments: ["centered", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
+  kinds: ["boxed", "toggle", "toggle-rounded"] as const,
 };
 
 export interface TabGroupVariablesOverrides {}
diff --git a/src/elements/button/button-group.tsx b/src/elements/button/button-group.tsx
index 75b97401..195587fe 100644
--- a/src/elements/button/button-group.tsx
+++ b/src/elements/button/button-group.tsx
@@ -5,11 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const BUTTON_GROUP_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface ButtonGroupVariablesOverrides {}
diff --git a/src/elements/button/button.tsx b/src/elements/button/button.tsx
index fe2a32b9..a23c76fa 100644
--- a/src/elements/button/button.tsx
+++ b/src/elements/button/button.tsx
@@ -6,12 +6,11 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { ButtonGroup } from "./button-group";
 
 export const BUTTON_DEFAULTS = {
-  sizes: tuple("small", "normal", "medium", "large"),
-  states: tuple("hovered", "focused", "active", "loading"),
+  sizes: ["small", "normal", "medium", "large"] as const,
+  states: ["hovered", "focused", "active", "loading"] as const,
 };
 
 export interface ButtonVariablesOverrides {}
diff --git a/src/elements/content/content-ordered-list.tsx b/src/elements/content/content-ordered-list.tsx
index 0811b3ab..413c2371 100644
--- a/src/elements/content/content-ordered-list.tsx
+++ b/src/elements/content/content-ordered-list.tsx
@@ -5,11 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { ContentOrderedListItem } from "./content-ordered-list-item";
 
 export const CONTENT_ORDERED_LIST_DEFAULTS = {
-  types: tuple("lower-alpha", "lower-roman", "upper-alpha", "upper-roman"),
+  types: ["lower-alpha", "lower-roman", "upper-alpha", "upper-roman"] as const,
 };
 
 export interface ContentOrderedListVariablesOverrides {}
diff --git a/src/elements/content/content.tsx b/src/elements/content/content.tsx
index 9eb697ee..67079830 100644
--- a/src/elements/content/content.tsx
+++ b/src/elements/content/content.tsx
@@ -5,11 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { ContentOrderedList } from "./content-ordered-list";
 
 export const CONTENT_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface ContentVariablesOverrides {}
diff --git a/src/elements/form/control.tsx b/src/elements/form/control.tsx
index e4dec768..0116225e 100644
--- a/src/elements/form/control.tsx
+++ b/src/elements/form/control.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const CONTROL_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface ControlVariablesOverrides {}
diff --git a/src/elements/form/field-label.tsx b/src/elements/form/field-label.tsx
index 74874c87..7a038f0d 100644
--- a/src/elements/form/field-label.tsx
+++ b/src/elements/form/field-label.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const FIELD_LABEL_DEFAULTS = {
-  sizes: tuple("small", "normal", "medium", "large"),
+  sizes: ["small", "normal", "medium", "large"] as const,
 };
 
 export interface FieldLabelVariablesOverrides {}
diff --git a/src/elements/form/field.tsx b/src/elements/form/field.tsx
index fa500f49..7b82932e 100644
--- a/src/elements/form/field.tsx
+++ b/src/elements/form/field.tsx
@@ -5,13 +5,12 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { FieldBody } from "./field-body";
 import { FieldLabel } from "./field-label";
 
 export const FIELD_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  kinds: tuple("addons", "group"),
+  alignments: ["centered", "right"] as const,
+  kinds: ["addons", "group"] as const,
 };
 
 export interface FieldVariablesOverrides {}
diff --git a/src/elements/form/file.tsx b/src/elements/form/file.tsx
index d4604bcc..8ede82e7 100644
--- a/src/elements/form/file.tsx
+++ b/src/elements/form/file.tsx
@@ -6,7 +6,6 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 import { FileCTA } from "./file-cta";
 import { FileIcon } from "./file-icon";
@@ -15,8 +14,8 @@ import { FileLabel } from "./file-label";
 import { FileName } from "./file-name";
 
 export const FILE_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface FileVariablesOverrides {}
diff --git a/src/elements/form/input.tsx b/src/elements/form/input.tsx
index 4a2e6692..410ce151 100644
--- a/src/elements/form/input.tsx
+++ b/src/elements/form/input.tsx
@@ -6,12 +6,11 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const INPUT_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
-  states: tuple("focused", "hovered"),
-  types: tuple(
+  sizes: ["small", "medium", "large"] as const,
+  states: ["focused", "hovered"] as const,
+  types: [
     "text",
     "email",
     "tel",
@@ -21,7 +20,7 @@ export const INPUT_DEFAULTS = {
     "color",
     "date",
     "time",
-  ),
+  ] as const,
 };
 
 export interface InputVariablesOverrides {}
diff --git a/src/elements/form/label.tsx b/src/elements/form/label.tsx
index e0a2bda3..a0a74f46 100644
--- a/src/elements/form/label.tsx
+++ b/src/elements/form/label.tsx
@@ -5,12 +5,11 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { Checkbox } from "./checkbox";
 import { Radio } from "./radio";
 
 export const LABEL_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface LabelVariablesOverrides {}
diff --git a/src/elements/form/select.tsx b/src/elements/form/select.tsx
index ab15a2ca..e3f1e371 100644
--- a/src/elements/form/select.tsx
+++ b/src/elements/form/select.tsx
@@ -6,12 +6,11 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { SelectOption } from "./select-option";
 
 export const SELECT_CONTAINER_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
-  states: tuple("focused", "hovered", "loading"),
+  sizes: ["small", "medium", "large"] as const,
+  states: ["focused", "hovered", "loading"] as const,
 };
 
 export interface SelectContainerVariablesOverrides {}
diff --git a/src/elements/form/textarea.tsx b/src/elements/form/textarea.tsx
index bdc3f8ea..215cb933 100644
--- a/src/elements/form/textarea.tsx
+++ b/src/elements/form/textarea.tsx
@@ -6,11 +6,10 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const TEXTAREA_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
-  states: tuple("focused", "hovered"),
+  sizes: ["small", "medium", "large"] as const,
+  states: ["focused", "hovered"] as const,
 };
 
 export interface TextareaVariablesOverrides {}
diff --git a/src/elements/icon/icon.tsx b/src/elements/icon/icon.tsx
index 336e4a18..5158774f 100644
--- a/src/elements/icon/icon.tsx
+++ b/src/elements/icon/icon.tsx
@@ -6,11 +6,10 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const ICON_DEFAULTS = {
-  alignments: tuple("left", "right"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["left", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface IconVariablesOverrides {}
diff --git a/src/elements/image/image-container.tsx b/src/elements/image/image-container.tsx
index d2bd6dda..ef229cb8 100644
--- a/src/elements/image/image-container.tsx
+++ b/src/elements/image/image-container.tsx
@@ -5,11 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const IMAGE_CONTAINER_DEFAULTS = {
-  dimmensions: tuple(16, 24, 32, 48, 64, 96, 128),
-  ratios: tuple(
+  dimmensions: [16, 24, 32, 48, 64, 96, 128] as const,
+  ratios: [
     "16by9",
     "1by1",
     "1by2",
@@ -26,7 +25,7 @@ export const IMAGE_CONTAINER_DEFAULTS = {
     "5by4",
     "9by16",
     "square",
-  ),
+  ] as const,
 };
 
 export interface ImageContainerVariablesOverrides {}
diff --git a/src/elements/other/delete.tsx b/src/elements/other/delete.tsx
index 9e09aa3f..c864670d 100644
--- a/src/elements/other/delete.tsx
+++ b/src/elements/other/delete.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const DELETE_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface DeleteVariablesOverrides {}
diff --git a/src/elements/progress/progress.tsx b/src/elements/progress/progress.tsx
index fe6287af..e57f6c07 100644
--- a/src/elements/progress/progress.tsx
+++ b/src/elements/progress/progress.tsx
@@ -6,10 +6,9 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const PROGRESS_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface ProgressVariablesOverrides {}
diff --git a/src/elements/tag/tag-group.tsx b/src/elements/tag/tag-group.tsx
index a2c6d91d..981e221d 100644
--- a/src/elements/tag/tag-group.tsx
+++ b/src/elements/tag/tag-group.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const TAG_GROUP_DEFAULTS = {
-  sizes: tuple("medium", "large"),
+  sizes: ["medium", "large"] as const,
 };
 
 export interface TagGroupVariablesOverrides {}
diff --git a/src/elements/tag/tag.tsx b/src/elements/tag/tag.tsx
index ef79eafd..d3cd9676 100644
--- a/src/elements/tag/tag.tsx
+++ b/src/elements/tag/tag.tsx
@@ -6,11 +6,10 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { TagGroup } from "./tag-group";
 
 export const TAG_DEFAULTS = {
-  sizes: tuple("normal", "medium", "large"),
+  sizes: ["normal", "medium", "large"] as const,
 };
 
 export interface TagVariablesOverrides {}
diff --git a/src/elements/title/title.tsx b/src/elements/title/title.tsx
index f5355e2d..4ea0e7e9 100644
--- a/src/elements/title/title.tsx
+++ b/src/elements/title/title.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const TITLE_DEFAULTS = {
-  sizes: tuple(1, 2, 3, 4, 5, 6),
+  sizes: [1, 2, 3, 4, 5, 6] as const,
 };
 
 export interface TitleVariablesOverrides {}
diff --git a/src/extensions/index.ts b/src/extensions/index.ts
index 371bd813..ba9b1cef 100644
--- a/src/extensions/index.ts
+++ b/src/extensions/index.ts
@@ -1,3 +1,2 @@
-export { Badge } from "./badge";
 export { Divider } from "./divider";
 export { PageLoader } from "./page-loader";
diff --git a/src/extensions/page-loader/page-loader.tsx b/src/extensions/page-loader/page-loader.tsx
index 61da57e7..481c4ab4 100644
--- a/src/extensions/page-loader/page-loader.tsx
+++ b/src/extensions/page-loader/page-loader.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
-import { tuple } from "../../utils";
 
 export const PAGE_LOADER_DEFAULTS = {
-  directions: tuple("right-to-left", "left-to-right"),
+  directions: ["right-to-left", "left-to-right"] as const,
 };
 
 export type PageLoaderModifierProps = Partial<{
diff --git a/src/grid/columns/column-group.tsx b/src/grid/columns/column-group.tsx
index 1c2f8b59..3abecdc2 100644
--- a/src/grid/columns/column-group.tsx
+++ b/src/grid/columns/column-group.tsx
@@ -6,10 +6,9 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { DEFAULTS, Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const COLUMN_GROUP_DEFAULTS = {
-  gapSizes: tuple(0, 1, 2, 3, 4, 5, 6, 7, 8),
+  gapSizes: [0, 1, 2, 3, 4, 5, 6, 7, 8] as const,
 };
 
 export interface ColumnGroupVariablesOverrides {}
diff --git a/src/grid/columns/column.tsx b/src/grid/columns/column.tsx
index 4469f0c5..bb76d34d 100644
--- a/src/grid/columns/column.tsx
+++ b/src/grid/columns/column.tsx
@@ -6,11 +6,10 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { DEFAULTS, Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { ColumnGroup } from "./column-group";
 
 export const COLUMN_DEFAULTS = {
-  sizes: tuple(
+  sizes: [
     0,
     1,
     2,
@@ -34,7 +33,7 @@ export const COLUMN_DEFAULTS = {
     "three-fifths",
     "four-fifths",
     "full",
-  ),
+  ] as const,
 };
 
 export interface ColumnVariablesOverrides {}
diff --git a/src/grid/tiles/tile.tsx b/src/grid/tiles/tile.tsx
index d8a4eefe..709fe51e 100644
--- a/src/grid/tiles/tile.tsx
+++ b/src/grid/tiles/tile.tsx
@@ -5,11 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const TILE_DEFAULTS = {
-  kinds: tuple("ancestor", "parent", "child"),
-  sizes: tuple(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
+  kinds: ["ancestor", "parent", "child"] as const,
+  sizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const,
 };
 
 export interface TileVariablesOverrides {}
diff --git a/src/layout/hero/hero.tsx b/src/layout/hero/hero.tsx
index f3070f79..d9f4a120 100644
--- a/src/layout/hero/hero.tsx
+++ b/src/layout/hero/hero.tsx
@@ -6,19 +6,18 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { HeroBody } from "./hero-body";
 import { HeroFoot } from "./hero-foot";
 import { HeroHead } from "./hero-head";
 
 export const HERO_DEFAULTS = {
-  sizes: tuple(
+  sizes: [
     "small",
     "medium",
     "large",
     "fullheight",
     "fullheight-with-navbar",
-  ),
+  ] as const,
 };
 
 export interface HeroVariablesOverrides {}
diff --git a/src/layout/section/section.tsx b/src/layout/section/section.tsx
index 702cb25a..3c67867c 100644
--- a/src/layout/section/section.tsx
+++ b/src/layout/section/section.tsx
@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const SECTION_DEFAULTS = {
-  sizes: tuple("medium", "large"),
+  sizes: ["medium", "large"] as const,
 };
 
 export interface SectionVariablesOverrides {}
diff --git a/src/types.ts b/src/types.ts
index e1c76d3a..cf84e83d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,3 @@
-export type Lit = string | number | boolean | undefined | null | void | {};
 export type Prefer<P, T> = P & Omit<T, keyof P>;
 
 // https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type/50375286#50375286
diff --git a/src/utils.ts b/src/utils.ts
index 33d828cd..eb9718d8 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Lit } from "./types";
-
 export const canUseDOM = () =>
   !(
     typeof window === "undefined" || // tslint:disable-line:no-typeof-undefined
@@ -28,5 +26,3 @@ export const combineRefs = <T>(
 };
 
 export const noop = () => {}; // tslint:disable-line:no-empty
-
-export const tuple = <T extends Lit[]>(...args: T) => args;