diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js
index 0dd0acb3..a0125b30 100644
--- a/src/components/layout/Hairline/index.js
+++ b/src/components/layout/Hairline/index.js
@@ -3,19 +3,20 @@ import * as React from 'react'
 import { type Size, getSize } from '~/theme/size'
 import { border } from '~/theme/variables'
 
-const calculateStyleFrom = (margin?: Size) => ({
+const calculateStyleFrom = (color?: string, margin?: Size) => ({
   width: '100%',
   height: '1px',
-  backgroundColor: border,
+  backgroundColor: color || border,
   margin: `${getSize(margin)} 0px`,
 })
 
 type Props = {
   margin?: Size,
+  color?: string,
 }
 
-const Hairline = ({ margin }: Props) => {
-  const style = calculateStyleFrom(margin)
+const Hairline = ({ margin, color }: Props) => {
+  const style = calculateStyleFrom(color, margin)
 
   return <div style={style} />
 }