diff --git a/package.json b/package.json
index e255e120..d393bde9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.22",
+  "version": "0.9.23",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/src/card/styles.ts b/src/card/styles.ts
index 75f7595e..0a0e69d1 100644
--- a/src/card/styles.ts
+++ b/src/card/styles.ts
@@ -4,10 +4,10 @@ import theme from '../theme';
 export const cardCSS = css`
   display: flex;
   flex-direction: column;
-  background-color: ${theme.components.card.backgroundColor};
+  background-color: var(--ac-global-background-color-dark);
   color: ${theme.textColors.white90};
-  border-radius: 8px;
-  border: 1px solid ${theme.components.card.borderColor};
+  border-radius: var(--ac-global-rounding-medium);
+  border: 1px solid var(--ac-global-border-color-dark);
   overflow: hidden;
   /* variant variables */
   &.ac-card--default {
@@ -19,7 +19,7 @@ export const cardCSS = css`
 `;
 
 const headerBorderCSS = css`
-  border-bottom: 1px solid ${theme.components.card.borderColor};
+  border-bottom: 1px solid var(--ac-global-border-color-dark);
 `;
 
 export const headerCSS = ({
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
index 9f8291d5..51b5d19f 100644
--- a/src/provider/GlobalStyles.tsx
+++ b/src/provider/GlobalStyles.tsx
@@ -60,6 +60,26 @@ export const globalCSS = css`
     --ac-global-dimension-static-grid-columns: 12;
     --ac-global-dimension-static-grid-fluid-width: 100%;
     --ac-global-dimension-static-grid-fixed-max-width: 1280px;
+
+    /* Colors */
+    --ac-global-color-gray-900: #181b1f;
+    --ac-global-color-gray-800: #1d2126;
+    --ac-global-color-gray-700: #23282e;
+    --ac-global-color-gray-600: #282e35;
+    --ac-global-color-gray-500: #2f353d;
+    --ac-global-color-gray-400: #3d434a;
+    --ac-global-color-gray-300: #4a5057;
+    --ac-global-color-gray-200: #585d64;
+    --ac-global-color-gray-100: #666b71;
+
+    --ac-global-background-color-light: var(--ac-global-color-gray-500);
+    --ac-global-background-color-dark: var(--ac-global-color-gray-900);
+
+    --ac-global-border-color-light: var(--ac-global-color-gray-100);
+    --ac-global-border-color-dark: var(--ac-global-color-gray-400);
+
+    --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
+    --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
   }
 `;
 
diff --git a/src/types/core.ts b/src/types/core.ts
index ee808af8..a6996c85 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -86,4 +86,12 @@ export type DimensionValue =
   | 'single-line-height'
   | 'single-line-width'
   | number
-  | string;
+  // This allows autocomplete to work properly and not collapse the above options into just `string`.
+  // https://github.com/microsoft/TypeScript/issues/29729.
+  | (string & {});
+
+export type BorderRadiusValue = 'small' | 'medium';
+
+export type BorderColorValue = 'light' | 'dark';
+
+export type BackgroundColorValue = 'light' | 'dark';
diff --git a/src/view/View.tsx b/src/view/View.tsx
new file mode 100644
index 00000000..86b19d14
--- /dev/null
+++ b/src/view/View.tsx
@@ -0,0 +1,80 @@
+import React, { JSXElementConstructor, ReactNode, forwardRef } from 'react';
+import { css } from '@emotion/react';
+import {
+  BackgroundColorValue,
+  BorderColorValue,
+  BorderRadiusValue,
+  DOMRef,
+  DimensionValue,
+} from '../types';
+import { useDOMRef } from '../utils';
+import { dimensionValue } from '../utils/styleProps';
+
+export interface ViewProps {
+  /**
+   * The children to be displayed in the View.
+   */
+  children?: ReactNode;
+  /**
+   * The element to render as the node.
+   * @default 'div'
+   */
+  elementType?: string | JSXElementConstructor<any>;
+  padding?: Extract<
+    DimensionValue,
+    'static-size-50' | 'static-size-100' | 'static-size-200'
+  >;
+  borderRadius?: BorderRadiusValue;
+  borderColor?: BorderColorValue;
+  backgroundColor?: BackgroundColorValue;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  id?: string;
+}
+
+function View(props: ViewProps, ref: DOMRef) {
+  const {
+    children,
+    elementType: ElementType = 'div',
+    padding,
+    borderRadius,
+    borderColor,
+    backgroundColor,
+    width,
+    height,
+    id,
+  } = props;
+  const domRef = useDOMRef(ref);
+  return (
+    <ElementType
+      ref={domRef}
+      css={css`
+        overflow: hidden;
+        padding: ${padding != null ? dimensionValue(padding) : 0};
+        border: 1px solid
+          ${borderColor != null
+            ? `var(--ac-global-border-color-${borderColor})`
+            : 'transparent'};
+        background-color: ${backgroundColor != null
+          ? `var(--ac-global-background-color-${backgroundColor})`
+          : 'transparent'};
+        border-radius: ${borderRadius != null
+          ? `var(--ac-global-rounding-${borderRadius})`
+          : 0};
+        width: ${width != null ? dimensionValue(width) : 'auto'};
+        height: ${height != null ? dimensionValue(height) : 'auto'};
+      `}
+      className="ac-view"
+      id={id}
+    >
+      {children}
+    </ElementType>
+  );
+}
+
+/**
+ * View is a general purpose container with no specific semantics
+ * that can be used for custom styling purposes, similar to a div.
+ */
+const _View = forwardRef(View);
+export { _View as View };
diff --git a/src/view/index.tsx b/src/view/index.tsx
index b39182a1..9272ca3d 100644
--- a/src/view/index.tsx
+++ b/src/view/index.tsx
@@ -1 +1,2 @@
 export * from './Content';
+export * from './View';
diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx
index 8eae210a..37b98081 100644
--- a/stories/Card.stories.tsx
+++ b/stories/Card.stories.tsx
@@ -6,7 +6,7 @@ import { Card, CardProps, TabbedCard } from '../src/card';
 import { Tabs } from '../src/tabs';
 import { Button } from '../src/button';
 import InfoTip from './components/InfoTip';
-import { Heading } from '../src';
+import { Heading, Provider } from '../src';
 
 const { TabPane } = Tabs;
 
@@ -185,28 +185,32 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => {
 
 export const Gallery = () => {
   return (
-    <div>
-      <section>
-        <Heading>Default variant</Heading>
-        <GalleryCards variant="default" />
-      </section>
-      <section>
-        <Heading>Compact variant</Heading>
-        <GalleryCards variant="compact" />
-      </section>
-    </div>
+    <Provider>
+      <div>
+        <section>
+          <Heading>Default variant</Heading>
+          <GalleryCards variant="default" />
+        </section>
+        <section>
+          <Heading>Compact variant</Heading>
+          <GalleryCards variant="compact" />
+        </section>
+      </div>
+    </Provider>
   );
 };
 
 const Template: Story<CardProps> = args => (
-  <Card
-    title="Title"
-    subTitle="Subtext area"
-    style={{ width: 400, height: 200 }}
-    {...args}
-  >
-    Content goes here
-  </Card>
+  <Provider>
+    <Card
+      title="Title"
+      subTitle="Subtext area"
+      style={{ width: 400, height: 200 }}
+      {...args}
+    >
+      Content goes here
+    </Card>
+  </Provider>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
index f431a6b1..5c2df5be 100644
--- a/stories/Gallery.stories.tsx
+++ b/stories/Gallery.stories.tsx
@@ -14,8 +14,11 @@ import {
   RadioGroup,
   Radio,
   ButtonToolbar,
+  View,
+  Heading,
+  ButtonGroup,
 } from '../src';
-import { Icon, SearchOutline } from '../src/icon';
+import { Icon, Icons, SearchOutline } from '../src/icon';
 // @ts-ignore
 import chartFile from './images/chart.png';
 
@@ -39,13 +42,14 @@ const Template: Story = args => {
     <Provider>
       <div
         css={css`
-          .ac-card + .ac-card {
-            margin-top: 16px;
-          }
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
         `}
       >
         <Card
           title="Prediction Volume"
+          variant="compact"
           bodyStyle={{ padding: 0 }}
           extra={
             <div
@@ -109,7 +113,7 @@ const Template: Story = args => {
             />
           </div>
         </Card>
-        <Card title="Example Form">
+        <Card title="Example Form" variant="compact">
           <div
             css={css`
               display: flex;
@@ -154,6 +158,52 @@ const Template: Story = args => {
             <Button variant="primary">Submit</Button>
           </div>
         </Card>
+        <View
+          backgroundColor="dark"
+          padding="static-size-200"
+          borderRadius="medium"
+          borderColor="dark"
+        >
+          <div
+            css={css`
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+            `}
+          >
+            <Heading level={3}>Drift Over Time</Heading>
+            <ButtonGroup aria-label="zoom control">
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.ArrowIosBackOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.ArrowIosForwardOutline />} />}
+                size="compact"
+              />
+            </ButtonGroup>
+          </div>
+          <img
+            src={chartFile}
+            alt="chart image"
+            css={css`
+              margin: 24px;
+            `}
+          />
+        </View>
         {holder}
       </div>
     </Provider>
diff --git a/stories/View.stories.tsx b/stories/View.stories.tsx
new file mode 100644
index 00000000..528cd92b
--- /dev/null
+++ b/stories/View.stories.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import {
+  Card,
+  Provider,
+  TextField,
+  View,
+  Text,
+  Picker,
+  Item,
+  Button,
+  ButtonGroup,
+} from '../src';
+import {
+  Icon,
+  PlusCircleOutline,
+  MinusCircleOutline,
+  ArrowIosForwardOutline,
+  ArrowIosBackOutline,
+} from '../src/icon';
+import { withDesign } from 'storybook-addon-designs';
+import { css } from '@emotion/react';
+
+const plusIcon = <Icon svg={<PlusCircleOutline />} />;
+const minusIcon = <Icon svg={<MinusCircleOutline />} />;
+const rightIcon = <Icon svg={<ArrowIosForwardOutline />} />;
+const leftIcon = <Icon svg={<ArrowIosBackOutline />} />;
+
+const meta: Meta = {
+  title: 'View',
+  component: View,
+  decorators: [withDesign],
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    padding: {
+      control: {
+        type: 'select',
+        options: ['static-size-50', 'static-size-100', 'static-size-200'],
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    design: {
+      type: 'figma',
+      url: '',
+    },
+  },
+};
+
+export default meta;
+
+const Template = args => {
+  return (
+    <Provider>
+      <div
+        css={css`
+          display: flex;
+          flex-wrap: wrap;
+        `}
+      >
+        <View {...args}>This is a View</View>
+      </div>
+    </Provider>
+  );
+};
+
+export const Gallery = args => {
+  return (
+    <Provider>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        `}
+      >
+        <Card title="This is a card" variant="compact">
+          <View
+            backgroundColor="light"
+            padding="static-size-100"
+            borderRadius="medium"
+            borderColor="light"
+            {...args}
+          >
+            <TextField />
+          </View>
+        </Card>
+        <Card title="This is a card" variant="compact">
+          <View {...args}>
+            <div
+              css={css`
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              `}
+            >
+              <Picker addonBefore={'Metric'}>
+                <Item>First Item</Item>
+              </Picker>
+              <ButtonGroup aria-label="some group">
+                <Button variant="default" icon={leftIcon} />
+                <Button variant="default" icon={minusIcon} />
+                <Button variant="default" icon={plusIcon} />
+                <Button variant="default" icon={rightIcon} />
+              </ButtonGroup>
+            </div>
+          </View>
+        </Card>
+        <View
+          backgroundColor="light"
+          padding="static-size-100"
+          borderRadius="medium"
+          borderColor="light"
+          {...args}
+        >
+          <div
+            css={css`
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            `}
+          >
+            <Picker addonBefore={'Metric'}>
+              <Item>First Item</Item>
+            </Picker>
+            <ButtonGroup aria-label="some group">
+              <Button variant="default" icon={leftIcon} />
+              <Button variant="default" icon={minusIcon} />
+              <Button variant="default" icon={plusIcon} />
+              <Button variant="default" icon={rightIcon} />
+            </ButtonGroup>
+          </div>
+        </View>
+        <View
+          backgroundColor="light"
+          padding="static-size-100"
+          borderRadius="medium"
+          borderColor="light"
+          {...args}
+        >
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+        </View>
+      </div>
+    </Provider>
+  );
+};
+
+export const Default = Template.bind({});