2 files changed, 111 insertions, 0 deletions
diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx
new file mode 100644
index 0000000..b9babc0
--- /dev/null
+++ b/components/Typography/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './typo.module.scss';
+import clsx from 'clsx';
+
+
+type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body';
+type Align = 'inherit' | 'left' | 'center' | 'right';
+
+interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: Variant;
+    align?: Align;
+    gutter?: boolean;
+}
+
+const variantTagMap: Record<Variant, keyof JSX.IntrinsicElements> = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    body: 'p'
+};
+
+const Typography: React.FC<TypographyProps> = ({
+    variant = 'body',
+    align = 'inherit',
+    gutter = false,
+    className,
+    ...props
+}) => {
+    const Tag = variantTagMap[variant] as keyof React.ReactHTML;
+
+    const typographyClassName = clsx(
+        styles[`typo-${variant}`],
+        {
+            [`align-${align}`]: align !== 'inherit',
+            [styles['typo-gutter']]: gutter
+        },
+        className
+    );
+
+    return <Tag className={typographyClassName} {...props} />;
+};
+
+export default Typography;
+
diff --git a/components/Typography/typo.module.scss b/components/Typography/typo.module.scss
new file mode 100644
index 0000000..934333d
--- /dev/null
+++ b/components/Typography/typo.module.scss
@@ -0,0 +1,64 @@
+.typo-h1 {
+    font-size: 2.8rem;
+    font-weight: 300;
+    line-height: 1.167;
+    letter-spacing: -0.01562em;
+    // margin-top: 1.0rem;
+    // margin-bottom: 1rem;
+
+    padding-bottom: 0.4rem;
+    border-bottom: 0.12rem solid rgb(53, 53, 53);
+}
+
+.typo-h2 {
+    font-size: 2.3rem;
+    font-weight: 300;
+    line-height: 1.2;
+    letter-spacing: -0.00833em;
+
+    // margin-top: 1.6rem;
+    // margin-bottom: 0.8rem;
+}
+
+.typo-h3 {
+    font-size: 1.3rem;
+    font-weight: 400;
+    line-height: 1.167;
+    letter-spacing: 0em;
+
+    // margin-top: 1.3rem;
+    // margin-bottom: 0.5rem;
+}
+
+.typo-h4 {
+    font-size: 1.25rem;
+}
+
+.typo-h5 {
+    font-size: 1.15rem;
+}
+
+.typo-h6 {
+    font-size: 1.10rem;
+}
+
+.typo-h4, .typo-h5, .typo-h6 {
+    // margin-top: 0.8rem;
+    // margin-bottom: 0.6rem;
+}
+
+.typo-p {
+    font-size: 1rem;
+    letter-spacing: 0.00938em;
+    font-weight: 300;
+}
+
+.typo-p {
+    font-size: 1rem;
+    line-height: 1.5;
+    // margin-bottom: 1em;
+}
+
+.typo-gutter {
+    margin-bottom: 0.35em;
+}