Merge branch 'development' into feature/instant/tell-amount-available

1 files changed, 33 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/components/typography.tsx b/packages/dev-tools-pages/ts/components/typography.tsx
new file mode 100644
index 000000000..e4b13163a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/typography.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import { media } from '../variables';
+
+const Alpha = styled.h2`
+    font-size: 1.75rem;
+    line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
+`;
+
+const Beta = styled.h3`
+    font-size: 1.25rem;
+    line-height: 1.65;
+`;
+
+const Gamma = styled.h4`
+    font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
+`;
+
+const Lead = styled.p`
+    font-size: 1.25rem;
+    line-height: 1.6;
+    ${media.small`font-size: 1rem;`};
+`;
+
+const Small = styled.p`
+    font-size: 0.875rem;
+`;
+
+export { Alpha, Beta, Gamma, Lead, Small };