Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

src/package/styles/classes/actions.postcss

@@ -0,0 +1,20 @@
+.actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-left: auto;
+    min-width: fit-content;
+
+    > *:last-child {
+        margin-top: auto;
+        color: var(--color-text-light);
+    }
+
+    @media (width <= 1000px) {
+        flex-direction: row;
+        align-items: flex-start;
+        margin-left: unset;
+    }
+}

src/package/styles/classes/base.postcss

@@ -0,0 +1,26 @@
+.base {
+    display: flex;
+    justify-content: center;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    padding: 1rem;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    &::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}

src/package/styles/classes/button-group.postcss

@@ -0,0 +1,5 @@
+.button-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/card.postcss

@@ -0,0 +1,101 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+
+    p {
+        line-height: 130%;
+    }
+}

src/package/styles/classes/divider.postcss

@@ -0,0 +1,5 @@
+.divider {
+    margin: 0.25rem 0;
+    border: none;
+    border-top: 1px solid var(--color-divider);
+}

src/package/styles/classes/illustration.postcss

@@ -0,0 +1,16 @@
+.illustration {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    grid-gap: 2rem;
+
+    &__image {
+        max-width: 300px;
+    }
+
+    &__description {
+        font-size: 1.2rem;
+        color: var(--color-text-light)
+    }
+}

src/package/styles/classes/info-table.postcss

@@ -0,0 +1,11 @@
+.info-table {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.25rem 2rem;
+    width: fit-content;
+
+    &__label {
+        color: var(--color-text-lightest);
+        font-weight: var(--font-weight-medium);
+    }
+}

src/package/styles/classes/link.postcss

@@ -0,0 +1,26 @@
+.link {
+    color: var(--color-link);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 100%;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.link-group {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.75rem;
+
+    .link {
+        color: var(--color-text);
+
+        &:hover {
+            color: var(--color-link);
+
+        }
+    }
+}

src/package/styles/classes/markdown.postcss

@@ -0,0 +1,137 @@
+.markdown {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+
+    blockquote,
+    details,
+    dl,
+    ol,
+    p,
+    code,
+    pre,
+    table,
+    ul {
+        margin: 0;
+    }
+
+    p {
+        line-height: 1.5;
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.2em;
+        border-bottom: 1px solid var(--color-divider);
+    }
+
+    blockquote {
+        padding: 0 1rem;
+        color: var(--color-text);
+        border-left: 0.25rem solid var(--color-divider);
+    }
+
+    a {
+        color: var(--color-link);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img,
+    iframe {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--rounded-sm);
+    }
+
+    iframe {
+        width: 35rem;
+        aspect-ratio: 16/9;
+    }
+
+    code {
+        padding: 0.2rem 0.4rem;
+        font-size: 80%;
+        border-radius: var(--rounded-sm);
+        background-color: var(--color-code-bg);
+        color: var(--color-code-text);
+    }
+
+    pre {
+        padding: 1rem;
+        border-radius: var(--rounded-sm);
+        overflow-x: auto;
+
+        code {
+            font-size: 80%;
+            padding: 0;
+            border-radius: 0;
+            background-color: unset;
+        }
+    }
+
+    hr {
+        margin: 0;
+        color: var(--color-divider);
+    }
+
+    table {
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+        border-collapse: collapse;
+        line-height: 1.5;
+
+        th {
+            font-weight: 600;
+        }
+
+        td,
+        th {
+            padding: 0.4rem 0.85rem;
+            border: 0.1rem solid var(--color-table-border);
+        }
+
+        tr:nth-child(2n) {
+            background-color: var(--color-table-alternate-row);
+        }
+    }
+
+    details {
+        border: 0.15rem solid var(--color-button-bg);
+        border-radius: var(--rounded-sm);
+        padding: 0.5rem 0.5rem 0;
+        overflow: hidden;
+
+        summary {
+            font-weight: bold;
+            margin: -0.5rem -0.5rem 0;
+            padding: 0.5rem 0.8rem;
+            cursor: pointer;
+            background-color: var(--color-button-bg);
+
+            &:hover {
+                background-color: var(--color-button-bg-hover);
+            }
+        }
+
+        &[open] {
+            padding: 0.5rem;
+
+            summary {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+
+    li:has(> input) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+}

src/package/styles/classes/member.postcss

@@ -0,0 +1,13 @@
+.member {
+    display: flex;
+    grid-gap: 0.75rem;
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+
+        &__link {
+            font-weight: var(--font-weight-medium);
+        }
+    }
+}

src/package/styles/classes/stat.postcss

@@ -0,0 +1,23 @@
+.stat {
+    display: flex;
+    align-items: baseline;
+    grid-gap: 0.4rem;
+
+    &--light {
+        color: var(--color-text-lightest);
+    }
+
+    .icon {
+        align-self: center;
+    }
+
+    strong {
+        font-size: 20px;
+    }
+}
+
+.stat-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/tag.postcss

@@ -0,0 +1,18 @@
+.tag {
+    display: flex;
+    align-items: center;
+    grid-gap: 0.25rem;
+    color: var(--color-text-lightest);
+
+    svg {
+        width: 1rem;
+        height: auto;
+    }
+}
+
+.tag-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-top: auto;
+    grid-gap: 0.25rem 0.6rem;
+}

src/package/styles/classes/title.postcss

@@ -0,0 +1,14 @@
+.title-primary {
+    font-size: 24px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 20px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-tertiary {
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+}

src/package/styles/normalize.postcss

@@ -0,0 +1,55 @@
+@import 'sanitize.css';
+@import 'sanitize.css/forms.css';
+@import 'sanitize.css/typography.css';
+
+/* Overrides */
+
+button {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    box-shadow: none;
+    border: none;
+    cursor: pointer;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+*:focus {
+    outline: none;
+}
+
+button:focus-visible,
+a:focus-visible,
+[tabindex='0']:focus-visible {
+    outline: 0.2rem solid var(--color-brand);
+}
+
+html,
+body,
+#svelte {
+    height: 100%;
+}
+
+html {
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    line-height: 100%;
+    margin: 0;
+}
+
+ul {
+    padding: 0 0 0 1.5rem;
+}

src/package/styles/themes/base.postcss

@@ -0,0 +1,17 @@
+:root {
+    --rounded: 1rem;
+    --rounded-top: 1rem 1rem 0 0;
+    --rounded-bottom: 0 0 1rem 1rem;
+    --rounded-sm: 0.6rem;
+    --rounded-max: 999999999px;
+
+    --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+
+    --font-size-nm: 1rem; /* 16px */
+    --font-size-xl: 1.5rem; /* 24px */
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+}

src/package/styles/themes/dark.postcss

@@ -0,0 +1,61 @@
+.theme-dark {
+    /* Brand colors */
+    --color-brand: hsl(155, 58%, 40%);
+    --color-brand-light: hsl(155, 54%, 30%);
+    --color-brand-dark: hsl(155, 58%, 25%);
+    --color-brand-contrast: hsl(0, 0%, 100%);
+
+    /* Shadows */
+    --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
+    --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
+    --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
+
+    --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
+    --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
+    --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+    --shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
+
+    /* Text colors */
+    --color-text: hsl(221, 39%, 90%);
+    --color-text-light: hsl(215, 14%, 74%);
+    --color-text-lightest: hsl(220, 9%, 70%);
+    --color-heading: hsl(222, 16%, 80%);
+    --color-link: hsl(215, 100%, 75%);
+
+    /* Container colors */
+    --color-bg: hsl(220, 13%, 15%);
+    --color-raised-bg: hsl(220, 13%, 25%);
+    --color-raised-bg-hover: hsl(220, 13%, 20%);
+    --color-divider: hsl(220, 13%, 50%);
+    --color-button-bg: hsl(220, 13%, 35%);
+    --color-button-bg-hover: hsl(220, 13%, 32%);
+
+    /* Label colors */
+    --color-badge-gray-text: hsl(0, 2%, 69%);
+    --color-badge-gray-dot: hsl(0, 6%, 77%);
+    --color-badge-red-text: hsl(343, 63%, 67%);
+    --color-badge-red-dot: hsl(342, 70%, 53%);
+    --color-badge-green-text: hsl(156, 53%, 50%);
+    --color-badge-green-dot: hsl(140, 64%, 40%);
+    --color-badge-yellow-text: hsl(40, 57%, 60%);
+    --color-badge-yellow-dot: hsl(40, 92%, 62%);
+
+    /* Markdown colors */
+    --color-table-border: hsl(214, 12%, 35%);
+    --color-table-alternate-row: hsl(216, 12%, 17%);
+    --color-code-bg: hsl(217, 12%, 29%);
+
+    /* Ad colors */
+    --color-ad-bg: hsl(200, 70%, 25%);
+    --color-ad-link: hsl(200, 70%, 50%);
+
+    /* Popup colors */
+    --color-popup-danger-bg: hsl(355, 70%, 20%);
+    --color-popup-danger-text: hsl(342, 70%, 75%);
+
+    --color-input-light: hsl(220, 13%, 20%);
+
+    /* Scrollbar color */
+    --color-scrollbar-thumb: hsl(220, 13%, 40%);
+}

src/package/styles/themes/light.postcss

@@ -0,0 +1,60 @@
+.theme-light {
+    /* Brand colors */
+    --color-brand: hsl(155, 58%, 44%);
+    --color-brand-light: hsl(135, 50%, 78%);
+    --color-brand-dark: hsl(155, 58%, 38%);
+    --color-brand-contrast: hsl(0, 0%, 100%);
+
+    /* Shadows */
+    --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
+    --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
+    --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
+
+    --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
+    --shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
+    --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
+    --shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
+
+    /* Text colors */
+    --color-text: hsl(221, 39%, 11%);
+    --color-text-light: hsl(215, 14%, 34%);
+    --color-text-lightest: hsl(220, 9%, 46%);
+    --color-heading: hsl(222, 16%, 20%);
+    --color-link: hsl(221, 55%, 50%);
+
+    /* Container colors */
+    --color-bg: hsl(220, 13%, 91%);
+    --color-raised-bg: hsl(0, 0%, 100%);
+    --color-raised-bg-hover: hsl(220, 13%, 93%);
+    --color-divider: hsl(220, 13%, 91%);
+    --color-button-bg: hsl(220, 13%, 91%);
+    --color-button-bg-hover: hsl(0, 0%, 85%);
+    --color-input-text-light: hsl(0, 0%, 94%);
+
+    /* Label colors */
+    --color-badge-gray-text: hsl(0, 2%, 39%);
+    --color-badge-gray-dot: hsl(0, 6%, 77%);
+    --color-badge-red-text: hsl(343, 63%, 27%);
+    --color-badge-red-dot: hsl(342, 70%, 53%);
+    --color-badge-green-text: hsl(156, 53%, 20%);
+    --color-badge-green-dot: hsl(140, 64%, 40%);
+    --color-badge-yellow-text: hsl(40, 57%, 29%);
+    --color-badge-yellow-dot: hsl(40, 92%, 62%);
+
+    /* Markdown colors */
+    --color-table-border: hsl(210, 10%, 89%);
+    --color-table-alternate-row: hsl(210, 29%, 97%);
+    --color-code-bg: hsl(210, 29%, 96%);
+
+    /* Ad colors */
+    --color-ad-bg: hsl(200, 70%, 82%);
+    --color-ad-link: hsl(200, 80%, 40%);
+
+    /* Popup colors */
+    --color-popup-danger-bg: hsl(355, 70%, 88%);
+    --color-popup-danger-text: hsl(342, 70%, 35%);
+
+    /* Scrollbar color */
+    --color-scrollbar-thumb: hsl(220, 13%, 70%);
+}

src/package/styles/themes/oled.postcss

@@ -0,0 +1,15 @@
+.oled-theme {
+    @extend .dark-theme;
+
+    /* Container colors */
+    --color-bg: hsl(220, 13%, 0%);
+    --color-raised-bg: hsl(220, 13%, 10%);
+    --color-raised-bg-hover: hsl(220, 13%, 20%);
+    --color-divider: hsl(220, 13%, 35%);
+    --color-button-bg: hsl(220, 13%, 20%);
+    --color-button-bg-hover: hsl(220, 13%, 15%);
+
+    /* Ad colors */
+    --color-ad-bg: hsl(200, 70%, 15%);
+    --color-ad-link: hsl(200, 70%, 45%);
+}

src/package/styles/variables/borders.postcss

@@ -0,0 +1,16 @@
+:root {
+  /* Borders */
+  --border-width: 1px;
+  --border-style: solid;
+  --border: var(--border-width) var(--border-style);
+
+  /* Rounded radii */
+  --rounded-sm: 8px;
+  --rounded: 10px;
+  --rounded-lg: 12px;
+  --rounded-max: 100px;
+  --rounded-top: var(--rounded) var(--rounded) 0 0;
+  --rounded-bottom: 0 0 var(--rounded) var(--rounded);
+  --rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
+  --rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
+}

src/package/styles/variables/spacing.postcss

@@ -0,0 +1,213 @@
+:root {
+
+         /* these are values for the display CSS property */
+        /*
+       --display-values: (
+               block,
+               flex,
+               inline,
+               inline-block,
+               inline-flex,
+               none,
+               table,
+               table-cell
+       );
+
+       // maps edges to respective corners for border-radius
+       --edges: (
+               top: (top-left, top-right),
+               right: (top-right, bottom-right),
+               bottom: (bottom-right, bottom-left),
+               left: (bottom-left, top-left)
+       );
+       */
+
+        /*
+        These are our margin and padding utility spacers. The default step size we
+        use is 8px. This gives us a key of:
+            0 => 0px
+            1 => 4px
+            2 => 8px
+            3 => 16px
+            4 => 24px
+            5 => 32px
+            6 => 40px */
+        --spacer: 8px;
+
+        /* Our spacing scale */
+        --spacer-0: 0; /* 0 */
+        --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
+        --spacer-2: --spacer; /* 8px */
+        --spacer-3: calc(var(--spacer) * 2); /* 16px */
+        --spacer-4: calc(var(--spacer) * 3); /* 24px */
+        --spacer-5: calc(var(--spacer) * 4); /* 32px */
+        --spacer-6: calc(var(--spacer) * 5); /* 40px */
+
+        /*
+        /* The list of spacer values
+        --spacers: (
+                --spacer-0,
+                --spacer-1,
+                --spacer-2,
+                --spacer-3,
+                --spacer-4,
+                --spacer-5,
+                --spacer-6,
+        );
+
+        /* And the map of spacers, for easier looping:
+        /* @each --scale, --length in --spacer-map { ... }
+        --spacer-map: (
+                0: --spacer-0,
+                1: --spacer-1,
+                2: --spacer-2,
+                3: --spacer-3,
+                4: --spacer-4,
+                5: --spacer-5,
+                6: --spacer-6,
+        );
+
+        /* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
+        /* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
+        /* 80, 96, etc.
+        --spacer-7: --spacer * 6; /* 48px
+        --spacer-8: --spacer * 8; /* 64px
+        --spacer-9: --spacer * 10; /* 80px
+        --spacer-10: --spacer * 12; /* 96px
+        --spacer-11: --spacer * 14; /* 112px
+        --spacer-12: --spacer * 16; /* 128px
+
+        --spacers-large: (
+                7: --spacer-7,
+                8: --spacer-8,
+                9: --spacer-9,
+                10: --spacer-10,
+                11: --spacer-11,
+                12: --spacer-12,
+        );
+
+        --spacer-map-extended: map-merge(
+                        (
+                                0: 0,
+                                1: --spacer-1,
+                                2: --spacer-2,
+                                3: --spacer-3,
+                                4: --spacer-4,
+                                5: --spacer-5,
+                                6: --spacer-6,
+                        ),
+                        --spacers-large,
+        );
+
+        /* Em spacer variables
+        --em-spacer-1: 0.0625em; /* 1/16
+        --em-spacer-2: 0.125em; /* 1/8
+        --em-spacer-3: 0.25em; /* 1/4
+        --em-spacer-4: 0.375em; /* 3/8
+        --em-spacer-5: 0.5em; /* 1/2
+        --em-spacer-6: 0.75em; /* 3/4
+
+        /* Size scale
+        /* Used for buttons, inputs, labels, avatars etc.
+        --size: 16px;
+
+        --size-0: 0;
+        --size-1: --size; /* 16px
+        --size-2: --size-1 +  4px; /* 20px
+        --size-3: --size-2 +  4px; /* 24px
+        --size-4: --size-3 +  4px; /* 28px
+        --size-5: --size-4 +  4px; /* 32px
+        --size-6: --size-5 +  8px; /* 40px
+        --size-7: --size-6 +  8px; /* 48px
+        --size-8: --size-7 + 16px; /* 64px
+
+        /* Fixed-width container variables
+        --container-width: 980px;
+        --grid-gutter: 10px;
+
+        // Breakpoint widths
+        --width-xs: 0;
+        // Small screen / phone
+        --width-sm: 544px;
+        // Medium screen / tablet
+        --width-md: 768px;
+        // Large screen / desktop (980 + (16 * 2)) <= container + gutters
+        --width-lg: 1012px;
+        // Extra large screen / wide desktop
+        --width-xl: 1280px;
+
+        // Responsive container widths
+        --container-sm: --width-sm;
+        --container-md: --width-md;
+        --container-lg: --width-lg;
+        --container-xl: --width-xl;
+
+        // Breakpoints in the form (name: length)
+        --breakpoints: (
+                sm: --width-sm,
+                md: --width-md,
+                lg: --width-lg,
+                xl: --width-xl
+        );
+
+        // This map in the form (breakpoint: variant) is used to iterate over
+        // breakpoints and create both responsive and non-responsive classes in one
+        // loop:
+        --responsive-variants: (
+                '': '',
+                sm: '-sm',
+                md: '-md',
+                lg: '-lg',
+                xl: '-xl',
+        );
+
+        // responsive utility position values
+        --responsive-positions: (
+                static,
+                relative,
+                absolute,
+                fixed,
+                sticky
+        );
+
+        --sidebar-width: (
+                sm: 220px,
+                md: 256px,
+                lg: 296px
+        );
+
+        --sidebar-narrow-width: (
+                md: 240px,
+                lg: 256px
+        );
+
+        --sidebar-wide-width: (
+                lg: 320px,
+                xl: 336px
+        );
+
+        --gutter: (
+                md: --spacer-3,
+                lg: --spacer-4,
+                xl: --spacer-5
+        );
+
+        --gutter-condensed: (
+                md: --spacer-3,
+                lg: --spacer-3,
+                xl: --spacer-4
+        );
+
+        --gutter-spacious: (
+                md: --spacer-4,
+                lg: --spacer-5,
+                xl: --spacer-6
+        );
+        */
+}
+
+/* Breakpoints */
+@custom-media --sm (min-width: 544px);
+@custom-media --md (min-width: 768px);
+@custom-media --lg (min-width: 1012px);
+@custom-media --xl (min-width: 544px);

src/package/styles/variables/typography.postcss

@@ -0,0 +1,38 @@
+:root {
+  /* Heading sizes - mobile */
+  /* h4-h6 remain the same size on both mobile & desktop */
+  --h00-size-mobile: 40px;
+  --h0-size-mobile: 32px;
+  --h1-size-mobile: 26px;
+  --h2-size-mobile: 22px;
+  --h3-size-mobile: 18px;
+
+  /* Heading sizes - desktop */
+  --h00-size: 48px;
+  --h0-size: 40px;
+  --h1-size: 32px;
+  --h2-size: 24px;
+  --h3-size: 20px;
+  --h4-size: 16px;
+  --h5-size: 14px;
+  --h6-size: 12px;
+
+  --font-size-lg: 17px;
+  --font-size-sm: 12px;
+  --font-size: 14px;
+
+  /* Line heights */
+  --lh-condensed-ultra: 1;
+  --lh-condensed: 1.25;
+  --lh-default: 1.5;
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+
+  /* Font stacks */
+  --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}