Colors

<div style={{ display: 'flex', alignItems: 'center' }}>
  <div
    style={{
      display: 'grid',
      gridTemplateRows: 'repeat(3, fit-content(100%))',
      gridRowGap: '16px',
      marginRight: 64,
    }}
  >
    <Header as="h3" color="lightBlue">
      Blue
    </Header>
    <Header as="h3" color="red">
      Red
    </Header>
    <Header as="h3" color="grey">
      Grey
    </Header>
  </div>
  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
    <div
      style={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}
      className="f5-bg-color-black"
    />
    <div
      style={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}
      className="f5-bg-color-grey"
    />
    <div
      style={{
        width: 64,
        height: 64,
        borderRadius: 4,
        border: '1px solid black',
        marginRight: 8,
      }}
      className="f5-bg-color-white"
    />
    <div
      style={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}
      className="f5-bg-color-blue"
    />
    <div
      style={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}
      className="f5-bg-color-light-blue"
    />
    <div
      style={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}
      className="f5-bg-color-red"
    />
  </div>
</div>

() => {
  const palette = ['a', 'b', 'c', 'd']
  const colors = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  const textStyle = { marginLeft: 4 }
  const rectColorStyle = { width: 48, height: 48, color: '#fff' }
  return palette.map(p => (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <div>
        {colors.map(color => (
          <span style={textStyle} className={`f5-color-${p}${color}`}>
            {`${p}${color}`}
          </span>
        ))}
      </div>
      <div style={{ display: 'flex' }}>
        {colors.map(color => (
          <span className={`f5-bg-color-${p}${color}`} style={rectColorStyle}>
            {`${p}${color}`}
          </span>
        ))}
      </div>
    </div>
  ))
}