diff --git a/packages/site/assets/styles/_layout.scss b/packages/site/assets/styles/_layout.scss
index 9b7d8804e..2edb7af3b 100644
--- a/packages/site/assets/styles/_layout.scss
+++ b/packages/site/assets/styles/_layout.scss
@@ -1,9 +1,33 @@
-$example-size: 90px;
-$page-width: 1320px;
+// SPACINGS
+$spacing2XS: 2px;
+$spacingXS: 4px;
+$spacingSM: 8px;
+$spacingMD: 12px;
+$spacingLG: 18px;
+$spacingXL: 24px;
+$spacing2XL: 32px;
+$spacing3XL: 44px;
+
+// SIZINGS
+$sizing2XS: 60px;
+$sizingXS: 100px;
+$sizingSM: 200px;
+$sizingMD: 300px;
+$sizingLG: 400px;
+$sizingXL: 600px;
+$sizing2XL: 860px;
+$sizing3XL: 1300px;
+
+$page-width: $sizing3XL;
.page {
max-width: $page-width;
margin: 0 auto;
padding: 40px;
position: relative;
+}
+
+.section-narrow {
+ max-width: $sizing2XL;
+ margin: 0 auto;
}
\ No newline at end of file
diff --git a/packages/site/assets/styles/_shared.scss b/packages/site/assets/styles/_shared.scss
index 03a839220..77c5ea627 100644
--- a/packages/site/assets/styles/_shared.scss
+++ b/packages/site/assets/styles/_shared.scss
@@ -28,6 +28,16 @@ a {
}
}
+h1 {
+ font-size: 4rem;
+}
+
+h3 {
+ font-weight: 400;
+ font-size: 2rem;
+ line-height: 2.72rem;
+}
+
button, .button {
background-color: $primary;
position: relative;
@@ -68,4 +78,13 @@ button, .button {
transition: all 300ms ease-in;
}
}
+}
+
+.center {
+ text-align: center;
+ margin: 0 auto;
+}
+
+.muted {
+ opacity: .44
}
\ No newline at end of file
diff --git a/packages/site/pages/index.vue b/packages/site/pages/index.vue
index e23576cb1..d1f6bcf3e 100644
--- a/packages/site/pages/index.vue
+++ b/packages/site/pages/index.vue
@@ -1,8 +1,15 @@
-
Hello Diez, bro!
-
yo thi sis my paragraph
+
+
Keep your design system in sync with your code
+
Diez is the design system compiler — for developers creating custom workflows around design systems
+
+
@@ -20,4 +27,26 @@ export default class extends Vue {