diff --git a/src/components/buttons.js b/src/components/buttons.js
new file mode 100644
index 00000000..47149cc5
--- /dev/null
+++ b/src/components/buttons.js
@@ -0,0 +1,131 @@
+import classnames from 'classnames';
+
+import { SvgIcon } from './SvgIcon';
+
+/**
+ * @typedef ButtonProps
+ * @prop {import("preact").ComponentChildren} [children]
+ * @prop {string} [className]
+ * @prop {string} [icon] - Name of `SvgIcon` to render in the button
+ * @prop {'left'|'right'} [iconPosition] - Icon positioned to left or to
+ *   right of button text
+ * @prop {boolean} [disabled]
+ * @prop {boolean} [expanded] - Is the element associated with this button
+ *   expanded (set `aria-expanded`)
+ * @prop {boolean} [pressed] - Is this button currently "active?" (set
+ *   `aria-pressed`)
+ * @prop {() => any} [onClick]
+ * @prop {'small'|'medium'|'large'} [size='medium'] - Relative button size:
+ *   affects padding
+ * @prop {Object} [style] - Optional inline styles
+ * @prop {string} [title] - Button title; used for `aria-label` attribute
+ * @prop {'normal'|'primary'|'light'|'dark'} [variant='normal'] - For styling: element variant
+ */
+
+/**
+ * @typedef IconButtonBaseProps
+ * @prop {string} icon - Icon is required for icon buttons
+ * @prop {string} title - Title is required for icon buttons
+ */
+
+/**
+ * @typedef {ButtonProps & IconButtonBaseProps} IconButtonProps
+ */
+
+/**
+ * @param {ButtonProps} props
+ */
+function ButtonBase({
+  children,
+  className,
+  icon,
+  iconPosition = 'left',
+  disabled,
+  expanded,
+  pressed,
+  onClick = () => {},
+  size = 'medium',
+  style = {},
+  title,
+  variant = 'normal',
+}) {
+  const otherAttributes = {};
+  if (typeof disabled === 'boolean') {
+    otherAttributes.disabled = disabled;
+  }
+  if (typeof title !== 'undefined') {
+    otherAttributes.title = title;
+    otherAttributes['aria-label'] = title;
+  }
+
+  if (typeof expanded === 'boolean') {
+    otherAttributes['aria-expanded'] = expanded;
+  }
+  if (typeof pressed === 'boolean') {
+    otherAttributes['aria-pressed'] = pressed;
+  }
+
+  return (
+    <button
+      className={classnames(
+        className,
+        `${className}--${size}`,
+        `${className}--${variant}`,
+        {
+          [`${className}--icon-${iconPosition}`]: icon,
+        }
+      )}
+      onClick={onClick}
+      {...otherAttributes}
+      style={style}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * An icon-only button
+ *
+ * @param {IconButtonProps} props
+ */
+export function IconButton(props) {
+  const { className = 'IconButton', ...restProps } = props;
+  const { icon } = props;
+  return (
+    <ButtonBase className={className} {...restProps}>
+      <SvgIcon name={icon} />
+    </ButtonBase>
+  );
+}
+
+/**
+ * A labeled button, with or without an icon
+ *
+ * @param {ButtonProps} props
+ */
+export function LabeledButton(props) {
+  const { icon, iconPosition = 'left' } = props;
+  const { children, className = 'LabeledButton', ...restProps } = props;
+  return (
+    <ButtonBase className={className} {...restProps}>
+      {icon && iconPosition === 'left' && <SvgIcon name={icon} />}
+      {children}
+      {icon && iconPosition === 'right' && <SvgIcon name={icon} />}
+    </ButtonBase>
+  );
+}
+
+/**
+ * A button styled to appear as an HTML link (<a>)
+ *
+ * @param {ButtonProps} props
+ */
+export function LinkButton(props) {
+  const { children } = props;
+  return (
+    <ButtonBase className="LinkButton" {...props}>
+      {children}
+    </ButtonBase>
+  );
+}
diff --git a/src/components/test/buttons-test.js b/src/components/test/buttons-test.js
new file mode 100644
index 00000000..1b7afe2b
--- /dev/null
+++ b/src/components/test/buttons-test.js
@@ -0,0 +1,257 @@
+import { mount } from 'enzyme';
+
+import { IconButton, LabeledButton, LinkButton } from '../buttons.js';
+import { $imports } from '../buttons.js';
+
+import { checkAccessibility } from '../../../test/util/accessibility';
+import mockImportedComponents from '../../../test/util/mock-imported-components';
+
+// Add common tests for a button component for stuff provided by `ButtonBase`
+function addCommonTests({ componentName, createComponentFn, withIcon = true }) {
+  describe(`${componentName} common support`, () => {
+    if (withIcon) {
+      it('renders the indicated icon', () => {
+        const wrapper = createComponentFn({ icon: 'fakeIcon' });
+        const button = wrapper.find('button');
+        const icon = wrapper.find('SvgIcon');
+        assert.equal(icon.prop('name'), 'fakeIcon');
+        // Icon is positioned "left" even if it is the only element in the <button>
+        assert.isTrue(button.hasClass(`${componentName}--icon-left`));
+      });
+    }
+
+    it('invokes callback on click', () => {
+      const onClick = sinon.stub();
+      const wrapper = createComponentFn({ onClick });
+
+      wrapper.find('button').simulate('click');
+      assert.calledOnce(onClick);
+    });
+
+    it('uses an internal no-op callback if no `onClick` is provided', () => {
+      // This test merely exercises the `onClick` prop default-value branch
+      // in the code
+      const wrapper = createComponentFn({ onClick: undefined });
+      wrapper.find('button').simulate('click');
+    });
+
+    it('uses a default className', () => {
+      const wrapper = createComponentFn();
+
+      assert.isTrue(wrapper.find('button').hasClass(componentName));
+    });
+
+    ['primary', 'light', 'dark'].forEach(variant => {
+      it('renders a valid variant', () => {
+        const wrapper = createComponentFn({ variant });
+
+        assert.isTrue(
+          wrapper.find('button').hasClass(`${componentName}--${variant}`)
+        );
+      });
+    });
+
+    it('sets a `normal` variant modifier class by default', () => {
+      const wrapper = createComponentFn();
+
+      assert.isTrue(
+        wrapper.find('button').hasClass(`${componentName}--normal`)
+      );
+    });
+
+    ['small', 'medium', 'large'].forEach(size => {
+      it('renders a valid size', () => {
+        const wrapper = createComponentFn({ size });
+
+        assert.isTrue(
+          wrapper.find('button').hasClass(`${componentName}--${size}`)
+        );
+      });
+    });
+
+    it('sets a `medium` size modifier class by default', () => {
+      const wrapper = createComponentFn();
+
+      assert.isTrue(
+        wrapper.find('button').hasClass(`${componentName}--medium`)
+      );
+    });
+
+    it('overrides className when provided', () => {
+      const wrapper = createComponentFn({
+        className: 'CustomClassName',
+        variant: 'primary',
+      });
+
+      assert.isTrue(wrapper.find('button').hasClass('CustomClassName'));
+      assert.isTrue(
+        wrapper.find('button').hasClass('CustomClassName--primary')
+      );
+      assert.isFalse(wrapper.find('button').hasClass(componentName));
+    });
+
+    it('adds inline styles when provided', () => {
+      const wrapper = createComponentFn({ style: { backgroundColor: 'pink' } });
+
+      assert.equal(
+        wrapper.getDOMNode().getAttribute('style'),
+        'background-color: pink;'
+      );
+    });
+
+    [
+      {
+        propName: 'expanded',
+        propValue: true,
+        attributeName: 'aria-expanded',
+        attributeValue: 'true',
+      },
+      {
+        propName: 'pressed',
+        propValue: true,
+        attributeName: 'aria-pressed',
+        attributeValue: 'true',
+      },
+      {
+        propName: 'title',
+        propValue: 'Click here',
+        attributeName: 'aria-label',
+        attributeValue: 'Click here',
+      },
+      {
+        propName: 'disabled',
+        propValue: true,
+        attributeName: 'disabled',
+        attributeValue: '',
+      },
+    ].forEach(testCase => {
+      it('sets attributes on the button element', () => {
+        const wrapper = createComponentFn({
+          [testCase.propName]: testCase.propValue,
+        });
+
+        const element = wrapper.find('button').getDOMNode();
+
+        assert.equal(
+          element.getAttribute(testCase.attributeName),
+          testCase.attributeValue
+        );
+      });
+    });
+  });
+}
+
+describe('buttons', () => {
+  let fakeOnClick;
+
+  beforeEach(() => {
+    fakeOnClick = sinon.stub();
+    $imports.$mock(mockImportedComponents());
+  });
+
+  afterEach(() => {
+    $imports.$restore();
+  });
+
+  describe('IconButton', () => {
+    function createComponent(props = {}) {
+      return mount(
+        <IconButton
+          icon="fakeIcon"
+          title="My Action"
+          onClick={fakeOnClick}
+          {...props}
+        />
+      );
+    }
+
+    addCommonTests({
+      componentName: 'IconButton',
+      createComponentFn: createComponent,
+    });
+
+    it(
+      'should pass a11y checks',
+      checkAccessibility({
+        content: () => createComponent(),
+      })
+    );
+  });
+
+  describe('LabeledButton', () => {
+    function createComponent(props = {}) {
+      return mount(
+        <LabeledButton title="My Action" onClick={fakeOnClick} {...props}>
+          Do this
+        </LabeledButton>
+      );
+    }
+
+    addCommonTests({
+      componentName: 'LabeledButton',
+      createComponentFn: createComponent,
+    });
+
+    it('renders the indicated icon on the right if `iconPosition` is `right`', () => {
+      const wrapper = createComponent({
+        icon: 'fakeIcon',
+        iconPosition: 'right',
+      });
+
+      const icon = wrapper.find('SvgIcon');
+      const button = wrapper.find('button');
+      assert.equal(icon.prop('name'), 'fakeIcon');
+      assert.isTrue(button.hasClass('LabeledButton--icon-right'));
+    });
+
+    it('does not render an icon if none indicated', () => {
+      // Icon not required for `LabeledButton`
+      const wrapper = createComponent();
+
+      const icon = wrapper.find('SvgIcon');
+      assert.isFalse(icon.exists());
+    });
+
+    it('renders children', () => {
+      const wrapper = createComponent();
+
+      assert.equal(wrapper.text(), 'Do this');
+    });
+
+    it(
+      'should pass a11y checks',
+      checkAccessibility({
+        content: () => createComponent(),
+      })
+    );
+  });
+
+  describe('LinkButton', () => {
+    function createComponent(props = {}) {
+      return mount(
+        <LinkButton title="My Action" onClick={fakeOnClick} {...props}>
+          Do this
+        </LinkButton>
+      );
+    }
+
+    addCommonTests({
+      componentName: 'LinkButton',
+      createComponentFn: createComponent,
+      withIcon: false,
+    });
+
+    it('renders children', () => {
+      const wrapper = createComponent();
+
+      assert.equal(wrapper.text(), 'Do this');
+    });
+
+    it(
+      'should pass a11y checks',
+      checkAccessibility({
+        content: () => createComponent(),
+      })
+    );
+  });
+});
diff --git a/src/index.js b/src/index.js
index 55667a61..12682608 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 // Components
+export { IconButton, LabeledButton, LinkButton } from './components/buttons';
 export { SvgIcon, registerIcons } from './components/SvgIcon';
 
 // Hooks
diff --git a/styles/_index.scss b/styles/_index.scss
index 971bf21a..e8584419 100644
--- a/styles/_index.scss
+++ b/styles/_index.scss
@@ -4,3 +4,4 @@
 // @use '@hypothesis/frontend-shared/styles'
 
 @use './components/SvgIcon';
+@use './components/buttons/styles';
diff --git a/styles/components/buttons/_base.scss b/styles/components/buttons/_base.scss
new file mode 100644
index 00000000..cdddce87
--- /dev/null
+++ b/styles/components/buttons/_base.scss
@@ -0,0 +1,109 @@
+@use "sass:map";
+
+// Set colors for a button
+@mixin _colors($colormap) {
+  color: map.get($colormap, 'foreground');
+  background-color: map.get($colormap, 'background');
+
+  &:disabled {
+    color: map.get($colormap, 'disabled-foreground');
+  }
+}
+
+// Set hover colors and transition for a button
+@mixin _hover-state($colormap) {
+  &:hover:not([disabled]) {
+    color: map.get($colormap, 'hover-foreground');
+    background-color: map.get($colormap, 'hover-background');
+  }
+  transition: color 0.2s ease-out, background-color 0.2s ease-out,
+    opacity 0.2s ease-out;
+}
+
+// Set active state colors for a button
+@mixin _active-state($colormap) {
+  &[aria-expanded='true'],
+  &[aria-pressed='true'] {
+    color: map.get($colormap, 'active-foreground');
+    @if map.get($colormap, 'active-background') {
+      background-color: map.get($colormap, 'active-background');
+    }
+
+    &:hover:not([disabled]) {
+      color: map.get($colormap, 'hover-foreground');
+    }
+
+    &:focus:not([disabled]) {
+      color: map.get($colormap, 'active-foreground');
+    }
+  }
+}
+
+// Variant mixin: may be be used by variants (BEM modifier classes)
+@mixin button--variant($options) {
+  @include _colors(map.get($options, 'colormap'));
+  @if map.get($options, 'withStates') {
+    @include _active-state(map.get($options, 'colormap'));
+    @include _hover-state(map.get($options, 'colormap'));
+  }
+  @content;
+}
+
+// Base mixin for buttons.
+@mixin button($options) {
+  @include _colors(map.get($options, 'colormap'));
+
+  @if map.get($options, 'withStates') {
+    @include _active-state(map.get($options, 'colormap'));
+    @include _hover-state(map.get($options, 'colormap'));
+  }
+
+  border-radius: map.get($options, 'border-radius');
+  border: none;
+  padding: 0.5em;
+
+  &--small {
+    padding: 0.25em;
+  }
+
+  &--large {
+    padding: 0.75em;
+  }
+
+  font-size: 1em;
+  font-weight: 700;
+  white-space: nowrap; // Keep multi-word button labels from wrapping
+
+  @if map.get($options, 'inline') {
+    display: inline;
+  } @else {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @if map.get($options, 'withLayout') {
+    &--icon-left svg {
+      margin-right: map.get($options, 'margin');
+    }
+
+    &--icon-right svg {
+      margin-left: map.get($options, 'margin');
+    }
+    // When a button has "layout", that indicates it has some textual content:
+    // Size text to the contextual 1em, and adjust the icon to look balanced.
+    // H frontend app buttons tend to apply an icon:text ratio of ~1.25:1
+    svg {
+      width: 1.25em;
+      height: 1.25em;
+    }
+  } @else {
+    // In the case where an icon is the only content in a <button> element,
+    // size the icon based on contextual font-size. i.e. the icon IS
+    // the content
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}
diff --git a/styles/components/buttons/_config.scss b/styles/components/buttons/_config.scss
new file mode 100644
index 00000000..4c679b45
--- /dev/null
+++ b/styles/components/buttons/_config.scss
@@ -0,0 +1,149 @@
+@use 'sass:map';
+@use '../../variables' as var;
+
+// Map variables to local tokens
+$touch-target-size: var.$touch-target-size !default;
+
+$color-g1: var.$color-grey-1 !default;
+$color-g2: var.$color-grey-2 !default;
+$color-g3: var.$color-grey-3 !default;
+$color-g4: var.$color-grey-4 !default;
+$color-g6: var.$color-grey-6 !default;
+$color-g7: var.$color-grey-7 !default;
+$color-gsemi: var.$color-grey-semi !default;
+$color-gmid: var.$color-grey-mid !default;
+$color-brand: var.$color-brand !default;
+$color-link-hover: var.$color-link-hover !default;
+
+// Colors for labeled buttons
+$LabeledButton-colors: (
+  'foreground': $color-gmid,
+  'background': $color-g1,
+  'hover-foreground': $color-g7,
+  'hover-background': $color-g2,
+  'active-foreground': $color-g7,
+  'disabled-foreground': $color-gmid,
+);
+
+// Variant currently unused
+$LabeledButton-colors--light: $LabeledButton-colors;
+
+$LabeledButton-colors--primary: (
+  'foreground': $color-g1,
+  'background': $color-gmid,
+  'hover-foreground': $color-g1,
+  'hover-background': $color-g6,
+  'active-foreground': $color-g1,
+  'disabled-foreground': $color-g4,
+);
+
+$LabeledButton-colors--dark: (
+  'foreground': $color-gmid,
+  'background': transparent,
+  'hover-foreground': $color-g7,
+  'hover-background': $color-g3,
+  'active-foreground': $color-gmid,
+  'active-background': $color-g3,
+  'disabled-foreground': $color-gmid,
+);
+
+// Colors for icon-only buttons
+$IconButton-colors: (
+  'foreground': $color-gmid,
+  'background': transparent,
+  'hover-foreground': $color-g7,
+  'hover-background': transparent,
+  'active-foreground': $color-brand,
+  'disabled-foreground': $color-gmid,
+);
+
+$IconButton-colors--light: (
+  'foreground': $color-gsemi,
+  'background': transparent,
+  'hover-foreground': $color-g6,
+  'hover-background': transparent,
+  'active-foreground': $color-gsemi,
+  'disabled-foreground': $color-gsemi,
+);
+
+$IconButton-colors--primary: (
+  'foreground': $color-brand,
+  'background': transparent,
+  'hover-foreground': $color-brand,
+  'hover-background': transparent,
+  'active-foreground': $color-brand,
+  'disabled-foreground': $color-gmid,
+);
+
+// Variant currently unused
+$IconButton-colors--dark: $IconButton-colors;
+
+// Colors for buttons styled as "links"
+$LinkButton-colors: (
+  'foreground': $color-gmid,
+  'background': transparent,
+  'hover-foreground': $color-link-hover,
+  'hover-background': transparent,
+  'active-foreground': $color-g7,
+  'disabled-foreground': $color-gmid,
+);
+
+// Variant currently unused
+$LinkButton-colors--light: $LinkButton-colors;
+
+$LinkButton-colors--primary: (
+  'foreground': $color-brand,
+  'background': transparent,
+  'hover-foreground': $color-brand,
+  'hover-background': transparent,
+  'active-foreground': $color-brand,
+  'disabled-foreground': $color-gmid,
+);
+
+$LinkButton-colors--dark: (
+  'foreground': $color-g7,
+  'background': transparent,
+  'hover-foreground': $color-link-hover,
+  'hover-background': transparent,
+  'active-foreground': $color-g7,
+  'disabled-foreground': $color-gmid,
+);
+
+$-IconButton: (
+  'normal': $IconButton-colors,
+  'primary': $IconButton-colors--primary,
+  'dark': $IconButton-colors--dark,
+  'light': $IconButton-colors--light,
+);
+
+$-LabeledButton: (
+  'normal': $LabeledButton-colors,
+  'primary': $LabeledButton-colors--primary,
+  'dark': $LabeledButton-colors--dark,
+  'light': $LabeledButton-colors--light,
+);
+
+$-LinkButton: (
+  'normal': $LinkButton-colors,
+  'primary': $LinkButton-colors--primary,
+  'dark': $LinkButton-colors--dark,
+  'light': $LinkButton-colors--light,
+);
+
+// Return a color map corresponding to a button component-variant combination
+// Defaults to `LabeledButton--normal`
+@function colors-for($button-type: 'LabeledButton', $variant: 'normal') {
+  $colors: map.get($-LabeledButton, 'normal');
+
+  @if $button-type == 'IconButton' {
+    $colors: map.get($-IconButton, $variant);
+  }
+  @if $button-type == 'LabeledButton' {
+    $colors: map.get($-LabeledButton, $variant);
+  }
+  @if $button-type == 'LinkButton' {
+    $colors: map.get($-LinkButton, $variant);
+  }
+
+  @return $colors;
+}
diff --git a/styles/components/buttons/_index.scss b/styles/components/buttons/_index.scss
new file mode 100644
index 00000000..972ef1f1
--- /dev/null
+++ b/styles/components/buttons/_index.scss
@@ -0,0 +1,2 @@
+@forward 'config' show colors-for;
+@forward 'mixins' show reset, Button, IconButton, LabeledButton, LinkButton;
diff --git a/styles/components/buttons/_mixins.scss b/styles/components/buttons/_mixins.scss
new file mode 100644
index 00000000..dca21750
--- /dev/null
+++ b/styles/components/buttons/_mixins.scss
@@ -0,0 +1,149 @@
+@use "sass:map";
+
+@use '../../mixins/focus';
+
+@use 'config' as c;
+@use 'base';
+
+// Basic reset for browser-imposed button styles
+@mixin reset {
+  @include focus.outline-on-keyboard-focus;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border-style: none;
+}
+
+// Base mixin for <button> elements
+@mixin Button($options: ()) {
+  $defaultOptions: (
+    // What colors should be used for this button's styling?
+    'colormap': c.$LabeledButton-colors,
+    // And for its variants...needed if `withVariants` is true (true is default)
+    'colormap--primary': c.$LabeledButton-colors--primary,
+    'colormap--dark': c.$LabeledButton-colors--dark,
+    'colormap--light': c.$LabeledButton-colors--light,
+    // Should this button apply an inline layout? (default is flex)
+    'inline': false,
+    // Should styling be added for "active" and "hover" states for this <button>?
+    'withStates': true,
+    // Should styling be added to support the layout of multiple sub-elements
+    // of this <button>? Not needed if <button> contains only one child.
+    'withLayout': false,
+    // Provide styling for light, primary and dark variants? If this is true,
+    // make sure all variant colormaps are provided
+    'withVariants': true,
+    // Internal margin around SVG icon
+    'margin': 0.5em,
+    'border-radius': 2px
+  );
+  $-options: map.merge($defaultOptions, $options);
+
+  @include reset;
+  @include base.button($options: $-options);
+
+  // Add styles for supported variants as modifier classes, if `withVariants` enabled
+  @if (map.get($-options, 'withVariants')) {
+    &--light {
+      $-light-options: (
+        'colormap': map.get($-options, 'colormap--light'),
+        'withStates': map.get($-options, 'withStates'),
+      );
+      @include base.button--variant($-light-options);
+    }
+
+    &--primary {
+      $-primary-options: (
+        'colormap': map.get($-options, 'colormap--primary'),
+        'withStates': map.get($-options, 'withStates'),
+      );
+      @include base.button--variant($-primary-options);
+    }
+
+    &--dark {
+      $-dark-options: (
+        'colormap': map.get($-options, 'colormap--dark'),
+        'withStates': map.get($-options, 'withStates'),
+      );
+      @include base.button--variant($-dark-options);
+    }
+  }
+  @content;
+}
+
+// Base mixin for a button with an icon and no label/content. Supports
+// variants and sizes. Will assert responsive touch-target sizing in
+// --medium (default) and --large variants.
+@mixin IconButton($options: ()) {
+  $defaultOptions: (
+    'colormap': c.$IconButton-colors,
+    'colormap--light': c.$IconButton-colors--light,
+    'colormap--primary': c.$IconButton-colors--primary,
+    'colormap--dark': c.$IconButton-colors--dark,
+    'responsive': true,
+  );
+  $-options: map.merge($defaultOptions, $options);
+
+  @include Button($-options) {
+    // Establish a minimum touch-target for touch devices if 'responsive'
+    // option is enabled (default). This is not applied to the `--small`
+    // size variant.
+    @if map.get($-options, 'responsive') {
+      @media (pointer: coarse) {
+        &--medium,
+        &--large {
+          min-width: c.$touch-target-size;
+          min-height: c.$touch-target-size;
+        }
+      }
+    }
+  }
+
+  @content;
+}
+
+// Base mixin for a button that has text/content and, optionally, an icon.
+// Supports variants and sizes.
+@mixin LabeledButton($options: ()) {
+  $defaultOptions: (
+    'colormap': c.$LabeledButton-colors,
+    'colormap--light': c.$LabeledButton-colors--light,
+    'colormap--primary': c.$LabeledButton-colors--primary,
+    'colormap--dark': c.$LabeledButton-colors--dark,
+    'withLayout': true,
+  );
+  $-options: map.merge($defaultOptions, $options);
+
+  @include Button($-options);
+
+  @content;
+}
+
+// Base mixin for a button styled to look like an <a> link. Supports variants
+// but not pressed/active states at present.
+@mixin LinkButton($options: ()) {
+  $defaultOptions: (
+    'colormap': c.$LinkButton-colors,
+    'colormap--light': c.$LinkButton-colors--light,
+    'colormap--primary': c.$LinkButton-colors--primary,
+    'colormap--dark': c.$LinkButton-colors--dark,
+  );
+  $-options: map.merge($defaultOptions, $options);
+  @include Button($-options) {
+    // Lighter font weight for link-styled buttons
+    font-weight: 400;
+    // Add an underline on hover
+    &:hover:not([disabled]) {
+      text-decoration: underline;
+    }
+
+    &--primary {
+      // Primary variant has bolder text (and also different colors)
+      font-weight: 500;
+    }
+  }
+
+  // Remove padding to allow button to appear flush with surrounding content
+  padding: 0;
+  @content;
+}
diff --git a/styles/components/buttons/_styles.scss b/styles/components/buttons/_styles.scss
new file mode 100644
index 00000000..29f840a5
--- /dev/null
+++ b/styles/components/buttons/_styles.scss
@@ -0,0 +1,16 @@
+@use 'mixins';
+
+// A button with text, and optionally an icon
+.LabeledButton {
+  @include mixins.LabeledButton;
+}
+
+// A button with only an icon and no label/text
+.IconButton {
+  @include mixins.IconButton;
+}
+
+// A button styled to appear as a link, with underline on hover
+.LinkButton {
+  @include mixins.LinkButton;
+}
diff --git a/styles/variables.scss b/styles/variables.scss
deleted file mode 100644
index 16a1ea14..00000000
--- a/styles/variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Other colors
-$color-focus-outline: #51a7e8;
diff --git a/styles/variables/_colors.scss b/styles/variables/_colors.scss
new file mode 100644
index 00000000..a8558769
--- /dev/null
+++ b/styles/variables/_colors.scss
@@ -0,0 +1,39 @@
+// Greys (layout colors)
+// These may be used for non-textual styling of components and elements
+$white: #fff !default;
+
+// Interim color variable for migration purposes.
+// Used as very-subtle background color for form fields. $grey-1 is too dark.
+$grey-0: #fafafa;
+
+$grey-1: #f2f2f2;
+$grey-2: #ececec;
+
+$grey-3: #dbdbdb;
+
+$grey-4: #a6a6a6;
+
+// Interim color variable for migration purposes, as the step between `$grey-4`
+// and `$grey-5` is large. Represents `base-semi` in proposed future palette,
+// minus blue tint.
+$grey-semi: #9c9c9c;
+
+// This is the lightest grey admissible on a white, $grey-0 or $grey-1
+// background to meet WCAG-AA text contrast requirements.
+$grey-5: #737373;
+
+// Interim color variable for migration purposes, as the step between `$grey-5`
+// and `$grey-6` is large. Represents `base-mid` in proposed future palette,
+// minus blue tint.
+// This is the lightest grey admissible on $grey-2, $grey-3
+$grey-mid: #595959;
+
+$grey-6: #3f3f3f;
+
+$grey-7: #202020;
+
+$brand: #bd1c2b;
+
+$link-hover: #84141e !default;
+
+$focus-outline: #51a7e8;
diff --git a/styles/variables/_index.scss b/styles/variables/_index.scss
new file mode 100644
index 00000000..a7a14bfb
--- /dev/null
+++ b/styles/variables/_index.scss
@@ -0,0 +1,7 @@
+@forward 'colors' as color-*;
+
+$border-radius: 2px;
+
+// Minimum recommended size for tap targets on mobile.
+// This value originated from Apple's Human Interface Guidelines.
+$touch-target-size: 44px;