Page example:

<Page>
  <Pattern>
    <div style={{ textAlign: 'center', padding: '5em' }}>Some content</div>
  </Pattern>
</Page>

With border:

<Page variant="withBorder">
  <Pattern>
    <div style={{ textAlign: 'center', padding: '5em' }}>Some content</div>
  </Pattern>
</Page>

Flat and centered:

const styles = { backgroundColor: 'white', color: 'black', textAlign: 'center', padding: '5em' };

<Page variant="flat">
  <Pattern>
    <div style={styles}>Some content</div>
  </Pattern>
</Page>;

With border and header:

const linksForLeftSection = [
  {
    label: 'Terms and Conditions',
    to: 'https://doodle.com/terms-of-service',
  },
  {
    label: 'Imprint',
    to: 'https://doodle.com/imprint',
  },
  {
    label: 'Privacy',
    to: 'https://doodle.com/privacy-policy',
  },
];

<Page variant="withBorder">
  <Pattern>
    <Header
      left={[
        <Link to="/" title="Doodle" variant="white">
          <DoodleLogo />
        </Link>,
        <Link to="/pricing" title="Pricing" variant="white">
          Pricing
        </Link>,
      ]}
      right={[
        <Link to="/account" title="Account" variant="white">
          <UserAvatar name="Account" />
        </Link>,
      ]}
    >
      <h1 className="u-titleL">✨ Shiny page</h1>
    </Header>
  </Pattern>
  <Footer links={linksForLeftSection} />
</Page>;