diff --git a/client/App.tsx b/client/App.tsx
index babdba6..674f6c6 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -36,7 +36,7 @@ const App = () => {
                 </Route>
                 <Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
                 <Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
-                <Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
+                <Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
                 <Route exact={true} path='/questions-and-answers'>
                     <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
                 </Route>
diff --git a/client/Explore.tsx b/client/Explore.tsx
index 4b0e654..d12e90d 100644
--- a/client/Explore.tsx
+++ b/client/Explore.tsx
@@ -69,7 +69,7 @@ const Home = () => {
                 <section>
                     <Heading title="Layouts" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.Sidebar} />
                         <CoverCard pattern={Pattern.SplitScreen} />
@@ -81,7 +81,7 @@ const Home = () => {
                 <section>
                     <Heading title="Patterns" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
diff --git a/client/Home.tsx b/client/Home.tsx
index e5479b3..a90be5b 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -165,6 +165,7 @@ const Home = () => {
                         style={{
                             display: 'flex',
                             flexWrap: 'wrap',
+                            justifyContent: 'center',
                             opacity: '0.4',
                             padding: '32px 16px',
                         }}
diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index b358a41..aa3a81c 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -11,32 +11,31 @@ interface CoverCardProps {
 
 const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
-        <div className="pa1 w-20">
-            <Link
-                to={`/${slug(pattern)}`}
+        <Link
+            to={`/${slug(pattern)}`}
+            style={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start',
+                padding: '16px',
+                textDecoration: 'none',
+                width: '150px',
+            }}
+        >
+            <CoverLoader pattern={pattern} />
+            <h4
                 style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    padding: '16px',
-                    textDecoration: 'none',
+                    fontSize: '16px',
+                    fontWeight: 500,
+                    margin: 0,
+                    paddingTop: '12px',
+                    textAlign: 'center',
                 }}
             >
-                <CoverLoader pattern={pattern} />
-                <h4
-                    style={{
-                        fontSize: '16px',
-                        fontWeight: 500,
-                        margin: 0,
-                        paddingTop: '12px',
-                        textAlign: 'center',
-                    }}
-                >
-                    {pattern}
-                </h4>
-            </Link>
-        </div>
+                {pattern}
+            </h4>
+        </Link>
     );
 };
 
diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx
index c9d4a47..718f6f4 100644
--- a/client/components/RelatedPatterns.tsx
+++ b/client/components/RelatedPatterns.tsx
@@ -13,7 +13,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
         <section>
             <Heading title="Related patterns" />
 
-            <div className="flex flex-wrap items-start pa4">
+            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                 {
                     patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
                 }
diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx
index f082e93..c210a4b 100644
--- a/client/components/SampleCode.tsx
+++ b/client/components/SampleCode.tsx
@@ -11,7 +11,10 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
     return code === ''
             ? <></>
             : (
-                <pre className="h-100 lh-copy ma0" dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} />
+                <pre
+                    style={{ height: '100%', lineHeight: 1.5, margin: 0 }}
+                    dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
+                />
             );
 };
 
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index 81a56a6..44884ce 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -8,7 +8,7 @@ const highlight = (input: string, language: string) => {
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&amp;', '&').trim();
 
-    return `<code class="hljs h-100 ${lang}">${highlighted}</code>`;
+    return `<code style="height: 100%" class="hljs ${lang}">${highlighted}</code>`;
 };
 
 export default highlight;
diff --git a/client/index.css b/client/index.css
index 5dc3814..d5c1d82 100644
--- a/client/index.css
+++ b/client/index.css
@@ -2,6 +2,12 @@ body {
     font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
     -webkit-font-smoothing: antialiased;
 }
+html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a,
+h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea,
+table, td, th, tr,
+input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
+    box-sizing: border-box;
+}
 .hljs, code {
     font-family: 'Source Code Pro', monospace;
 }
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 474f5f3..37d878d 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -8,7 +8,7 @@ const Layout: React.FC<{}> = ({ children }) => {
     }, []);
 
     return (
-        <div className="mw8 mb5 center">
+        <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
             {children}
             <Footer />
             <ul
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index 2815774..be36636 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,9 +1,10 @@
 import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
 
-import Pattern from '../constants/Pattern';
 import './spinner.css';
 
+import Pattern from '../constants/Pattern';
+
 interface DetailsLoaderProps {
     pattern: Pattern;
 }
@@ -21,7 +22,15 @@ const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`.
 
 const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
     fallback: (
-        <div className="w100 h-100 flex items-center justify-center">
+        <div
+            style={{
+                alignItems: 'center',
+                display: 'flex',
+                height: '100%',
+                justifyContent: 'center',
+                width: '100%',
+            }}
+        >
             <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
                 <circle
                     cx="16"
diff --git a/client/patterns/badge/Cover.tsx b/client/patterns/badge/Cover.tsx
index 5da6a43..64db5c7 100644
--- a/client/patterns/badge/Cover.tsx
+++ b/client/patterns/badge/Cover.tsx
@@ -5,8 +5,29 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        color: '#FFF',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '32px',
+                        justifyContent: 'center',
+                        width: '32px',
+                    }}
+                >
                     1
                 </div>
             </div>
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 06f7957..09ccbbe 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -6,11 +6,33 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Badge">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '9999px',
+                                    color: '#FFF',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    fontSize: '20px',
+                                    height: '32px',
+                                    justifyContent: 'center',
+                                    width: '32px',
+                                }}
+                            >
                                 1
                             </div>
                         </div>
diff --git a/client/patterns/breadcrumb/Cover.tsx b/client/patterns/breadcrumb/Cover.tsx
index 6fdc55e..6fd574b 100644
--- a/client/patterns/breadcrumb/Cover.tsx
+++ b/client/patterns/breadcrumb/Cover.tsx
@@ -6,13 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center justify-center h2 w-80">
-                    <div className="w-20"><Rectangle /></div>
-                    <div className="mh1 black">/</div>
-                    <div className="w-20"><Rectangle /></div>
-                    <div className="mh1 black">/</div>
-                    <div className="w-20"><Rectangle /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '32px',
+                        justifyContent: 'center',
+                        width: '80%',
+                    }}
+                >
+                    <div style={{ width: '20%' }}><Rectangle /></div>
+                    <div style={{ color: '#000', margin: '0 4px' }}>/</div>
+                    <div style={{ width: '20%' }}><Rectangle /></div>
+                    <div style={{ color: '#000', margin: '0 4px' }}>/</div>
+                    <div style={{ width: '20%' }}><Rectangle /></div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index d895088..ae53c3c 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -7,18 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Breadcrumb">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex items-center">
-                                <div className="w4"><Rectangle height={16} /></div>
-                                <div className="mh1 f2 black-30">/</div>
-                                <div className="w2"><Rectangle height={16} /></div>
-                                <div className="mh1 f2 black-30">/</div>
-                                <div className="w3"><Rectangle height={16} /></div>
-                                <div className="mh1 f2 black-30">/</div>
-                                <div className="w2"><Rectangle height={16} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ alignItems: 'center', display: 'flex' }}>
+                                <div style={{ width: '128px' }}><Rectangle height={16} /></div>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                                <div style={{ width: '32px' }}><Rectangle height={16} /></div>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                                <div style={{ width: '64px' }}><Rectangle height={16} /></div>
+                                <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
+                                <div style={{ width: '32px' }}><Rectangle height={16} /></div>
                             </div>
                         </div>
                     )}
diff --git a/client/patterns/button-with-icon/Cover.tsx b/client/patterns/button-with-icon/Cover.tsx
index d89e5c1..e20587c 100644
--- a/client/patterns/button-with-icon/Cover.tsx
+++ b/client/patterns/button-with-icon/Cover.tsx
@@ -7,9 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="w-100 flex flex-row items-center ba b--black-30 br2 pa1">
-                    <div className="mr1"><Circle /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        padding: '8px',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ marginRight: '4px' }}><Circle /></div>
                     <Rectangle />
                 </div>
             </div>
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 217e4f9..a8d5f8d 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -8,13 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Button with icon">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w5">
-                                <button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
-                                    <div className="mr2"><Circle size={32} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <button
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '8px',
+                                        display: 'flex',
+                                        height: '64px',
+                                        padding: '8px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}><Circle size={32} /></div>
                                     <Rectangle />
                                 </button>
                             </div>
diff --git a/client/patterns/card/Cover.tsx b/client/patterns/card/Cover.tsx
index e639d59..d925c4d 100644
--- a/client/patterns/card/Cover.tsx
+++ b/client/patterns/card/Cover.tsx
@@ -7,16 +7,23 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="flex flex-column h-100 pa2">
-                <div className="w-100 mb2">
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ marginBottom: '8px', width: '100%' }}>
                     <Rectangle height={32} />
                 </div>
                 <div style={{ flex: 1 }}>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb1"><Line /></div>
-                    <div className="w-60 mb2"><Line /></div>
-                    <div className="w-30">
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
+                    <div style={{ width: '30%' }}>
                         <Rectangle height={8} />
                     </div>
                 </div>
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 2b9e071..901e954 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -8,15 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Card">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center pa3">
-                            <div className="b--black-30 ba br2 flex flex-column w5">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '16px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '8px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    width: '256px',
+                                }}
+                            >
                                 <Rectangle height={150} />
-                                <div className="pa3" style={{ flex: 1 }}>
-                                    <div className="mb3"><Block numberOfBlocks={15} /></div>
-                                    <div className="w4">
+                                <div style={{ flex: 1, padding: '16px' }}>
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
+                                    <div style={{ width: '128px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
diff --git a/client/patterns/centering/Cover.tsx b/client/patterns/centering/Cover.tsx
index 8a21955..433de0d 100644
--- a/client/patterns/centering/Cover.tsx
+++ b/client/patterns/centering/Cover.tsx
@@ -7,12 +7,21 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
                 <Circle />
-                <div className="w-50 mv1">
+                <div style={{ margin: '4px 0', width: '50%' }}>
                     <Line />
                 </div>
-                <div className="w-40 mv1">
+                <div style={{ margin: '4px 0', width: '40%' }}>
                     <Line />
                 </div>
             </div>
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index b27d72d..121dee8 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -8,14 +8,23 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Centering">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
                             <Circle size={64} />
-                            <div className="w-40 mt3"><Rectangle /></div>
-                            <div className="w-30 mt2"><Rectangle /></div>
-                            <div className="w-20 mt2"><Rectangle /></div>
+                            <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
+                            <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
+                            <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
                         </div>
                     )}
                     source={`
diff --git a/client/patterns/docked-at-corner/Cover.tsx b/client/patterns/docked-at-corner/Cover.tsx
index a6853c6..9e59f2e 100644
--- a/client/patterns/docked-at-corner/Cover.tsx
+++ b/client/patterns/docked-at-corner/Cover.tsx
@@ -5,11 +5,36 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="w2 h2 relative ba b--black-30 br2">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        height: '32px',
+                        position: 'relative',
+                        width: '32px',
+                    }}
+                >
                     <div
-                        className="absolute top-0 right-0 br-pill bg-dark-blue"
-                        style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
+                        style={{
+                            backgroundColor: '#00449E',
+                            borderRadius: '9999px',
+                            height: '16px',
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                            transform: 'translate(50%, -50%)',
+                            width: '16px',
+                        }}
                     />
                 </div>
             </div>
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 36d80bb..8329dae 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -8,15 +8,40 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Docked at corner">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w4 pa3 relative ba b--black-30 br2">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '8px',
+                                    padding: '16px',
+                                    position: 'relative',
+                                    width: '128px',
+                                }}
+                            >
                                 <Rectangle />
                                 <div
-                                    className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
-                                    style={{ transform: 'translate(50%, -50%)' }}
+                                    style={{
+                                        backgroundColor: '#00449E',
+                                        borderRadius: '9999px',
+                                        height: '32px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: 0,
+                                        transform: 'translate(50%, -50%)',
+                                        width: '32px',
+                                    }}
                                 />
                             </div>
                         </div>
@@ -48,21 +73,65 @@ const Details: React.FC<{}> = () => {
             <section>
                 <Heading title="Use cases" />
 
-                <div className="pa4">
-                    <div className="mb4 w4 pa2 relative ba b--black-30 br2">
+                <div style={{ padding: '32px' }}>
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            marginBottom: '32px',
+                            padding: '8px',
+                            position: 'relative',
+                            width: '128px',
+                        }}
+                    >
                         Inbox
                         <div
-                            className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center"
-                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: '#357EDD',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                height: '24px',
+                                justifyContent: 'center',
+                                padding: '4px',
+                                position: 'absolute',
+                                right: 0,
+                                top: 0,
+                                transform: 'translate(50%, -50%)',
+                                width: '24px',
+                            }}
                         >
                             5
                         </div>
                     </div>
-                    <div className="w-40 h4 pa3 relative ba b--black-30 br2">
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            height: '128px',
+                            padding: '16px',
+                            position: 'relative',
+                            width: '40%',
+                        }}
+                    >
                         Modal
                         <div
-                            className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center"
-                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: '#FF4136',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                height: '24px',
+                                justifyContent: 'center',
+                                padding: '4px',
+                                position: 'absolute',
+                                right: 0,
+                                top: 0,
+                                transform: 'translate(50%, -50%)',
+                                width: '24px',
+                            }}
                         >
                             &times;
                         </div>
diff --git a/client/patterns/dot-navigation/Cover.tsx b/client/patterns/dot-navigation/Cover.tsx
index 1f4a0b9..51e6591 100644
--- a/client/patterns/dot-navigation/Cover.tsx
+++ b/client/patterns/dot-navigation/Cover.tsx
@@ -5,12 +5,53 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center">
-                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
-                    <div className="mh1 br-pill bg-black-30" style={{ height: '8px', width: '8px' }} />
-                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
-                    <div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ alignItems: 'center', display: 'flex' }}>
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            height: '8px',
+                            margin: '0 4px',
+                            width: '8px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            height: '8px',
+                            margin: '0 4px',
+                            width: '8px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            height: '8px',
+                            margin: '0 4px',
+                            width: '8px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            height: '8px',
+                            margin: '0 4px',
+                            width: '8px',
+                        }}
+                    />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index d5ec9d3..6e16830 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -15,9 +15,13 @@ const Details: React.FC<{}> = () => {
         const click = () => setActiveItem(index);
         return (
             <li
-                className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
                 style={{
+                    backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
+                    border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
+                    borderRadius: '9999px',
+                    cursor: 'pointer',
                     height: '12px',
+                    margin: '0 4px',
                     width: '12px',
                 }}
                 onClick={click}
@@ -27,11 +31,29 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Dot navigation">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <ul className="list ma0 pa0 flex items-center justify-center">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <ul
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    listStyleType: 'none',
+                                    margin: 0,
+                                    padding: 0,
+                                }}
+                            >
                                 <Dot index={0} />
                                 <Dot index={1} />
                                 <Dot index={2} />
diff --git a/client/patterns/feature-list/Cover.tsx b/client/patterns/feature-list/Cover.tsx
index 9e3d30f..65ecc08 100644
--- a/client/patterns/feature-list/Cover.tsx
+++ b/client/patterns/feature-list/Cover.tsx
@@ -8,23 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="flex flex-column justify-center h-100 pa2 w-100">
-                <div className="flex w-100 mb2">
-                    <div className="mh1"><Circle size={32} /></div>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
+                    <div style={{ margin: '0 4px' }}><Circle size={32} /></div>
                     <div style={{ flex: 1 }}>
-                        <div className="w-100 mb2"><Rectangle height={4} /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                 </div>
-                <div className="flex w-100 flex-row-reverse">
-                    <div className="mh1"><Circle size={32} /></div>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse', width: '100%' }}>
+                    <div style={{ margin: '0 4px' }}><Circle size={32} /></div>
                     <div style={{ flex: 1 }}>
-                        <div className="w-100 mb2"><Rectangle height={4} /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index dc27439..02f4094 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -9,22 +9,29 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Feature list">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="flex h-100 items-center justify-center">
-                            <div className="w-60">
-                                <div className="flex flex-row mb4">
-                                    <div className="mh3"><Circle size={128} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <div style={{ display: 'flex', marginBottom: '32px' }}>
+                                    <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
                                     <div style={{ flex: 1 }}>
-                                        <div className="mb4"><Rectangle height={8} /></div>
+                                        <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
                                         <Block numberOfBlocks={10} />
                                     </div>
                                 </div>
-                                <div className="flex flex-row flex-row-reverse mb4">
-                                    <div className="mh3"><Circle size={128} /></div>
+                                <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
+                                    <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
                                     <div style={{ flex: 1 }}>
-                                        <div className="mb4"><Rectangle height={8} /></div>
+                                        <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
                                         <Block numberOfBlocks={15} />
                                     </div>
                                 </div>
diff --git a/client/patterns/fixed-at-corner/Cover.tsx b/client/patterns/fixed-at-corner/Cover.tsx
index bac55d4..90c0897 100644
--- a/client/patterns/fixed-at-corner/Cover.tsx
+++ b/client/patterns/fixed-at-corner/Cover.tsx
@@ -6,8 +6,8 @@ import Triangle from '../../placeholders/Triangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="relative">
-                <div className="absolute top-0 left-0">
+            <div style={{ position: 'relative' }}>
+                <div style={{ left: 0, position: 'absolute', top: 0 }}>
                     <Triangle size={32} />
                 </div>
             </div>
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index 9bf2193..884993a 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -7,20 +7,20 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Fixed at corner">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="relative h-100">
-                            <div className="absolute top-0 left-0">
+                        <div style={{ height: '100%', position: 'relative' }}>
+                            <div style={{ left: 0, position: 'absolute', top: 0 }}>
                                 <Triangle size={64} corner="tl" />
                             </div>
-                            <div className="absolute top-0 right-0">
+                            <div style={{ position: 'absolute', right: 0, top: 0 }}>
                                 <Triangle size={64} corner="tr" />
                             </div>
-                            <div className="absolute bottom-0 right-0">
+                            <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
                                 <Triangle size={64} corner="br" />
                             </div>
-                            <div className="absolute bottom-0 left-0">
+                            <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
                                 <Triangle size={64} corner="bl" />
                             </div>
                         </div>
diff --git a/client/patterns/holy-grail/Cover.tsx b/client/patterns/holy-grail/Cover.tsx
index 074b849..2a572a4 100644
--- a/client/patterns/holy-grail/Cover.tsx
+++ b/client/patterns/holy-grail/Cover.tsx
@@ -6,38 +6,80 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column">
-                <div className="flex-shrink-0 bb b--black-30">
-                    <div className="w-100 flex items-center pa2">
-                        <div className="w1"><Line /></div>
-                        <div className="w1 ml-auto"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }}
+            >
+                <div
+                    style={{
+                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                        flexShrink: 0,
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            padding: '8px',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
                     </div>
                 </div>
-                <div className="flex-grow-1 flex flex-row">
-                    <div className="b--black-30 br pa2 w-30">
-                        <div className="mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                <div style={{ display: 'flex', flexGrow: 1 }}>
+                    <div
+                        style={{
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            padding: '8px',
+                            width: '30%',
+                        }}
+                    >
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
-                    <div className="pa2 flex-auto">
-                        <div className="mb1"><Line /></div>
-                        <div className="mb1 w-60"><Line /></div>
-                        <div className="mb2 w-80"><Line /></div>
+                    <div style={{ flex: 1, padding: '8px' }}>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '80%' }}><Line /></div>
 
-                        <div className="mb1"><Line /></div>
-                        <div className="mb1 w-60"><Line /></div>
-                        <div className="mb1 w-80"><Line /></div>
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
                     </div>
-                    <div className="b--black-30 bl pa2 w-30">
-                        <div className="mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                    <div
+                        style={{
+                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                            padding: '8px',
+                            width: '30%',
+                        }}
+                    >
+                        <div style={{ marginBottom: '4px' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                 </div>
-                <div className="flex-shrink-0 bt b--black-30">
-                    <div className="w-100 flex items-center pa2">
-                        <div className="w1"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
+                <div
+                    style={{
+                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                        flexShrink: 0,
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            padding: '8px',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index 8c13e41..1c91cba 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -8,26 +8,56 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Holy grail">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column">
-                            <div className="flex-shrink-0 bb b--black-30 pa3">
-                                <div className="w-50"><Rectangle /></div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    flexShrink: 0,
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ width: '50%' }}><Rectangle /></div>
                             </div>
-                            <div className="flex-grow-1 flex flex-row">
-                                <div className="b--black-30 br pa3 w-25">
+                            <div style={{ display: 'flex', flexGrow: 1 }}>
+                                <div
+                                    style={{
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        padding: '16px',
+                                        width: '25%',
+                                    }}
+                                >
                                     <Block numberOfBlocks={10} />
                                 </div>
-                                <div className="pa3 flex-auto">
+                                <div style={{ flex: 1, padding: '16px' }}>
                                     <Block numberOfBlocks={20} />
                                 </div>
-                                <div className="b--black-30 bl pa3 w-20">
+                                <div
+                                    style={{
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        padding: '16px',
+                                        width: '20%',
+                                    }}
+                                >
                                     <Block numberOfBlocks={5} />
                                 </div>
                             </div>
-                            <div className="flex-shrink-0 bt b--black-30 pa3">
-                                <div className="w-40"><Rectangle /></div>
+                            <div
+                                style={{
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    flexShrink: 0,
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}><Rectangle /></div>
                             </div>
                         </div>
                     )}
diff --git a/client/patterns/input-add-on/Cover.tsx b/client/patterns/input-add-on/Cover.tsx
index 64b7649..d86e1b4 100644
--- a/client/patterns/input-add-on/Cover.tsx
+++ b/client/patterns/input-add-on/Cover.tsx
@@ -6,12 +6,37 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex items-center justify-center pa2">
-                <div className="b--black-30 ba br2 flex w-100 h1">
-                    <div className="b--black-30 br flex items-center justify-center w-30 ph2">
-                        <div className="w-100"><Line /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        height: '24px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            padding: '0 8px',
+                            width: '30%',
+                        }}
+                    >
+                        <div style={{ width: '100%' }}><Line /></div>
                     </div>
-                    <div className="flex-grow-1" />
+                    <div style={{ flex: 1 }} />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/input-add-on/Details.tsx b/client/patterns/input-add-on/Details.tsx
index 53a2b73..887a66c 100644
--- a/client/patterns/input-add-on/Details.tsx
+++ b/client/patterns/input-add-on/Details.tsx
@@ -7,29 +7,127 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Input add-on">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w5">
-                                <div className="b--black-30 ba br2 flex h2 w-100 mb3">
-                                    <div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '32px',
+                                        marginBottom: '16px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                            width: '30%',
+                                        }}
+                                    >
                                         <Rectangle />
                                     </div>
-                                    <input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
+                                    <input
+                                        type="text"
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            marginRight: '1px',
+                                            padding: '4px',
+                                        }}
+                                    />
                                 </div>
-                                <div className="b--black-30 ba br2 flex h2 w-100 mb3">
-                                    <input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} />
-                                    <div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40">
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '32px',
+                                        marginBottom: '16px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <input
+                                        type="text"
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            marginLeft: '1px',
+                                            padding: '8px',
+                                        }}
+                                    />
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                            width: '40%',
+                                        }}
+                                    >
                                         <Rectangle />
                                     </div>
                                 </div>
-                                <div className="b--black-30 ba br2 flex h2 w-100">
-                                    <div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20">
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '32px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                            width: '20%',
+                                        }}
+                                    >
                                         <Rectangle />
                                     </div>
-                                    <input type="text" className="bn pa2 flex-auto" />
-                                    <div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30">
+                                    <input
+                                        type="text"
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            padding: '8px',
+                                        }}
+                                    />
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                            width: '30%',
+                                        }}
+                                    >
                                         <Rectangle />
                                     </div>
                                 </div>
diff --git a/client/patterns/media-object/Cover.tsx b/client/patterns/media-object/Cover.tsx
index 3694910..71b27c2 100644
--- a/client/patterns/media-object/Cover.tsx
+++ b/client/patterns/media-object/Cover.tsx
@@ -7,22 +7,30 @@ import Square from '../../placeholders/Square';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="flex h-100 items-start pa2 w-100">
-                <div className="h2 w2 mr2">
+            <div
+                style={{
+                    alignItems: 'flex-start',
+                    display: 'flex',
+                    height: '100%',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ height: '32px', marginRight: '8px', width: '32px' }}>
                     <Square />
                 </div>
-                <div className="flex-auto">
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb3"><Line /></div>
+                <div style={{ flex: 1 }}>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
 
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb3"><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
 
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb1"><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 2271a6e..7bb3c47 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -9,19 +9,26 @@ import Square from '../../placeholders/Square';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Media object">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex items-start pa3">
-                            <div className="w4 h4 mr3">
+                        <div
+                            style={{
+                                alignItems: 'flex-start',
+                                display: 'flex',
+                                height: '100%',
+                                padding: '16px',
+                            }}
+                        >
+                            <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
                                 <Square />
                             </div>
-                            <div className="flex-auto">
-                                <div className="w-80 mb4">
+                            <div style={{ flex: 1 }}>
+                                <div style={{ marginBottom: '32px', width: '80%' }}>
                                     <Rectangle />
                                 </div>
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="mb4"><Block numberOfBlocks={15} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
                             </div>
                         </div>
                     )}
diff --git a/client/patterns/menu/Cover.tsx b/client/patterns/menu/Cover.tsx
index 841c9b4..66c6c17 100644
--- a/client/patterns/menu/Cover.tsx
+++ b/client/patterns/menu/Cover.tsx
@@ -6,16 +6,57 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa3">
-                <div className="b--black-30 ba br2 flex flex-column h-100 w-100">
-                    <div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 8px',
+                        }}
+                    >
                         <Line />
                     </div>
-                    <div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}>
-                        <div className="w-80"><Line /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 8px',
+                        }}
+                    >
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
-                    <div className="flex items-center ph2" style={{ flex: 1 }}>
-                        <div className="w-60"><Line /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 8px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index bf0a5f5..bc0d17a 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './menu.css';
+
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -10,40 +12,116 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Menu">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="b--black-30 ba br2 flex flex-column w-40">
-                                <div className="flex items-center h2 ph2 hover-bg-black-10">
-                                    <div className="w-40"><Rectangle /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    width: '40%',
+                                }}
+                            >
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ width: '40%' }}><Rectangle /></div>
                                 </div>
-                                <div className="flex items-center h2 ph2 hover-bg-black-10">
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        padding: '0 8px',
+                                    }}
+                                >
                                     <Circle />
-                                    <div className="w-50 ml1"><Rectangle /></div>
+                                    <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
                                 </div>
-                                <div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
-                                    <div className="w-30"><Rectangle /></div>
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ width: '30%' }}><Rectangle /></div>
                                     <div>Ctrl + X</div>
                                 </div>
-                                <div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
-                                    <div className="w-70"><Rectangle /></div>
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ width: '70%' }}><Rectangle /></div>
                                     <div>Ctrl + C</div>
                                 </div>
-                                <div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
-                                    <div className="w-20"><Rectangle /></div>
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ width: '20%' }}><Rectangle /></div>
                                     <Circle />
                                 </div>
-                                <div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
-                                    <div className="flex items-center w-80">
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
                                         <Circle />
-                                        <div className="w-50 ml1"><Rectangle /></div>
+                                        <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
                                     </div>
                                     <Circle />
                                 </div>
-                                <div className="b--black-30 bb" style={{ height: '1px' }} />
-                                <div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
-                                    <div className="w-40"><Rectangle /></div>
+                                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
+                                <div
+                                    className="menu-item"
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '0 8px',
+                                    }}
+                                >
+                                    <div style={{ width: '40%' }}><Rectangle /></div>
                                     <div>Ctrl + V</div>
                                 </div>
                             </div>
diff --git a/client/patterns/menu/menu.css b/client/patterns/menu/menu.css
new file mode 100644
index 0000000..77d6681
--- /dev/null
+++ b/client/patterns/menu/menu.css
@@ -0,0 +1,3 @@
+.menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
diff --git a/client/patterns/modal/Cover.tsx b/client/patterns/modal/Cover.tsx
index e2faccc..ec3346e 100644
--- a/client/patterns/modal/Cover.tsx
+++ b/client/patterns/modal/Cover.tsx
@@ -7,21 +7,50 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="flex flex-column h-100 items-center justify-center pa3">
-                <div className="b--black-30 ba br2 w-100">
-                    <div className="flex items-center justify-between ph1">
-                        <div className="w-60"><Rectangle height={2} /></div>
-                        <div className="black-70">&times;</div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '0 4px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Rectangle height={2} /></div>
+                        <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
                     </div>
-                    <div className="pa1">
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80 mb1"><Line /></div>
-                        <div className="w-60 mb1"><Line /></div>
-                        <div className="w-40"><Line /></div>
+                    <div style={{ padding: '4px' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ width: '40%' }}><Line /></div>
                     </div>
-                    <div className="flex items-center justify-end pa1">
-                        <div className="w-33 mr2"><Rectangle height={8} /></div>
-                        <div className="w-33"><Rectangle height={8} /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            padding: '4px',
+                        }}
+                    >
+                        <div style={{ marginRight: '8px', width: '33.3333%' }}><Rectangle height={8} /></div>
+                        <div style={{ width: '33.3333%' }}><Rectangle height={8} /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 1b487fd..62c97a8 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -9,24 +9,54 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="b--black-30 ba br2 w-50">
-                                <div className="flex items-center justify-between bb b--black-30 pa3">
-                                    <div className="w-60"><Rectangle /></div>
-                                    <div className="black-70">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    width: '50%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        padding: '16px',
+                                    }}
+                                >
+                                    <div style={{ width: '60%' }}><Rectangle /></div>
+                                    <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                                         <Circle />
                                     </div>
                                 </div>
-                                <div className="pa3">
-                                    <div className="mb3"><Block numberOfBlocks={10} /></div>
+                                <div style={{ padding: '16px' }}>
+                                    <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
                                     <Block numberOfBlocks={5} />
                                 </div>
-                                <div className="flex justify-end bt b--black-30 pa3">
-                                    <div className="w-30 mr2"><Rectangle height={32} /></div>
-                                    <div className="w-30"><Rectangle height={32} /></div>
+                                <div
+                                    style={{
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                        padding: '16px',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
+                                    <div style={{ width: '30%' }}><Rectangle height={32} /></div>
                                 </div>
                             </div>
                         </div>
diff --git a/client/patterns/notification/Cover.tsx b/client/patterns/notification/Cover.tsx
index 48a12f1..e85ef45 100644
--- a/client/patterns/notification/Cover.tsx
+++ b/client/patterns/notification/Cover.tsx
@@ -6,10 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center justify-between ba b--black-30 br2 w-80 pa2">
-                    <div className="w-60"><Rectangle /></div>
-                    <div className="black-70">&times;</div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '8px',
+                        width: '80%',
+                    }}
+                >
+                    <div style={{ width: '60%' }}><Rectangle /></div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>&times;</div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 1a4071b..1554c12 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -8,15 +8,41 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="b--black-30 ba br2 flex justify-between w-60">
-                                <div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    width: '60%',
+                                }}
+                            >
+                                <div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
                                 <button
-                                    className="black-30 bn f2 flex h2 items-center justify-center w2"
-                                    style={{ marginRight: '1px' }}
+                                    style={{
+                                        alignItems: 'center',
+                                        borderColor: 'transparent',
+                                        color: 'rgba(0, 0, 0, .3)',
+                                        display: 'flex',
+                                        fontSize: '36px',
+                                        height: '32px',
+                                        justifyContent: 'center',
+                                        marginRight: '1px',
+                                        width: '32px',
+                                    }}
                                 >
                                     <Circle />
                                 </button>
diff --git a/client/patterns/pagination/Cover.tsx b/client/patterns/pagination/Cover.tsx
index 145437b..a100560 100644
--- a/client/patterns/pagination/Cover.tsx
+++ b/client/patterns/pagination/Cover.tsx
@@ -6,16 +6,54 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="b--black-30 ba br-pill flex">
-                    <div className="b--black-30 br flex items-center justify-center pa2">
-                        <Circle size={4} />
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        display: 'flex',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <Circle size={8} />
                     </div>
-                    <div className="b--black-30 br flex items-center justify-center pa2">
-                        <Circle size={4} />
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <Circle size={8} />
                     </div>
-                    <div className="flex items-center justify-center pa2">
-                        <Circle size={4} />
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <Circle size={8} />
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index ff5e358..1804c65 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -8,27 +8,91 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pagination">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center pa3">
-                            <div className="b--black-30 ba br2 flex">
-                                <div className="b--black-30 br flex items-center justify-center pa2 w4">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '128px',
+                                    }}
+                                >
                                     <Rectangle />
                                 </div>
-                                <div className="b--black-30 br flex items-center justify-center pa2">
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
                                     <Circle size={16} />
                                 </div>
-                                <div className="b--black-30 br flex items-center justify-center pa2">
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
                                     <Circle size={16} />
                                 </div>
-                                <div className="b--black-30 br flex items-center justify-center pa2">
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
                                     <Circle size={16} />
                                 </div>
-                                <div className="b--black-30 br flex items-center justify-center pa2">
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                    }}
+                                >
                                     <Circle size={16} />
                                 </div>
-                                <div className="flex items-center justify-center pa2 w3">
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        padding: '8px',
+                                        width: '64px',
+                                    }}
+                                >
                                     <Rectangle />
                                 </div>
                             </div>
diff --git a/client/patterns/previous-next-buttons/Cover.tsx b/client/patterns/previous-next-buttons/Cover.tsx
index ce863f2..1e6f2a1 100644
--- a/client/patterns/previous-next-buttons/Cover.tsx
+++ b/client/patterns/previous-next-buttons/Cover.tsx
@@ -6,15 +6,41 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center justify-between pa2 w-100">
-                    <div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40">
-                        <div className="mr1">&lt;</div>
-                        <Rectangle />
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            padding: '4px 8px',
+                        }}
+                    >
+                        &lt;
                     </div>
-                    <div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40">
-                        <Rectangle />
-                        <div className="ml1">&gt;</div>
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            padding: '4px 8px',
+                        }}
+                    >
+                        &gt;
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index 6eabe76..d0bc1c1 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -7,19 +7,55 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w-50">
-                                <div className="flex items-center justify-between pa2 w-100 h2">
-                                    <a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
-                                        <div className="mr2">&lt;</div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '50%' }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '32px',
+                                        justifyContent: 'space-between',
+                                        padding: '8px',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <a
+                                        style={{
+                                            alignItems: 'center',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            padding: '8px',
+                                            width: '30%',
+                                        }}
+                                    >
+                                        <div style={{ marginRight: '8px' }}>&lt;</div>
                                         <Rectangle />
                                     </a>
-                                    <a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
+                                    <a
+                                        style={{
+                                            alignItems: 'center',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            padding: '8px',
+                                            width: '30%',
+                                        }}
+                                    >
                                         <Rectangle />
-                                        <div className="ml2">&gt;</div>
+                                        <div style={{ marginLeft: '8px' }}>&gt;</div>
                                     </a>
                                 </div>
                             </div>
diff --git a/client/patterns/pricing-table/Cover.tsx b/client/patterns/pricing-table/Cover.tsx
index 868c6e9..eaae12c 100644
--- a/client/patterns/pricing-table/Cover.tsx
+++ b/client/patterns/pricing-table/Cover.tsx
@@ -8,41 +8,75 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex items-center justify-center ph2">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
                 <div
-                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
-                    style={{ flex: 1 }}
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        marginRight: '4px',
+                        padding: '4px',
+                    }}
                 >
-                    <div className="mb1"><Circle /></div>
-                    <div className="mb1 w-100">
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                     <Rectangle />
                 </div>
                 <div
-                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1"
-                    style={{ flex: 1 }}
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        marginRight: '4px',
+                        padding: '4px',
+                    }}
                 >
-                    <div className="mb1"><Circle /></div>
-                    <div className="mb1 w-100">
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-60 mb1"><Line /></div>
-                        <div className="w-80 mb1"><Line /></div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                     <Rectangle />
                 </div>
                 <div
-                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa1"
-                    style={{ flex: 1 }}
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        padding: '4px',
+                    }}
                 >
-                    <div className="mb1"><Circle /></div>
-                    <div className="mb1 w-100">
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80"><Line /></div>
+                    <div style={{ marginBottom: '4px' }}><Circle /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ width: '80%' }}><Line /></div>
                     </div>
                     <Rectangle />
                 </div>
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index bf2cb52..84f2fe3 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -9,37 +9,85 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex items-center justify-center pa3">
-                            <div className="w-60 flex items-center justify-center">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '16px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    width: '60%',
+                                }}
+                            >
                                 <div
-                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
-                                    style={{ flex: 1 }}
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        justifyContent: 'center',
+                                        margin: '0 8px',
+                                        padding: '16px',
+                                    }}
                                 >
-                                    <div className="mb3 w-60"><Rectangle /></div>
-                                    <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
-                                    <div className="w-40"><Rectangle height={32} /></div>
+                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                    <div style={{ marginBottom: '16px', width: '100%' }}>
+                                        <Block numberOfBlocks={10} />
+                                    </div>
+                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
                                 </div>
                                 <div
-                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
-                                    style={{ flex: 1 }}
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        justifyContent: 'center',
+                                        margin: '0 8px',
+                                        padding: '16px',
+                                    }}
                                 >
-                                    <div className="mb3 w-60"><Rectangle /></div>
-                                    <div className="mb3"><Circle size={64} /></div>
-                                    <div className="mb3 w-100"><Block numberOfBlocks={20} /></div>
-                                    <div className="w-40"><Rectangle height={32} /></div>
+                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                    <div style={{ marginBottom: '16px', width: '100%' }}>
+                                        <Block numberOfBlocks={20} />
+                                    </div>
+                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
                                 </div>
                                 <div
-                                    className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2"
-                                    style={{ flex: 1 }}
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        justifyContent: 'center',
+                                        margin: '0 8px',
+                                        padding: '16px',
+                                    }}
                                 >
-                                    <div className="mb3 w-60"><Rectangle /></div>
-                                        <div className="mb3"><Circle size={64} /></div>
-                                        <div className="mb3 w-100"><Block numberOfBlocks={10} /></div>
-                                        <div className="w-40"><Rectangle height={32} /></div>
+                                    <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
+                                    <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
+                                    <div style={{ marginBottom: '16px', width: '100%' }}>
+                                        <Block numberOfBlocks={10} />
+                                    </div>
+                                    <div style={{ width: '40%' }}><Rectangle height={32} /></div>
                                 </div>
                             </div>
                         </div>
diff --git a/client/patterns/progress-bar/Cover.tsx b/client/patterns/progress-bar/Cover.tsx
index cb1ac32..73b8317 100644
--- a/client/patterns/progress-bar/Cover.tsx
+++ b/client/patterns/progress-bar/Cover.tsx
@@ -5,9 +5,33 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="h1 w-100 br-pill bg-black-10 pa1">
-                    <div className="w-40 br-pill h-100 bg-black-30" />
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                        borderRadius: '9999px',
+                        height: '16px',
+                        padding: '4px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            height: '100%',
+                            width: '40%',
+                        }}
+                    />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index 101bd87..62b08d1 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -12,14 +12,40 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Progress bar">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="h1 w-50 br-pill bg-black-10">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRadius: '9999px',
+                                    height: '16px',
+                                    width: '50%',
+                                }}
+                            >
                                 <div
-                                    className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7"
-                                    style={{ width: `${progress}%` }}
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: '#357EDD',
+                                        borderRadius: '9999px',
+                                        color: '#FFF',
+                                        display: 'flex',
+                                        fontSize: '12px',
+                                        height: '100%',
+                                        justifyContent: 'center',
+                                        padding: '4px',
+                                        width: `${progress}%`,
+                                    }}
                                 >
                                     {progress}%
                                 </div>
diff --git a/client/patterns/property-list/Cover.tsx b/client/patterns/property-list/Cover.tsx
index 91f3dba..ad1f6d3 100644
--- a/client/patterns/property-list/Cover.tsx
+++ b/client/patterns/property-list/Cover.tsx
@@ -7,18 +7,51 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa3">
-                <div className="w-100">
-                    <div className="bb b--black-30 pv1 flex items-center justify-between">
-                        <div className="w-60"><Rectangle height={8} /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ width: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '4px 0',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Rectangle height={8} /></div>
                         <Circle size={12} />
                     </div>
-                    <div className="bb b--black-30 pv1 flex items-center justify-between">
-                        <div className="w-20"><Rectangle height={8} /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '4px 0',
+                        }}
+                    >
+                        <div style={{ width: '20%' }}><Rectangle height={8} /></div>
                         <Circle size={12} />
                     </div>
-                    <div className="bb b--black-30 pv1 flex items-center justify-between">
-                        <div className="w-40"><Rectangle height={8} /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '4px 0',
+                        }}
+                    >
+                        <div style={{ width: '40%' }}><Rectangle height={8} /></div>
                         <Circle size={12} />
                     </div>
                 </div>
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index 0394f92..9b934a0 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -28,10 +28,19 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Property list">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
                             <div style={{ width: '40%' }}>
                                 <Item>
                                     <dt style={{ width: '80%' }}><Rectangle /></dt>
diff --git a/client/patterns/questions-and-answers/Cover.tsx b/client/patterns/questions-and-answers/Cover.tsx
index 3b55282..96e63ff 100644
--- a/client/patterns/questions-and-answers/Cover.tsx
+++ b/client/patterns/questions-and-answers/Cover.tsx
@@ -8,21 +8,44 @@ import Triangle from '../../placeholders/Triangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="w-80">
-                    <div className="flex items-center justify-between mb2">
-                        <div className="w-60"><Rectangle height={4} /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ width: '80%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            marginBottom: '8px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Rectangle height={4} /></div>
                         <Triangle size={6} corner="b" />
                     </div>
                     <div>
-                        <div className="flex items-center justify-between mb1">
-                            <div className="w-40"><Rectangle height={4} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                marginBottom: '4px',
+                            }}
+                        >
+                            <div style={{ width: '40%' }}><Rectangle height={4} /></div>
                             <Triangle size={6} corner="t" />
                         </div>
-                        <div className="w-100 mb1"><Line /></div>
-                        <div className="w-80 mb1"><Line /></div>
-                        <div className="w-60 mb1"><Line /></div>
-                        <div className="w-40"><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ width: '40%' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 4b92d3f..26a524f 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -20,7 +20,13 @@ const Details: React.FC<{}> = () => {
         return (
             <div>
                 <div
-                    className="flex items-center justify-between pointer mv3"
+                    style={{
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '16px 0',
+                    }}
                     onClick={click}
                 >
                     {title}
@@ -33,33 +39,51 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Questions and answers">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w-60">
-                                <div className="mb3 bt bb b--black-30">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <div
+                                    style={{
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    }}
+                                >
                                     <Item
                                         index={0}
-                                        title={<div className="w-40"><Rectangle /></div>}
+                                        title={<div style={{ width: '40%' }}><Rectangle /></div>}
                                     >
-                                        <div className="mb3"><Block numberOfBlocks={10} /></div>
+                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
                                     </Item>
                                 </div>
-                                <div className="mb3 bb b--black-30">
+                                <div
+                                    style={{
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    }}
+                                >
                                     <Item
                                         index={1}
-                                        title={<div className="w-80"><Rectangle /></div>}
+                                        title={<div style={{ width: '80%' }}><Rectangle /></div>}
                                     >
-                                        <div className="mb3"><Block numberOfBlocks={15} /></div>
+                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
                                     </Item>
                                 </div>
-                                <div className="bb b--black-30">
+                                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
                                     <Item
                                         index={2}
-                                        title={<div className="w-60"><Rectangle /></div>}
+                                        title={<div style={{ width: '60%' }}><Rectangle /></div>}
                                     >
-                                        <div className="mb3"><Block numberOfBlocks={10} /></div>
+                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
                                     </Item>
                                 </div>
                             </div>
diff --git a/client/patterns/radio-switch/Cover.tsx b/client/patterns/radio-switch/Cover.tsx
index 98b5f6a..7d600e6 100644
--- a/client/patterns/radio-switch/Cover.tsx
+++ b/client/patterns/radio-switch/Cover.tsx
@@ -6,12 +6,39 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="w-80 flex items-center justify-center b--black-30 br-pill ba pa1">
-                    <div className="pa1" style={{ flex: 1 }}>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        padding: '4px',
+                        width: '80%',
+                    }}
+                >
+                    <div style={{ flex: 1, padding: '4px' }}>
                         <Rectangle />
                     </div>
-                    <div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            flex: 1,
+                            height: '100%',
+                            padding: '4px',
+                        }}
+                    />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index 431cf1f..ebe30f0 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -12,23 +12,73 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Radio switch">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="inline-flex br-pill bg-black-10 pa1">
-                                <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
-                                    <input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    borderRadius: '9999px',
+                                    display: 'inline-flex',
+                                    padding: '4px',
+                                }}
+                            >
+                                <label
+                                    style={{
+                                        backgroundColor: isFirstChecked ? '#357EDD' : '',
+                                        borderRadius: '9999px',
+                                        color: isFirstChecked ? '#FFF' : '',
+                                        cursor: 'pointer',
+                                        padding: '16px 8px',
+                                    }}
+                                >
+                                    <input
+                                        type="radio"
+                                        style={{ display: 'none' }}
+                                        checked={isFirstChecked}
+                                        onChange={toggle}
+                                    />
                                     <div
-                                        className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
-                                        style={{ height: '8px' }}
+                                        style={{
+                                            backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
+                                            borderRadius: '4px',
+                                            height: '8px',
+                                            width: '64px',
+                                        }}
                                     />
                                 </label>
-                                <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
-                                    <input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
+                                <label
+                                    style={{
+                                        backgroundColor: isFirstChecked ? '' : '#357EDD',
+                                        borderRadius: '9999px',
+                                        color: isFirstChecked ? '' : '#FFF',
+                                        cursor: 'pointer',
+                                        padding: '16px 8px',
+                                    }}
+                                >
+                                    <input
+                                        type="radio"
+                                        style={{ display: 'none' }}
+                                        checked={!isFirstChecked}
+                                        onChange={toggle}
+                                    />
                                     <div
-                                        className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
-                                        style={{ height: '8px' }}
+                                        style={{
+                                            backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
+                                            borderRadius: '4px',
+                                            height: '8px',
+                                            width: '64px',
+                                        }}
                                     />
                                 </label>
                             </div>
@@ -67,14 +117,37 @@ const Details: React.FC<{}> = () => {
             <section>
                 <Heading title="Use cases" />
 
-                <div className="pa4">
-                    <div className="inline-flex br-pill bg-black-10 pa1">
-                        <label className="pointer pv1 ph2 br-pill flex bg-blue white">
-                            <input type="radio" className="dn" />
+                <div style={{ padding: '32px' }}>
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                            borderRadius: '9999px',
+                            display: 'inline-flex',
+                            padding: '4px',
+                        }}
+                    >
+                        <label
+                            style={{
+                                backgroundColor: '#357EDD',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                padding: '4px 8px',
+                            }}
+                        >
+                            <input type="radio" style={{ display: 'none' }} />
                             Monthly
                         </label>
-                        <label className="pointer pv1 ph2 br-pill flex">
-                            <input type="radio" className="dn" />
+                        <label
+                            style={{
+                                borderRadius: '9999px',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                padding: '4px 8px',
+                            }}
+                        >
+                            <input type="radio" style={{ display: 'none' }} />
                             Yearly
                         </label>
                     </div>
diff --git a/client/patterns/same-height-columns/Cover.tsx b/client/patterns/same-height-columns/Cover.tsx
index 8dc38f1..fd3016c 100644
--- a/client/patterns/same-height-columns/Cover.tsx
+++ b/client/patterns/same-height-columns/Cover.tsx
@@ -7,26 +7,26 @@ import Square from '../../placeholders/Square';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="flex h-100 pa2">
-                <div className="mh1" style={{ flex: 1 }}>
-                    <div className="w2 h2 mb1">
+            <div style={{ display: 'flex', height: '100%', padding: '8px' }}>
+                <div style={{ flex: 1, margin: '0 4px' }}>
+                    <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
                         <Square />
                     </div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb1"><Line /></div>
-                    <div className="w-60"><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ width: '60%' }}><Line /></div>
                 </div>
-                <div className="mh1" style={{ flex: 1 }}>
-                    <div className="w2 h2 mb1">
+                <div style={{ flex: 1, margin: '0 4px' }}>
+                    <div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
                         <Square />
                     </div>
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-80 mb1"><Line /></div>
-                    <div className="w-60 mb2"><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
 
-                    <div className="w-100 mb1"><Line /></div>
-                    <div className="w-60"><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ width: '60%' }}><Line /></div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 1ee689b..9e6d3c3 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -8,37 +8,73 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Same height columns">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center pa3">
-                            <div className="flex h-100 w-100">
-                                <div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ display: 'flex', height: '100%', width: '100%' }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.2)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        margin: '0 8px',
+                                    }}
+                                >
                                     <Rectangle height={200} />
-                                    <div className="pa3" style={{ flex: 1 }}>
+                                    <div style={{ flex: 1, padding: '16px' }}>
                                         <Block numberOfBlocks={10} />
                                     </div>
-                                    <div className="pa3 w4">
+                                    <div style={{ padding: '16px', width: '128px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
-                                <div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.2)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        margin: '0 8px',
+                                    }}
+                                >
                                     <Rectangle height={200} />
-                                    <div className="pa3" style={{ flex: 1 }}>
-                                        <div className="mb3"><Block numberOfBlocks={15} /></div>
+                                    <div style={{ flex: 1, padding: '16px' }}>
+                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
                                         <Block numberOfBlocks={5} />
                                     </div>
-                                    <div className="pa3 w4">
+                                    <div style={{ padding: '16px', width: '128px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
-                                <div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.2)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        flex: 1,
+                                        flexDirection: 'column',
+                                        margin: '0 8px',
+                                    }}
+                                >
                                     <Rectangle height={200} />
-                                    <div className="pa3" style={{ flex: 1 }}>
-                                        <div className="mb3"><Block numberOfBlocks={5} /></div>
+                                    <div style={{ flex: 1, padding: '16px' }}>
+                                        <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
                                         <Block numberOfBlocks={10} />
                                     </div>
-                                    <div className="pa3 w4">
+                                    <div style={{ padding: '16px', width: '128px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
diff --git a/client/patterns/search-box/Cover.tsx b/client/patterns/search-box/Cover.tsx
index 9b1e653..8404852 100644
--- a/client/patterns/search-box/Cover.tsx
+++ b/client/patterns/search-box/Cover.tsx
@@ -6,8 +6,27 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="w-100 flex flex-row items-center justify-end ba b--black-30 br2 pa1">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        padding: '4px',
+                        width: '100%',
+                    }}
+                >
                     <Circle />
                 </div>
             </div>
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index b876fdd..6011a0b 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -7,31 +7,60 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Search box">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w5">
-                                <div className="mb3 b--black-30 ba br1 flex">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '2px',
+                                        display: 'flex',
+                                        marginBottom: '16px',
+                                    }}
+                                >
                                     <input
                                         type="text"
                                         placeholder="Search"
-                                        className="pa1 b--transparent"
-                                        style={{ flex: 1 }}
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            padding: '4px',
+                                        }}
                                     />
-                                    <div className="pa2">
+                                    <div style={{ padding: '8px' }}>
                                         <Circle />
                                     </div>
                                 </div>
 
-                                <div className="b--black-30 ba br1 flex flex-row-reverse">
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '2px',
+                                        display: 'flex',
+                                        flexDirection: 'row-reverse',
+                                    }}
+                                >
                                     <input
                                         type="text"
                                         placeholder="Search"
-                                        className="pa1 b--transparent"
-                                        style={{ flex: 1 }}
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            padding: '4px',
+                                        }}
                                     />
-                                    <div className="pa2">
+                                    <div style={{ padding: '8px' }}>
                                         <Circle />
                                     </div>
                                 </div>
diff --git a/client/patterns/separator/Cover.tsx b/client/patterns/separator/Cover.tsx
index 79de80b..66279b1 100644
--- a/client/patterns/separator/Cover.tsx
+++ b/client/patterns/separator/Cover.tsx
@@ -7,10 +7,26 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center h1 w-80">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '16px',
+                        width: '80%',
+                    }}
+                >
                     <div style={{ flex: 1 }}><Line /></div>
-                    <div className="w-25 mh1"><Rectangle /></div>
+                    <div style={{ margin: '0 4px', width: '25%' }}><Rectangle /></div>
                     <div style={{ flex: 1 }}><Line /></div>
                 </div>
             </div>
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index 4c7f263..0dc84ed 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -7,15 +7,46 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Separator">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex items-center w-60 relative">
-                                <div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
-                                    <div className="w4"><Rectangle height={16} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    position: 'relative',
+                                    width: '60%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        left: '50%',
+                                        padding: '0 8px',
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                    }}
+                                >
+                                    <div style={{ width: '128px' }}><Rectangle height={16} /></div>
                                 </div>
-                                <div className="bb b--black-30 w-100" style={{ height: '1px' }} />
+                                <div
+                                    style={{
+                                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                        height: '1px',
+                                        width: '100%',
+                                    }}
+                                />
                             </div>
                         </div>
                     )}
diff --git a/client/patterns/sidebar/Cover.tsx b/client/patterns/sidebar/Cover.tsx
index 5b6d141..54bb0de 100644
--- a/client/patterns/sidebar/Cover.tsx
+++ b/client/patterns/sidebar/Cover.tsx
@@ -6,16 +6,34 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex">
-                <div className="b--black-30 br flex flex-column justify-end pa1 w-30">
-                    <div className="mb1"><Line /></div>
-                    <div className="w-80"><Line /></div>
+            <div style={{ display: 'flex', height: '100%' }}>
+                <div
+                    style={{
+                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'flex-end',
+                        padding: '4px',
+                        width: '30%',
+                    }}
+                >
+                    <div style={{ marginBottom: '4px' }}><Line /></div>
+                    <div style={{ width: '80%' }}><Line /></div>
                 </div>
-                <div className="flex-grow-1 pa2 b--black-30 br bw2">
-                    <div className="mb2"><Line /></div>
-                    <div className="mb2"><Line /></div>
-                    <div className="mb2"><Line /></div>
-                    <div className="w-80"><Line /></div>
+                <div
+                    style={{
+                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderWidth: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        padding: '8px',
+                    }}
+                >
+                    <div style={{ marginBottom: '8px' }}><Line /></div>
+                    <div style={{ marginBottom: '8px' }}><Line /></div>
+                    <div style={{ marginBottom: '8px' }}><Line /></div>
+                    <div style={{ width: '80%' }}><Line /></div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index da09d3f..1a9a91c 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -7,21 +7,36 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sidebar">
-            <div className="ph4 pv5">
-                <div className="lh-copy mb3">Try to scroll the main content!</div>
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex">
-                            <div className="b--black-30 br flex flex-column justify-end pa3 w-30">
-                                <div className="mb3"><Block numberOfBlocks={5} /></div>
-                                <div className="w-80"><Block numberOfBlocks={4} /></div>
+                        <div style={{ display: 'flex', height: '100%' }}>
+                            <div
+                                style={{
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'flex-end',
+                                    padding: '16px',
+                                    width: '30%',
+                                }}
+                            >
+                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
+                                <div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
                             </div>
-                            <div className="flex-grow-1 pa3 overflow-scroll">
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="w-80"><Block numberOfBlocks={10} /></div>
+                            <div
+                                style={{
+                                    flex: 1,
+                                    overflow: 'scroll',
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
                             </div>
                         </div>
                     )}
@@ -34,7 +49,10 @@ const Details: React.FC<{}> = () => {
 
     <!-- Main -->
     <main style="
-        flex-grow: 1;
+        /* Take the remaining width */
+        flex: 1;
+
+        /* Make it scrollable */
         overflow: scroll;
     ">
         ...
diff --git a/client/patterns/simple-grid/Cover.tsx b/client/patterns/simple-grid/Cover.tsx
index 42c98c4..f8ffaf2 100644
--- a/client/patterns/simple-grid/Cover.tsx
+++ b/client/patterns/simple-grid/Cover.tsx
@@ -6,21 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="w-80">
-                    <div className="flex items-center mb1">
-                        <div className="ph1" style={{ flex: '0 0 50%' }}><Rectangle /></div>
-                        <div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ width: '80%' }}>
+                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                        <div style={{ flex: '0 0 50%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
                     </div>
-                    <div className="flex items-center mb1">
-                        <div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
-                        <div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
-                        <div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
+                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
                     </div>
-                    <div className="flex items-center">
-                        <div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
-                        <div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
-                        <div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
+                    <div style={{ alignItems: 'center', display: 'flex' }}>
+                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
+                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 61311ee..998dbad 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -7,76 +7,85 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Simple grid">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w-60">
-                                <div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '60%' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
 
-                                <div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
-                                    <div className="ph2" style={{ flex: '0 0 50%' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                                    <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
 
-                                <div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
 
-                                <div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
-                                    <div className="ph2" style={{ flex: '0 0 33.3333%' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                                    <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
 
-                                <div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
 
-                                <div className="flex" style={{ margin: '0 -8px 0 -8px' }}>
-                                    <div className="ph2" style={{ flex: '0 0 25%' }}>
+                                <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
+                                    <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '1' }}>
+                                    <div style={{ flex: '1', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
-                                    <div className="ph2" style={{ flex: '0 0 33.3333%' }}>
+                                    <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
                                         <Rectangle height={32} />
                                     </div>
                                 </div>
diff --git a/client/patterns/slider/Cover.tsx b/client/patterns/slider/Cover.tsx
index 8398737..332987d 100644
--- a/client/patterns/slider/Cover.tsx
+++ b/client/patterns/slider/Cover.tsx
@@ -7,9 +7,25 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center h1 w-80">
-                    <div className="w-20"><Line /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '16px',
+                        width: '80%',
+                    }}
+                >
+                    <div style={{ width: '20%' }}><Line /></div>
                     <Circle />
                     <div style={{ flex: 1 }}><Line /></div>
                 </div>
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 978a245..3e81e34 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -8,12 +8,28 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Slider">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex items-center h1 w5">
-                                <div className="w-20"><Rectangle height={2} /></div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    height: '16px',
+                                    width: '256px',
+                                }}
+                            >
+                                <div style={{ width: '20%' }}><Rectangle height={2} /></div>
                                 <Circle size={32} />
                                 <div style={{ flex: 1 }}><Rectangle height={2} /></div>
                             </div>
diff --git a/client/patterns/spin-button/Cover.tsx b/client/patterns/spin-button/Cover.tsx
index bad86cf..d269bd3 100644
--- a/client/patterns/spin-button/Cover.tsx
+++ b/client/patterns/spin-button/Cover.tsx
@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
                 <div
                     style={{
                         border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '2px',
+                        borderRadius: '4px',
                         display: 'flex',
                         justifyContent: 'flex-end',
                         width: '80%',
diff --git a/client/patterns/split-navigation/Cover.tsx b/client/patterns/split-navigation/Cover.tsx
index ce22cf3..3bc94e7 100644
--- a/client/patterns/split-navigation/Cover.tsx
+++ b/client/patterns/split-navigation/Cover.tsx
@@ -6,11 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center w-80 b--black-30 ba br2 pa1">
-                    <div className="w1 mr1"><Rectangle /></div>
-                    <div className="w1 mr1"><Rectangle /></div>
-                    <div className="w1 ml-auto"><Rectangle /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '8px',
+                        display: 'flex',
+                        padding: '4px',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
+                    <div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
+                    <div style={{ marginLeft: 'auto', width: '16px' }}><Rectangle /></div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index 486c7ad..1edf3e3 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -9,15 +9,35 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split navigation">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
-                                <li className="w-20 mr1"><Rectangle /></li>
-                                <li className="w-10 mr1"><Rectangle /></li>
-                                <li className="w-20 mr1"><Rectangle /></li>
-                                <li className="w-10 ml-auto"><Rectangle /></li>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <ul
+                                style={{
+                                    alignItems: 'center',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '8px',
+                                    display: 'flex',
+                                    listStyleType: 'none',
+                                    margin: 0,
+                                    padding: '16px',
+                                    width: '60%',
+                                }}
+                            >
+                                <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
+                                <li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
+                                <li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
+                                <li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
                             </ul>
                         </div>
                     )}
diff --git a/client/patterns/split-screen/Cover.tsx b/client/patterns/split-screen/Cover.tsx
index 38f1257..b9ddb53 100644
--- a/client/patterns/split-screen/Cover.tsx
+++ b/client/patterns/split-screen/Cover.tsx
@@ -7,17 +7,32 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex">
-                <div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
-                    <div className="mb1"><Circle /></div>
+            <div style={{ display: 'flex', height: '100%' }}>
+                <div
+                    style={{
+                        alignItems: 'center',
+                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ marginBottom: '4px' }}><Circle /></div>
                 </div>
-                <div className="flex flex-column justify-center" style={{ flex: 1 }}>
-                    <div className="pa2">
-                        <div className="mb1 w-100"><Line /></div>
-                        <div className="mb1 w-100"><Line /></div>
-                        <div className="mb1 w-80"><Line /></div>
-                        <div className="mb1 w-80"><Line /></div>
-                        <div className="w-60"><Line /></div>
+                <div
+                    style={{
+                        flex: 1,
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ padding: '8px' }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ width: '60%' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index 7f49d7f..bacc847 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -9,21 +9,34 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split screen">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex">
+                        <div style={{ display: 'flex', height: '100%' }}>
                             <div
-                                className="b--black-30 br flex flex-column justify-center items-center"
-                                style={{ flex: 1 }}
+                                style={{
+                                    alignItems: 'center',
+                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                }}
                             >
-                                <div className="mb3"><Circle size={128} /></div>
-                                <div className="w-60"><Rectangle /></div>
+                                <div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
+                                <div style={{ width: '60%' }}><Rectangle /></div>
                             </div>
-                            <div className="flex flex-column justify-center" style={{ flex: 1 }}>
-                                <div className="pa4">
-                                    <div className="mb4"><Rectangle /></div>
-                                    <div className="mb4"><Block numberOfBlocks={15} /></div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    flex: 1,
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                }}
+                            >
+                                <div style={{ padding: '32px' }}>
+                                    <div style={{ marginBottom: '32px' }}><Rectangle /></div>
+                                    <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
                                     <Block numberOfBlocks={10} />
                                 </div>
                             </div>
diff --git a/client/patterns/stepper-input/Cover.tsx b/client/patterns/stepper-input/Cover.tsx
index 8b65cf7..717c01b 100644
--- a/client/patterns/stepper-input/Cover.tsx
+++ b/client/patterns/stepper-input/Cover.tsx
@@ -5,11 +5,47 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex items-center justify-center pa2">
-                <div className="b--black-30 ba br2 flex w-100 h1">
-                    <div className="b--black-30 br flex items-center justify-center w1">-</div>
-                    <div className="flex-grow-1" />
-                    <div className="b--black-30 bl flex items-center justify-center w1">+</div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        height: '24px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            width: '16px',
+                        }}
+                    >
+                        -
+                    </div>
+                    <div style={{ flex: 1 }} />
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            width: '16px',
+                        }}
+                    >
+                        +
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 05098e1..daeeec2 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -14,25 +13,72 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Stepper input">
-            <div className="ph4 pv5">
-                <div className="lh-copy mb3">
-                    The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
-                </div>
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="b--black-30 ba br2 flex h2 w4">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '8px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    width: '128px',
+                                }}
+                            >
                                 <button
-                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                        borderColor: 'transparent',
+                                        cursor: 'pointer',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        width: '32px',
+                                    }}
                                     onClick={decrease}
                                 >
                                     -
                                 </button>
-                                <div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
-                                    <input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
+                                <div
+                                    style={{
+                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                        flex: 1,
+                                        height: '100%',
+                                    }}
+                                >
+                                    <input
+                                        type="text"
+                                        style={{
+                                            borderColor: 'transparent',
+                                            height: '100%',
+                                            padding: '8px',
+                                            width: '100%',
+                                        }}
+                                        value={value}
+                                        onChange={change}
+                                    />
                                 </div>
                                 <button
-                                    className="bg-black-05 bn flex items-center justify-center pointer w2"
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                        borderColor: 'transparent',
+                                        cursor: 'pointer',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        width: '32px',
+                                    }}
                                     onClick={increase}
                                 >
                                     +
diff --git a/client/patterns/sticky-footer/Cover.tsx b/client/patterns/sticky-footer/Cover.tsx
index 9c97e3c..91ece32 100644
--- a/client/patterns/sticky-footer/Cover.tsx
+++ b/client/patterns/sticky-footer/Cover.tsx
@@ -6,28 +6,58 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column">
-                <div className="flex-shrink-0 b--black-30 br bw2">
-                    <div className="w-100 flex items-center pa2">
-                        <div className="w1"><Line /></div>
-                        <div className="w1 ml-auto"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
-                    </div>
-                    <Line />
-                </div>
-                <div className="flex-grow-1 b--black-30 br bw2">
-                    <div className="pa2">
-                        <div className="w3 mb2"><Line /></div>
-                        <div className="w3 mb2"><Line /></div>
-                        <div className="w2"><Line /></div>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }}
+            >
+                <div
+                    style={{
+                        borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRight: '4px solid rgba(0, 0, 0, 0.3)',
+                        display: 'flex',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            padding: '8px',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
                     </div>
                 </div>
-                <div className="flex-shrink-0">
+                <div
+                    style={{
+                        borderRight: '4px solid rgba(0, 0, 0, 0.3)',
+                        flex: 1,
+                    }}
+                >
+                    <div style={{ padding: '8px' }}>
+                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
+                        <div style={{ width: '32px' }}><Line /></div>
+                    </div>
+                </div>
+                <div>
                     <Line />
-                    <div className="w-100 flex items-center pa2">
-                        <div className="w1"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            padding: '8px',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 4e002a2..1339118 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -8,21 +8,39 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky footer">
-            <div className="ph4 pv5">
-                <div className="lh-copy mb3">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     The footer always sticks to the bottom if the main content is short.
                 </div>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column">
-                            <div className="flex-shrink-0 bb b--black-30 pa3">
-                                <div className="w-50"><Rectangle /></div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                    flexShrink: 0,
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ width: '50%' }}><Rectangle /></div>
                             </div>
-                            <div className="flex-grow-1 pa3">
+                            <div style={{ flexGrow: 1, padding: '16px' }}>
                                 <Block numberOfBlocks={20} />
                             </div>
-                            <div className="flex-shrink-0 bt b--black-30 pa3">
-                            <div className="w-40"><Rectangle /></div>
+                            <div
+                                style={{
+                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                    flexShrink: 0,
+                                    padding: '16px',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}><Rectangle /></div>
                             </div>
                         </div>
                     )}
diff --git a/client/patterns/sticky-header/Cover.tsx b/client/patterns/sticky-header/Cover.tsx
index fee6f4b..03e38b8 100644
--- a/client/patterns/sticky-header/Cover.tsx
+++ b/client/patterns/sticky-header/Cover.tsx
@@ -6,20 +6,39 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column">
-                <div className="flex-shrink-0">
-                    <div className="w-100 flex items-center pa2">
-                        <div className="w1"><Line /></div>
-                        <div className="w1 ml-auto"><Line /></div>
-                        <div className="w1 ml1"><Line /></div>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }}
+            >
+                <div style={{ flexShrink: 0 }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            padding: '8px',
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
+                        <div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
                     </div>
                     <Line />
                 </div>
-                <div className="flex-grow-1 b--black-30 br bw2">
-                    <div className="pa2">
-                        <div className="w3 mb2"><Line /></div>
-                        <div className="w3 mb2"><Line /></div>
-                        <div className="w2"><Line /></div>
+                <div
+                    style={{
+                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderWidth: '4px',
+                        flexGrow: 1,
+                    }}
+                >
+                    <div style={{ padding: '8px' }}>
+                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
+                        <div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
+                        <div style={{ width: '32px' }}><Line /></div>
                     </div>
                 </div>
             </div>
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index 478468c..3458e74 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -8,19 +8,27 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky header">
-            <div className="ph4 pv5">
-                <div className="lh-copy mb3">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content to see the header sticks to the top of page.
                 </div>
                 <BrowserFrame
                     content={(
                         <div>
-                            <div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
-                                <div className="w-50"><Rectangle /></div>
+                            <div
+                                style={{
+                                    backgroundColor: '#FFF',
+                                    borderBottom: '1ox solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    position: 'sticky',
+                                    top: 0,
+                                }}
+                            >
+                                <div style={{ width: '50%' }}><Rectangle /></div>
                             </div>
-                            <div className="pa3">
-                                <div className="mb4"><Block numberOfBlocks={20} /></div>
-                                <div className="mb4"><Block numberOfBlocks={40} /></div>
+                            <div style={{ padding: '16px' }}>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
+                                <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
                                 <div><Block numberOfBlocks={30} /></div>
                             </div>
                         </div>
diff --git a/client/patterns/switch/Cover.tsx b/client/patterns/switch/Cover.tsx
index 008da00..ff56a4f 100644
--- a/client/patterns/switch/Cover.tsx
+++ b/client/patterns/switch/Cover.tsx
@@ -5,9 +5,35 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="ba b--black-10 bg-black-30 br-pill h1 w2 flex justify-end">
-                    <div className="bg-white br-pill w1 h-100" />
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        border: '1px solid rgba(0, 0, 0, 0.1)',
+                        borderRadius: '9999px',
+                        display: 'flex',
+                        height: '16px',
+                        justifyContent: 'flex-end',
+                        width: '32px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderRadius: '9999px',
+                            height: '100%',
+                            width: '16px',
+                        }}
+                    />
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index b3123eb..7949848 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -11,17 +11,48 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Switch">
-            <div className="ph4 pv5">
-                <div className="lh-copy mb3">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
                     The checkbox is placed inside a label. So when clicking on the label,
                     the checkbox will be checked even though it's hidden.
                 </div>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
-                                <input type="checkbox" className="dn" checked={checked} onChange={toggle} />
-                                <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <label
+                                style={{
+                                    backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
+                                    border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
+                                    borderRadius: '9999px',
+                                    display: 'flex',
+                                    height: '32px',
+                                    justifyContent: checked ? 'flex-end' : '',
+                                    width: '64px',
+                                }}
+                            >
+                                <input
+                                    type="checkbox"
+                                    style={{ display: 'none' }}
+                                    checked={checked}
+                                    onChange={toggle}
+                                />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '9999px',
+                                        width: '32px',
+                                    }}
+                                />
                             </label>
                         </div>
                     )}
diff --git a/client/patterns/tab/Cover.tsx b/client/patterns/tab/Cover.tsx
index 0e2431b..6c9879d 100644
--- a/client/patterns/tab/Cover.tsx
+++ b/client/patterns/tab/Cover.tsx
@@ -6,16 +6,40 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex items-center justify-center">
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
                     <div
-                        className="ph2 pv1 ba b--black-30 br2 br--top"
-                        style={{ borderBottomColor: 'transparent' }}
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderBottomColor: 'transparent',
+                            borderTopLeftRadius: '4px',
+                            borderTopRightRadius: '4px',
+                            padding: '4px 8px',
+                        }}
                     >
                         <Circle size={8} />
                     </div>
-                    <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
-                    <div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
+                        <Circle size={8} />
+                    </div>
+                    <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
+                        <Circle size={8} />
+                    </div>
                 </div>
             </div>
         </Frame>
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 0be48f7..c3ae3a5 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -16,9 +16,13 @@ const Details: React.FC<{}> = () => {
         const click = () => setActiveTab(tabIndex);
         return (
             <div
-                className={`pointer pa3 b--black-30 ${isActive ? 'ba br2 br--top' : 'bb'}`}
                 style={{
-                    borderBottomColor: isActive ? 'transparent' : '',
+                    [isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
+                    borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
+                    borderTopLeftRadius: '4px',
+                    borderTopRightRadius: '4px',
+                    cursor: 'pointer',
+                    padding: '16px',
                 }}
                 onClick={click}
             >
@@ -29,23 +33,38 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Tab">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex items-center justify-center">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                            >
                                 <Tab tabIndex={0}>
-                                    <div className="w3">
+                                    <div style={{ width: '64px' }}>
                                         <Rectangle height={8} />
                                     </div>
                                 </Tab>
                                 <Tab tabIndex={1}>
-                                    <div className="w2">
+                                    <div style={{ width: '32px' }}>
                                         <Rectangle height={8} />
                                     </div>
                                 </Tab>
                                 <Tab tabIndex={2}>
-                                    <div className="w4">
+                                    <div style={{ width: '128px' }}>
                                         <Rectangle height={8} />
                                     </div>
                                 </Tab>
diff --git a/client/patterns/toggle-password-visibility/Cover.tsx b/client/patterns/toggle-password-visibility/Cover.tsx
index 7eee841..db7f449 100644
--- a/client/patterns/toggle-password-visibility/Cover.tsx
+++ b/client/patterns/toggle-password-visibility/Cover.tsx
@@ -6,12 +6,31 @@ import Frame from '../../placeholders/Frame';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center pa2">
-                <div className="w-100 flex flex-row items-center justify-between ba b--black-30 br2 pa1">
-                    <div className="flex items-center">
-                        <div className="mr1"><Circle size={8} /></div>
-                        <div className="mr1"><Circle size={8} /></div>
-                        <div className="mr1"><Circle size={8} /></div>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '4px',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ alignItems: 'center', display: 'flex' }}>
+                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
+                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
+                        <div style={{ marginRight: '4px' }}><Circle size={8} /></div>
                     </div>
                     <Circle />
                 </div>
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index db9df0f..90dfbcd 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -9,14 +9,41 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Toggle password visibility">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="w5">
-                                <div className="b--black-30 ba br1 flex">
-                                    <input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
-                                    <button className="b--transparent pa2" onClick={toggle}>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                    }}
+                                >
+                                    <input
+                                        type={visible ? 'text' : 'password'}
+                                        autoComplete="off"
+                                        style={{
+                                            borderColor: 'transparent',
+                                            flex: 1,
+                                            marginLeft: '1px',
+                                            padding: '4px',
+                                        }}
+                                    />
+                                    <button
+                                        style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
+                                        onClick={toggle}
+                                    >
                                         <svg
                                             viewBox="0 0 24 24"
                                             style={{
diff --git a/client/patterns/wizard/Cover.tsx b/client/patterns/wizard/Cover.tsx
index a399984..a3b5737 100644
--- a/client/patterns/wizard/Cover.tsx
+++ b/client/patterns/wizard/Cover.tsx
@@ -6,21 +6,93 @@ import Line from '../../placeholders/Line';
 const Cover: React.FC<{}> = () => {
     return (
         <Frame>
-            <div className="h-100 flex flex-column items-center justify-center">
-                <div className="flex w-80">
-                    <div className="flex items-center justify-center" style={{ flex: 1 }}>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ display: 'flex', width: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: 'center',
+                        }}
+                    >
                         <div style={{ flex: 1 }} />
-                        <div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">1</div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                fontSize: '12px',
+                                height: '16px',
+                                justifyContent: 'center',
+                                width: '16px',
+                            }}
+                        >
+                            1
+                        </div>
                         <div style={{ flex: 1 }}><Line /></div>
                     </div>
-                    <div className="flex items-center justify-center" style={{ flex: 1 }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: 'center',
+                        }}
+                    >
                         <div style={{ flex: 1 }}><Line /></div>
-                        <div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">2</div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                fontSize: '12px',
+                                height: '16px',
+                                justifyContent: 'center',
+                                width: '16px',
+                            }}
+                        >
+                            2
+                        </div>
                         <div style={{ flex: 1 }}><Line /></div>
                     </div>
-                    <div className="flex items-center justify-center" style={{ flex: 1 }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: 'center',
+                        }}
+                    >
                         <div style={{ flex: 1 }}><Line /></div>
-                        <div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">3</div>
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                borderRadius: '9999px',
+                                color: '#FFF',
+                                display: 'flex',
+                                fontSize: '12px',
+                                height: '16px',
+                                justifyContent: 'center',
+                                width: '16px',
+                            }}
+                        >
+                            3
+                        </div>
                         <div style={{ flex: 1 }} />
                     </div>
                 </div>
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index 730f920..f1d8286 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -9,38 +9,95 @@ import Line from '../../placeholders/Line';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Wizard">
-            <div className="ph4 pv5">
+            <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
-                        <div className="h-100 flex flex-column items-center justify-center">
-                            <div className="flex w-80">
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ display: 'flex', width: '80%' }}>
                                 <div style={{ flex: 1 }}>
-                                    <div className="mb3 flex items-center justify-center">
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            marginBottom: '16px',
+                                        }}
+                                    >
                                         <div style={{ flex: 1 }} />
-                                        <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
+                                        <div
+                                            style={{
+                                                alignItems: 'center',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                margin: '0 4px',
+                                            }}
+                                        >
+                                            <Circle size={32} />
+                                        </div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center">
+                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
                                         <Block justify='center' numberOfBlocks={5} />
                                     </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
-                                    <div className="mb3 flex items-center justify-center">
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            marginBottom: '16px',
+                                        }}
+                                    >
                                         <div style={{ flex: 1 }}><Line /></div>
-                                        <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
+                                        <div
+                                            style={{
+                                                alignItems: 'center',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                margin: '0 4px',
+                                            }}
+                                        >
+                                            <Circle size={32} />
+                                        </div>
                                         <div style={{ flex: 1 }}><Line /></div>
                                     </div>
-                                    <div className="ph3 flex justify-center">
+                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
                                         <Block justify='center' numberOfBlocks={5} />
                                     </div>
                                 </div>
                                 <div style={{ flex: 1 }}>
-                                    <div className="mb3 flex items-center justify-center">
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            marginBottom: '16px',
+                                        }}
+                                    >
                                         <div style={{ flex: 1 }}><Line /></div>
-                                        <div className="flex items-center justify-center mh1"><Circle size={32} /></div>
+                                        <div
+                                            style={{
+                                                alignItems: 'center',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                margin: '0 4px',
+                                            }}
+                                        >
+                                            <Circle size={32} />
+                                        </div>
                                         <div style={{ flex: 1 }} />
                                     </div>
-                                    <div className="ph3 flex justify-center">
+                                    <div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
                                         <Block justify='center' numberOfBlocks={5} />
                                     </div>
                                 </div>
diff --git a/client/placeholders/Block.tsx b/client/placeholders/Block.tsx
index 71c8c78..d153322 100644
--- a/client/placeholders/Block.tsx
+++ b/client/placeholders/Block.tsx
@@ -10,13 +10,34 @@ interface BlockProps {
 
 const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
     return (
-        <div className={`flex flex-wrap w-100 justify-${justify}`}>
+        <div
+            style={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: justify,
+                width: '100%',
+            }}
+        >
             {
                 Array(numberOfBlocks).fill(0).map((_, i) => {
                     const s = random(1, 5);
                     return (
-                        <div key={i} className={`mr2 mb2 w-${s * 10}`}>
-                            <div className="w-100 bg-black-30 br-pill" style={{ height: `${blockHeight}px` }} />
+                        <div
+                            key={i}
+                            style={{
+                                marginBottom: '8px',
+                                marginRight: '8px',
+                                width: `${s * 10}%`,
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '9999px',
+                                    height: `${blockHeight}px`,
+                                    width: '100%',
+                                }}
+                            />
                         </div>
                     );
                 })
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 5577357..3a35c38 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -12,41 +12,100 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
     const flip = () => setContentActive((isActive) => !isActive);
 
     return (
-        <div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
-            <div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
-                <div className="br-100 mr1 w1 h1 bg-red" />
-                <div className="br-100 mr1 w1 h1 bg-gold" />
-                <div className="br-100 mr1 w1 h1 bg-red" />
-                <div className="ml-auto">
-                    <button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
+        <div
+            style={{
+                border: '1px solid rgba(0, 0, 0, 0.2)',
+                borderRadius: '4px',
+                boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)',
+            }}
+        >
+            <div
+                style={{
+                    alignItems: 'center',
+                    backgroundColor: 'rgba( 0, 0, 0, 0.05)',
+                    borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
+                    display: 'flex',
+                    padding: '8px 16px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#FF4136',
+                        borderRadius: '100%',
+                        height: '16px',
+                        marginRight: '4px',
+                        width: '16px',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: '#FFB700',
+                        borderRadius: '100%',
+                        height: '16px',
+                        marginRight: '4px',
+                        width: '16px',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: '#FF4136',
+                        borderRadius: '100%',
+                        height: '16px',
+                        marginRight: '4px',
+                        width: '16px',
+                    }}
+                />
+                <div style={{ marginLeft: 'auto' }}>
+                    <button
+                        style={{
+                            backgroundColor: '#00449E',
+                            borderColor: 'transparent',
+                            borderRadius: '4px',
+                            color: '#FFF',
+                            cursor: 'pointer',
+                            padding: '4px 8px',
+                        }}
+                        onClick={flip}
+                    >
                         {isContentActive ? 'Source' : 'Demo'}
                     </button>
                 </div>
             </div>
             <div
-                className="relative"
                 style={{
                     height: '512px',
+                    position: 'relative',
                     transform: isContentActive ? '' : 'rotateY(180deg)',
                     transformStyle: 'preserve-3d',
                     transition: 'transform 1s',
                 }}
             >
                 <div
-                    className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
                     style={{
                         WebkitBackfaceVisibility: 'hidden',
                         backfaceVisibility: 'hidden',
+                        height: '100%',
+                        left: 0,
+                        opacity: isContentActive ? 1 : 0,
+                        overflow: 'scroll',
+                        position: 'absolute',
+                        top: 0,
+                        width: '100%',
                     }}
                 >
                     {content}
                 </div>
                 <div
-                    className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
                     style={{
                         WebkitBackfaceVisibility: 'hidden',
                         backfaceVisibility: 'hidden',
+                        height: '100%',
+                        left: 0,
+                        opacity: isContentActive ? 0 : 1,
+                        position: 'absolute',
+                        top: 0,
                         transform: 'rotateY(180deg)',
+                        width: '100%',
                     }}
                 >
                     <SampleCode lang="html" code={source} />
diff --git a/client/placeholders/Line.tsx b/client/placeholders/Line.tsx
index 83a866f..5fc0323 100644
--- a/client/placeholders/Line.tsx
+++ b/client/placeholders/Line.tsx
@@ -3,8 +3,11 @@ import React from 'react';
 const Line: React.FC<{}> = () => {
     return (
         <div
-            className="w-100 bg-black-30"
-            style={{ height: '1px' }}
+            style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                height: '1px',
+                width: '100%',
+            }}
         />
     );
 };
diff --git a/client/placeholders/Square.tsx b/client/placeholders/Square.tsx
index 8caf674..e35d9df 100644
--- a/client/placeholders/Square.tsx
+++ b/client/placeholders/Square.tsx
@@ -6,7 +6,14 @@ interface SquareProps {
 
 const Square: React.FC<SquareProps> = ({ size = 8 }) => {
     return (
-        <div className="w-100 h-100 bg-black-30 br2" />
+        <div
+            style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                borderRadius: '4px',
+                height: '100%',
+                width: '100%',
+            }}
+        />
     );
 };
 
diff --git a/client/placeholders/VerticalLine.tsx b/client/placeholders/VerticalLine.tsx
index 0c3e857..32d737c 100644
--- a/client/placeholders/VerticalLine.tsx
+++ b/client/placeholders/VerticalLine.tsx
@@ -3,8 +3,11 @@ import React from 'react';
 const VerticalLine: React.FC<{}> = () => {
     return (
         <div
-            className="h-100 bg-black-30"
-            style={{ width: '1px' }}
+            style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                height: '100%',
+                width: '1px',
+            }}
         />
     );
 };
diff --git a/vendors/normalize.css@8.0.1/normalize.css b/vendors/normalize.css@8.0.1/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/vendors/normalize.css@8.0.1/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/vendors/tachyons@4.10.0/tachyons.min.css b/vendors/tachyons@4.10.0/tachyons.min.css
deleted file mode 100644
index 3e095bb..0000000
--- a/vendors/tachyons@4.10.0/tachyons.min.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! TACHYONS v4.9.1 | http://tachyons.io */
-/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.border-box,a,article,aside,blockquote,body,code,dd,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],legend,li,main,nav,ol,p,pre,section,table,td,textarea,th,tr,ul{box-sizing:border-box}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--9x16{padding-bottom:177.77%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--3x4{padding-bottom:133.33%}.aspect-ratio--6x4{padding-bottom:66.6%}.aspect-ratio--4x6{padding-bottom:150%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--5x8{padding-bottom:160%}.aspect-ratio--7x5{padding-bottom:71.42%}.aspect-ratio--5x7{padding-bottom:140%}.aspect-ratio--1x1{padding-bottom:100%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}img{max-width:100%}.cover{background-size:cover!important}.contain{background-size:contain!important}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}.outline{outline:1px solid}.outline-transparent{outline:1px solid transparent}.outline-0{outline:0}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--moon-gray{border-color:#ccc}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:hsla(0,0%,100%,.9)}.b--white-80{border-color:hsla(0,0%,100%,.8)}.b--white-70{border-color:hsla(0,0%,100%,.7)}.b--white-60{border-color:hsla(0,0%,100%,.6)}.b--white-50{border-color:hsla(0,0%,100%,.5)}.b--white-40{border-color:hsla(0,0%,100%,.4)}.b--white-30{border-color:hsla(0,0%,100%,.3)}.b--white-20{border-color:hsla(0,0%,100%,.2)}.b--white-10{border-color:hsla(0,0%,100%,.1)}.b--white-05{border-color:hsla(0,0%,100%,.05)}.b--white-025{border-color:hsla(0,0%,100%,.025)}.b--white-0125{border-color:hsla(0,0%,100%,.0125)}.b--black-90{border-color:rgba(0,0,0,.9)}.b--black-80{border-color:rgba(0,0,0,.8)}.b--black-70{border-color:rgba(0,0,0,.7)}.b--black-60{border-color:rgba(0,0,0,.6)}.b--black-50{border-color:rgba(0,0,0,.5)}.b--black-40{border-color:rgba(0,0,0,.4)}.b--black-30{border-color:rgba(0,0,0,.3)}.b--black-20{border-color:rgba(0,0,0,.2)}.b--black-10{border-color:rgba(0,0,0,.1)}.b--black-05{border-color:rgba(0,0,0,.05)}.b--black-025{border-color:rgba(0,0,0,.025)}.b--black-0125{border-color:rgba(0,0,0,.0125)}.b--dark-red{border-color:#e7040f}.b--red{border-color:#ff4136}.b--light-red{border-color:#ff725c}.b--orange{border-color:#ff6300}.b--gold{border-color:#ffb700}.b--yellow{border-color:gold}.b--light-yellow{border-color:#fbf1a9}.b--purple{border-color:#5e2ca5}.b--light-purple{border-color:#a463f2}.b--dark-pink{border-color:#d5008f}.b--hot-pink{border-color:#ff41b4}.b--pink{border-color:#ff80cc}.b--light-pink{border-color:#ffa3d7}.b--dark-green{border-color:#137752}.b--green{border-color:#19a974}.b--light-green{border-color:#9eebcf}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fffceb}.b--washed-red{border-color:#ffdfdf}.b--transparent{border-color:transparent}.b--inherit{border-color:inherit}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br-pill{border-radius:9999px}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}.shadow-1{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}.fl{float:left}.fl,.fr{_display:inline}.fr{float:right}.fn{float:none}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.serif{font-family:georgia,times,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}.code,code{font-family:Consolas,monaco,monospace}.courier{font-family:Courier Next,courier,monospace}.helvetica{font-family:helvetica neue,helvetica,sans-serif}.avenir{font-family:avenir next,avenir,sans-serif}.athelas{font-family:athelas,georgia,serif}.georgia{font-family:georgia,serif}.times{font-family:times,serif}.bodoni{font-family:Bodoni MT,serif}.calisto{font-family:Calisto MT,serif}.garamond{font-family:garamond,serif}.baskerville{font-family:baskerville,serif}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}.input-reset{-webkit-appearance:none;-moz-appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}.tracked{letter-spacing:.1em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.25em}.lh-solid{line-height:1}.lh-title{line-height:1.25}.lh-copy{line-height:1.5}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:color .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.rotate-45{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.black-90{color:rgba(0,0,0,.9)}.black-80{color:rgba(0,0,0,.8)}.black-70{color:rgba(0,0,0,.7)}.black-60{color:rgba(0,0,0,.6)}.black-50{color:rgba(0,0,0,.5)}.black-40{color:rgba(0,0,0,.4)}.black-30{color:rgba(0,0,0,.3)}.black-20{color:rgba(0,0,0,.2)}.black-10{color:rgba(0,0,0,.1)}.black-05{color:rgba(0,0,0,.05)}.white-90{color:hsla(0,0%,100%,.9)}.white-80{color:hsla(0,0%,100%,.8)}.white-70{color:hsla(0,0%,100%,.7)}.white-60{color:hsla(0,0%,100%,.6)}.white-50{color:hsla(0,0%,100%,.5)}.white-40{color:hsla(0,0%,100%,.4)}.white-30{color:hsla(0,0%,100%,.3)}.white-20{color:hsla(0,0%,100%,.2)}.white-10{color:hsla(0,0%,100%,.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#e7040f}.red{color:#ff4136}.light-red{color:#ff725c}.orange{color:#ff6300}.gold{color:#ffb700}.yellow{color:gold}.light-yellow{color:#fbf1a9}.purple{color:#5e2ca5}.light-purple{color:#a463f2}.dark-pink{color:#d5008f}.hot-pink{color:#ff41b4}.pink{color:#ff80cc}.light-pink{color:#ffa3d7}.dark-green{color:#137752}.green{color:#19a974}.light-green{color:#9eebcf}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fffceb}.washed-red{color:#ffdfdf}.color-inherit{color:inherit}.bg-black-90{background-color:rgba(0,0,0,.9)}.bg-black-80{background-color:rgba(0,0,0,.8)}.bg-black-70{background-color:rgba(0,0,0,.7)}.bg-black-60{background-color:rgba(0,0,0,.6)}.bg-black-50{background-color:rgba(0,0,0,.5)}.bg-black-40{background-color:rgba(0,0,0,.4)}.bg-black-30{background-color:rgba(0,0,0,.3)}.bg-black-20{background-color:rgba(0,0,0,.2)}.bg-black-10{background-color:rgba(0,0,0,.1)}.bg-black-05{background-color:rgba(0,0,0,.05)}.bg-white-90{background-color:hsla(0,0%,100%,.9)}.bg-white-80{background-color:hsla(0,0%,100%,.8)}.bg-white-70{background-color:hsla(0,0%,100%,.7)}.bg-white-60{background-color:hsla(0,0%,100%,.6)}.bg-white-50{background-color:hsla(0,0%,100%,.5)}.bg-white-40{background-color:hsla(0,0%,100%,.4)}.bg-white-30{background-color:hsla(0,0%,100%,.3)}.bg-white-20{background-color:hsla(0,0%,100%,.2)}.bg-white-10{background-color:hsla(0,0%,100%,.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.bg-dark-red{background-color:#e7040f}.bg-red{background-color:#ff4136}.bg-light-red{background-color:#ff725c}.bg-orange{background-color:#ff6300}.bg-gold{background-color:#ffb700}.bg-yellow{background-color:gold}.bg-light-yellow{background-color:#fbf1a9}.bg-purple{background-color:#5e2ca5}.bg-light-purple{background-color:#a463f2}.bg-dark-pink{background-color:#d5008f}.bg-hot-pink{background-color:#ff41b4}.bg-pink{background-color:#ff80cc}.bg-light-pink{background-color:#ffa3d7}.bg-dark-green{background-color:#137752}.bg-green{background-color:#19a974}.bg-light-green{background-color:#9eebcf}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fffceb}.bg-washed-red{background-color:#ffdfdf}.bg-inherit{background-color:inherit}.hover-black:focus,.hover-black:hover{color:#000}.hover-near-black:focus,.hover-near-black:hover{color:#111}.hover-dark-gray:focus,.hover-dark-gray:hover{color:#333}.hover-mid-gray:focus,.hover-mid-gray:hover{color:#555}.hover-gray:focus,.hover-gray:hover{color:#777}.hover-silver:focus,.hover-silver:hover{color:#999}.hover-light-silver:focus,.hover-light-silver:hover{color:#aaa}.hover-moon-gray:focus,.hover-moon-gray:hover{color:#ccc}.hover-light-gray:focus,.hover-light-gray:hover{color:#eee}.hover-near-white:focus,.hover-near-white:hover{color:#f4f4f4}.hover-white:focus,.hover-white:hover{color:#fff}.hover-black-90:focus,.hover-black-90:hover{color:rgba(0,0,0,.9)}.hover-black-80:focus,.hover-black-80:hover{color:rgba(0,0,0,.8)}.hover-black-70:focus,.hover-black-70:hover{color:rgba(0,0,0,.7)}.hover-black-60:focus,.hover-black-60:hover{color:rgba(0,0,0,.6)}.hover-black-50:focus,.hover-black-50:hover{color:rgba(0,0,0,.5)}.hover-black-40:focus,.hover-black-40:hover{color:rgba(0,0,0,.4)}.hover-black-30:focus,.hover-black-30:hover{color:rgba(0,0,0,.3)}.hover-black-20:focus,.hover-black-20:hover{color:rgba(0,0,0,.2)}.hover-black-10:focus,.hover-black-10:hover{color:rgba(0,0,0,.1)}.hover-white-90:focus,.hover-white-90:hover{color:hsla(0,0%,100%,.9)}.hover-white-80:focus,.hover-white-80:hover{color:hsla(0,0%,100%,.8)}.hover-white-70:focus,.hover-white-70:hover{color:hsla(0,0%,100%,.7)}.hover-white-60:focus,.hover-white-60:hover{color:hsla(0,0%,100%,.6)}.hover-white-50:focus,.hover-white-50:hover{color:hsla(0,0%,100%,.5)}.hover-white-40:focus,.hover-white-40:hover{color:hsla(0,0%,100%,.4)}.hover-white-30:focus,.hover-white-30:hover{color:hsla(0,0%,100%,.3)}.hover-white-20:focus,.hover-white-20:hover{color:hsla(0,0%,100%,.2)}.hover-white-10:focus,.hover-white-10:hover{color:hsla(0,0%,100%,.1)}.hover-inherit:focus,.hover-inherit:hover{color:inherit}.hover-bg-black:focus,.hover-bg-black:hover{background-color:#000}.hover-bg-near-black:focus,.hover-bg-near-black:hover{background-color:#111}.hover-bg-dark-gray:focus,.hover-bg-dark-gray:hover{background-color:#333}.hover-bg-mid-gray:focus,.hover-bg-mid-gray:hover{background-color:#555}.hover-bg-gray:focus,.hover-bg-gray:hover{background-color:#777}.hover-bg-silver:focus,.hover-bg-silver:hover{background-color:#999}.hover-bg-light-silver:focus,.hover-bg-light-silver:hover{background-color:#aaa}.hover-bg-moon-gray:focus,.hover-bg-moon-gray:hover{background-color:#ccc}.hover-bg-light-gray:focus,.hover-bg-light-gray:hover{background-color:#eee}.hover-bg-near-white:focus,.hover-bg-near-white:hover{background-color:#f4f4f4}.hover-bg-white:focus,.hover-bg-white:hover{background-color:#fff}.hover-bg-transparent:focus,.hover-bg-transparent:hover{background-color:transparent}.hover-bg-black-90:focus,.hover-bg-black-90:hover{background-color:rgba(0,0,0,.9)}.hover-bg-black-80:focus,.hover-bg-black-80:hover{background-color:rgba(0,0,0,.8)}.hover-bg-black-70:focus,.hover-bg-black-70:hover{background-color:rgba(0,0,0,.7)}.hover-bg-black-60:focus,.hover-bg-black-60:hover{background-color:rgba(0,0,0,.6)}.hover-bg-black-50:focus,.hover-bg-black-50:hover{background-color:rgba(0,0,0,.5)}.hover-bg-black-40:focus,.hover-bg-black-40:hover{background-color:rgba(0,0,0,.4)}.hover-bg-black-30:focus,.hover-bg-black-30:hover{background-color:rgba(0,0,0,.3)}.hover-bg-black-20:focus,.hover-bg-black-20:hover{background-color:rgba(0,0,0,.2)}.hover-bg-black-10:focus,.hover-bg-black-10:hover{background-color:rgba(0,0,0,.1)}.hover-bg-white-90:focus,.hover-bg-white-90:hover{background-color:hsla(0,0%,100%,.9)}.hover-bg-white-80:focus,.hover-bg-white-80:hover{background-color:hsla(0,0%,100%,.8)}.hover-bg-white-70:focus,.hover-bg-white-70:hover{background-color:hsla(0,0%,100%,.7)}.hover-bg-white-60:focus,.hover-bg-white-60:hover{background-color:hsla(0,0%,100%,.6)}.hover-bg-white-50:focus,.hover-bg-white-50:hover{background-color:hsla(0,0%,100%,.5)}.hover-bg-white-40:focus,.hover-bg-white-40:hover{background-color:hsla(0,0%,100%,.4)}.hover-bg-white-30:focus,.hover-bg-white-30:hover{background-color:hsla(0,0%,100%,.3)}.hover-bg-white-20:focus,.hover-bg-white-20:hover{background-color:hsla(0,0%,100%,.2)}.hover-bg-white-10:focus,.hover-bg-white-10:hover{background-color:hsla(0,0%,100%,.1)}.hover-dark-red:focus,.hover-dark-red:hover{color:#e7040f}.hover-red:focus,.hover-red:hover{color:#ff4136}.hover-light-red:focus,.hover-light-red:hover{color:#ff725c}.hover-orange:focus,.hover-orange:hover{color:#ff6300}.hover-gold:focus,.hover-gold:hover{color:#ffb700}.hover-yellow:focus,.hover-yellow:hover{color:gold}.hover-light-yellow:focus,.hover-light-yellow:hover{color:#fbf1a9}.hover-purple:focus,.hover-purple:hover{color:#5e2ca5}.hover-light-purple:focus,.hover-light-purple:hover{color:#a463f2}.hover-dark-pink:focus,.hover-dark-pink:hover{color:#d5008f}.hover-hot-pink:focus,.hover-hot-pink:hover{color:#ff41b4}.hover-pink:focus,.hover-pink:hover{color:#ff80cc}.hover-light-pink:focus,.hover-light-pink:hover{color:#ffa3d7}.hover-dark-green:focus,.hover-dark-green:hover{color:#137752}.hover-green:focus,.hover-green:hover{color:#19a974}.hover-light-green:focus,.hover-light-green:hover{color:#9eebcf}.hover-navy:focus,.hover-navy:hover{color:#001b44}.hover-dark-blue:focus,.hover-dark-blue:hover{color:#00449e}.hover-blue:focus,.hover-blue:hover{color:#357edd}.hover-light-blue:focus,.hover-light-blue:hover{color:#96ccff}.hover-lightest-blue:focus,.hover-lightest-blue:hover{color:#cdecff}.hover-washed-blue:focus,.hover-washed-blue:hover{color:#f6fffe}.hover-washed-green:focus,.hover-washed-green:hover{color:#e8fdf5}.hover-washed-yellow:focus,.hover-washed-yellow:hover{color:#fffceb}.hover-washed-red:focus,.hover-washed-red:hover{color:#ffdfdf}.hover-bg-dark-red:focus,.hover-bg-dark-red:hover{background-color:#e7040f}.hover-bg-red:focus,.hover-bg-red:hover{background-color:#ff4136}.hover-bg-light-red:focus,.hover-bg-light-red:hover{background-color:#ff725c}.hover-bg-orange:focus,.hover-bg-orange:hover{background-color:#ff6300}.hover-bg-gold:focus,.hover-bg-gold:hover{background-color:#ffb700}.hover-bg-yellow:focus,.hover-bg-yellow:hover{background-color:gold}.hover-bg-light-yellow:focus,.hover-bg-light-yellow:hover{background-color:#fbf1a9}.hover-bg-purple:focus,.hover-bg-purple:hover{background-color:#5e2ca5}.hover-bg-light-purple:focus,.hover-bg-light-purple:hover{background-color:#a463f2}.hover-bg-dark-pink:focus,.hover-bg-dark-pink:hover{background-color:#d5008f}.hover-bg-hot-pink:focus,.hover-bg-hot-pink:hover{background-color:#ff41b4}.hover-bg-pink:focus,.hover-bg-pink:hover{background-color:#ff80cc}.hover-bg-light-pink:focus,.hover-bg-light-pink:hover{background-color:#ffa3d7}.hover-bg-dark-green:focus,.hover-bg-dark-green:hover{background-color:#137752}.hover-bg-green:focus,.hover-bg-green:hover{background-color:#19a974}.hover-bg-light-green:focus,.hover-bg-light-green:hover{background-color:#9eebcf}.hover-bg-navy:focus,.hover-bg-navy:hover{background-color:#001b44}.hover-bg-dark-blue:focus,.hover-bg-dark-blue:hover{background-color:#00449e}.hover-bg-blue:focus,.hover-bg-blue:hover{background-color:#357edd}.hover-bg-light-blue:focus,.hover-bg-light-blue:hover{background-color:#96ccff}.hover-bg-lightest-blue:focus,.hover-bg-lightest-blue:hover{background-color:#cdecff}.hover-bg-washed-blue:focus,.hover-bg-washed-blue:hover{background-color:#f6fffe}.hover-bg-washed-green:focus,.hover-bg-washed-green:hover{background-color:#e8fdf5}.hover-bg-washed-yellow:focus,.hover-bg-washed-yellow:hover{background-color:#fffceb}.hover-bg-washed-red:focus,.hover-bg-washed-red:hover{background-color:#ffdfdf}.hover-bg-inherit:focus,.hover-bg-inherit:hover{background-color:inherit}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}.na1{margin:-.25rem}.na2{margin:-.5rem}.na3{margin:-1rem}.na4{margin:-2rem}.na5{margin:-4rem}.na6{margin:-8rem}.na7{margin:-16rem}.nl1{margin-left:-.25rem}.nl2{margin-left:-.5rem}.nl3{margin-left:-1rem}.nl4{margin-left:-2rem}.nl5{margin-left:-4rem}.nl6{margin-left:-8rem}.nl7{margin-left:-16rem}.nr1{margin-right:-.25rem}.nr2{margin-right:-.5rem}.nr3{margin-right:-1rem}.nr4{margin-right:-2rem}.nr5{margin-right:-4rem}.nr6{margin-right:-8rem}.nr7{margin-right:-16rem}.nb1{margin-bottom:-.25rem}.nb2{margin-bottom:-.5rem}.nb3{margin-bottom:-1rem}.nb4{margin-bottom:-2rem}.nb5{margin-bottom:-4rem}.nb6{margin-bottom:-8rem}.nb7{margin-bottom:-16rem}.nt1{margin-top:-.25rem}.nt2{margin-top:-.5rem}.nt3{margin-top:-1rem}.nt4{margin-top:-2rem}.nt5{margin-top:-4rem}.nt6{margin-top:-8rem}.nt7{margin-top:-16rem}.collapse{border-collapse:collapse;border-spacing:0}.striped--light-silver:nth-child(odd){background-color:#aaa}.striped--moon-gray:nth-child(odd){background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.stripe-light:nth-child(odd){background-color:hsla(0,0%,100%,.1)}.stripe-dark:nth-child(odd){background-color:rgba(0,0,0,.1)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.f7{font-size:.75rem}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-container{overflow-y:scroll}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.clip{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out;transition:transform .25s ease-out,-webkit-transform .25s ease-out}.grow:focus,.grow:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.grow:active{-webkit-transform:scale(.9);transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.grow-large:active{-webkit-transform:scale(.95);transform:scale(.95)}.pointer:hover,.shadow-hover{cursor:pointer}.shadow-hover{position:relative;transition:all .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:after{content:"";box-shadow:0 0 16px 2px rgba(0,0,0,.2);border-radius:inherit;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:focus:after,.shadow-hover:hover:after{opacity:1}.bg-animate,.bg-animate:focus,.bg-animate:hover{transition:background-color .15s ease-in-out}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:999}.z-9999{z-index:9999}.z-max{z-index:2147483647}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:1.5}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:1.25}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:#357edd;transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:#96ccff;transition:color .15s ease-in}.debug *{outline:1px solid gold}.debug-white *{outline:1px solid #fff}.debug-black *{outline:1px solid #000}.debug-grid{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat 0 0}.debug-grid-16{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat 0 0}.debug-grid-8-solid{background:#fff url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat 0 0}.debug-grid-16-solid{background:#fff url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat 0 0}@media screen and (min-width:30em){.aspect-ratio-ns{height:0;position:relative}.aspect-ratio--16x9-ns{padding-bottom:56.25%}.aspect-ratio--9x16-ns{padding-bottom:177.77%}.aspect-ratio--4x3-ns{padding-bottom:75%}.aspect-ratio--3x4-ns{padding-bottom:133.33%}.aspect-ratio--6x4-ns{padding-bottom:66.6%}.aspect-ratio--4x6-ns{padding-bottom:150%}.aspect-ratio--8x5-ns{padding-bottom:62.5%}.aspect-ratio--5x8-ns{padding-bottom:160%}.aspect-ratio--7x5-ns{padding-bottom:71.42%}.aspect-ratio--5x7-ns{padding-bottom:140%}.aspect-ratio--1x1-ns{padding-bottom:100%}.aspect-ratio--object-ns{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-ns{background-size:cover!important}.contain-ns{background-size:contain!important}.bg-center-ns{background-position:50%}.bg-center-ns,.bg-top-ns{background-repeat:no-repeat}.bg-top-ns{background-position:top}.bg-right-ns{background-position:100%}.bg-bottom-ns,.bg-right-ns{background-repeat:no-repeat}.bg-bottom-ns{background-position:bottom}.bg-left-ns{background-repeat:no-repeat;background-position:0}.outline-ns{outline:1px solid}.outline-transparent-ns{outline:1px solid transparent}.outline-0-ns{outline:0}.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br-pill-ns{border-radius:9999px}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-right-radius:0}.br--right-ns,.br--top-ns{border-bottom-left-radius:0}.br--right-ns{border-top-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}.shadow-1-ns{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-ns{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}.flex-ns{display:flex}.inline-flex-ns{display:inline-flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-row-ns{flex-direction:row}.flex-wrap-ns{flex-wrap:wrap}.flex-nowrap-ns{flex-wrap:nowrap}.flex-wrap-reverse-ns{flex-wrap:wrap-reverse}.flex-column-reverse-ns{flex-direction:column-reverse}.flex-row-reverse-ns{flex-direction:row-reverse}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.flex-grow-0-ns{flex-grow:0}.flex-grow-1-ns{flex-grow:1}.flex-shrink-0-ns{flex-shrink:0}.flex-shrink-1-ns{flex-shrink:1}.fl-ns{float:left}.fl-ns,.fr-ns{_display:inline}.fr-ns{float:right}.fn-ns{float:none}.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}.normal-ns{font-weight:400}.b-ns{font-weight:700}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.min-h-100-ns{min-height:100%}.vh-25-ns{height:25vh}.vh-50-ns{height:50vh}.vh-75-ns{height:75vh}.vh-100-ns{height:100vh}.min-vh-100-ns{min-height:100vh}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}.tracked-ns{letter-spacing:.1em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.25em}.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.25}.lh-copy-ns{line-height:1.5}.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}.rotate-45-ns{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-ns{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-ns{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-ns{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-ns{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-ns{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-ns{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}.na1-ns{margin:-.25rem}.na2-ns{margin:-.5rem}.na3-ns{margin:-1rem}.na4-ns{margin:-2rem}.na5-ns{margin:-4rem}.na6-ns{margin:-8rem}.na7-ns{margin:-16rem}.nl1-ns{margin-left:-.25rem}.nl2-ns{margin-left:-.5rem}.nl3-ns{margin-left:-1rem}.nl4-ns{margin-left:-2rem}.nl5-ns{margin-left:-4rem}.nl6-ns{margin-left:-8rem}.nl7-ns{margin-left:-16rem}.nr1-ns{margin-right:-.25rem}.nr2-ns{margin-right:-.5rem}.nr3-ns{margin-right:-1rem}.nr4-ns{margin-right:-2rem}.nr5-ns{margin-right:-4rem}.nr6-ns{margin-right:-8rem}.nr7-ns{margin-right:-16rem}.nb1-ns{margin-bottom:-.25rem}.nb2-ns{margin-bottom:-.5rem}.nb3-ns{margin-bottom:-1rem}.nb4-ns{margin-bottom:-2rem}.nb5-ns{margin-bottom:-4rem}.nb6-ns{margin-bottom:-8rem}.nb7-ns{margin-bottom:-16rem}.nt1-ns{margin-top:-.25rem}.nt2-ns{margin-top:-.5rem}.nt3-ns{margin-top:-1rem}.nt4-ns{margin-top:-2rem}.nt5-ns{margin-top:-4rem}.nt6-ns{margin-top:-8rem}.nt7-ns{margin-top:-16rem}.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.tj-ns{text-align:justify}.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.f7-ns{font-size:.75rem}.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-ns{margin-left:auto}.center-ns,.mr-auto-ns{margin-right:auto}.ml-auto-ns{margin-left:auto}.clip-ns{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width:30em) and (max-width:60em){.aspect-ratio-m{height:0;position:relative}.aspect-ratio--16x9-m{padding-bottom:56.25%}.aspect-ratio--9x16-m{padding-bottom:177.77%}.aspect-ratio--4x3-m{padding-bottom:75%}.aspect-ratio--3x4-m{padding-bottom:133.33%}.aspect-ratio--6x4-m{padding-bottom:66.6%}.aspect-ratio--4x6-m{padding-bottom:150%}.aspect-ratio--8x5-m{padding-bottom:62.5%}.aspect-ratio--5x8-m{padding-bottom:160%}.aspect-ratio--7x5-m{padding-bottom:71.42%}.aspect-ratio--5x7-m{padding-bottom:140%}.aspect-ratio--1x1-m{padding-bottom:100%}.aspect-ratio--object-m{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}.outline-m{outline:1px solid}.outline-transparent-m{outline:1px solid transparent}.outline-0-m{outline:0}.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br-pill-m{border-radius:9999px}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}.shadow-1-m{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-m{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-m{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-m{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}.fl-m{float:left}.fl-m,.fr-m{_display:inline}.fr-m{float:right}.fn-m{float:none}.i-m{font-style:italic}.fs-normal-m{font-style:normal}.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}.tracked-m{letter-spacing:.1em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.25em}.lh-solid-m{line-height:1}.lh-title-m{line-height:1.25}.lh-copy-m{line-height:1.5}.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.rotate-45-m{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-m{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-m{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-m{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-m{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-m{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-m{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}.na1-m{margin:-.25rem}.na2-m{margin:-.5rem}.na3-m{margin:-1rem}.na4-m{margin:-2rem}.na5-m{margin:-4rem}.na6-m{margin:-8rem}.na7-m{margin:-16rem}.nl1-m{margin-left:-.25rem}.nl2-m{margin-left:-.5rem}.nl3-m{margin-left:-1rem}.nl4-m{margin-left:-2rem}.nl5-m{margin-left:-4rem}.nl6-m{margin-left:-8rem}.nl7-m{margin-left:-16rem}.nr1-m{margin-right:-.25rem}.nr2-m{margin-right:-.5rem}.nr3-m{margin-right:-1rem}.nr4-m{margin-right:-2rem}.nr5-m{margin-right:-4rem}.nr6-m{margin-right:-8rem}.nr7-m{margin-right:-16rem}.nb1-m{margin-bottom:-.25rem}.nb2-m{margin-bottom:-.5rem}.nb3-m{margin-bottom:-1rem}.nb4-m{margin-bottom:-2rem}.nb5-m{margin-bottom:-4rem}.nb6-m{margin-bottom:-8rem}.nb7-m{margin-bottom:-16rem}.nt1-m{margin-top:-.25rem}.nt2-m{margin-top:-.5rem}.nt3-m{margin-top:-1rem}.nt4-m{margin-top:-2rem}.nt5-m{margin-top:-4rem}.nt6-m{margin-top:-8rem}.nt7-m{margin-top:-16rem}.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.f7-m{font-size:.75rem}.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}.clip-m{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width:60em){.aspect-ratio-l{height:0;position:relative}.aspect-ratio--16x9-l{padding-bottom:56.25%}.aspect-ratio--9x16-l{padding-bottom:177.77%}.aspect-ratio--4x3-l{padding-bottom:75%}.aspect-ratio--3x4-l{padding-bottom:133.33%}.aspect-ratio--6x4-l{padding-bottom:66.6%}.aspect-ratio--4x6-l{padding-bottom:150%}.aspect-ratio--8x5-l{padding-bottom:62.5%}.aspect-ratio--5x8-l{padding-bottom:160%}.aspect-ratio--7x5-l{padding-bottom:71.42%}.aspect-ratio--5x7-l{padding-bottom:140%}.aspect-ratio--1x1-l{padding-bottom:100%}.aspect-ratio--object-l{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}.outline-l{outline:1px solid}.outline-transparent-l{outline:1px solid transparent}.outline-0-l{outline:0}.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br-pill-l{border-radius:9999px}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}.shadow-1-l{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-l{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-l{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-l{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}.fl-l{float:left}.fl-l,.fr-l{_display:inline}.fr-l{float:right}.fn-l{float:none}.i-l{font-style:italic}.fs-normal-l{font-style:normal}.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}.tracked-l{letter-spacing:.1em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.25em}.lh-solid-l{line-height:1}.lh-title-l{line-height:1.25}.lh-copy-l{line-height:1.5}.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.rotate-45-l{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-l{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-l{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-l{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-l{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-l{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-l{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}.na1-l{margin:-.25rem}.na2-l{margin:-.5rem}.na3-l{margin:-1rem}.na4-l{margin:-2rem}.na5-l{margin:-4rem}.na6-l{margin:-8rem}.na7-l{margin:-16rem}.nl1-l{margin-left:-.25rem}.nl2-l{margin-left:-.5rem}.nl3-l{margin-left:-1rem}.nl4-l{margin-left:-2rem}.nl5-l{margin-left:-4rem}.nl6-l{margin-left:-8rem}.nl7-l{margin-left:-16rem}.nr1-l{margin-right:-.25rem}.nr2-l{margin-right:-.5rem}.nr3-l{margin-right:-1rem}.nr4-l{margin-right:-2rem}.nr5-l{margin-right:-4rem}.nr6-l{margin-right:-8rem}.nr7-l{margin-right:-16rem}.nb1-l{margin-bottom:-.25rem}.nb2-l{margin-bottom:-.5rem}.nb3-l{margin-bottom:-1rem}.nb4-l{margin-bottom:-2rem}.nb5-l{margin-bottom:-4rem}.nb6-l{margin-bottom:-8rem}.nb7-l{margin-bottom:-16rem}.nt1-l{margin-top:-.25rem}.nt2-l{margin-top:-.5rem}.nt3-l{margin-top:-1rem}.nt4-l{margin-top:-2rem}.nt5-l{margin-top:-4rem}.nt6-l{margin-top:-8rem}.nt7-l{margin-top:-16rem}.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.f7-l{font-size:.75rem}.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}.clip-l{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}
-
diff --git a/webpack.config.js b/webpack.config.js
index c4cd15d..b3b7f20 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,7 +21,7 @@ if (process.env.NODE_ENV === "analyse") {
 module.exports = {
     entry: {
         'vendor-styles': [
-            './vendors/tachyons@4.10.0/tachyons.min.css',
+            './vendors/normalize.css@8.0.1/normalize.css',
             './vendors/highlight.js@9.12.0/dracula.min.css',
         ],
         // The CSS for client should come after `vendor-styles`