Configuration

This guide walks through how to configure the Arc Design System to work in your project.

ADS will work out-of-the box with no configuration. ADS makes the assumption that you are already including the Arc fonts. If you are not already loading the Arc fonts, you can easily include them in your app by using the Fonts component seen below.

#Fonts and global styles

Any global styles needed can be added with the global function. This function respects all design tokens.

import React from 'react'
import Head from 'next/head'
import { Fonts, global } from '@wpmedia/ads-system'

const globalStyles = global({
  'a[type="button"]': {
    textDecoration: 'none',
    justifyContent: 'center',
    display: 'flex',
    flexDirection: 'column',
    margin: '$2'
  },
})

export default function App() {
  globalStyles()

  return (
      <Fonts />
      <Head>
        <title>Arc UI</title>
      </Head>
  )
}

#SCSS variables

The Arc styles are split into three different SCSS files:

arc-fonts.scss contains @font-face declarations for the Arc font, Output Sans.
arc-variables.scss contains all design tokens for the design system, including colors, spacing and fonts.
arc-bootstrap.scss maps variables to specific Bootstrap override values.

#Bootstrap theme

Follow the documentation on Bootstrap theming for overriding the default values with the arc-bootstrap file provided by the design system.