@new-ui/typography 0.1.0

package/.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: Publish npm package
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.11.0
+      - run: npm install
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: public

package/README.md

@@ -0,0 +1,37 @@
+# New UI Typography
+
+![](assets/cover.png)
+
+## Text Styles for Figma
+[Get a Figma copy](https://www.figma.com/community/file/1186085071546203382)
+
+## Install
+Install New UI Typography from your terminal via npm.
+```
+npm i @new-ui/typography
+```
+
+To get started quickly, you can use the CDN files.
+```html
+<!-- Place this at the html head -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/typography@<version>/dist/index.css">
+```
+
+## Usage
+
+```scss
+// Place this at the top of your SCSS/CSS file
+@import "@new-ui/typography";
+```
+
+## Usage Guide
+
+- Tokens defined in the figma file matches variables declared in CSS
+- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`
+- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax
+  * `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`
+  * `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
+  * `u-` for utilities, such as `.nu-u-mb-<spacing-token>` or `.nu-u-margin-bottom-pt2`
+  * `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to
+  * `js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle - state-based classes to an element.
+

package/dist/index.css

@@ -0,0 +1,2 @@
+:root{--mobile-heading-01:32px;--mobile-heading-02:28px;--mobile-heading-03:24px;--mobile-heading-04:20px;--mobile-heading-05:18px;--mobile-heading-06:16px;--mobile-body-xl:16px;--mobile-body:14px;--mobile-body-sm:12px;--mobile-caption:12px;--mobile-helper-text:12px;--mobile-code:14px;--mobile-heading-01:40px;--mobile-heading-02:36px;--mobile-heading-03:30px;--mobile-heading-04:28px;--mobile-heading-05:26px;--mobile-heading-06:24px;--mobile-body-xl:24px;--mobile-body:20px;--mobile-body-sm:16px;--mobile-caption:16px;--mobile-helper-text:16px;--mobile-code:20px;--mobile-tracking-heading-01:-.8px;--mobile-tracking-heading-02:-.4px;--mobile-tracking-heading-03:-.4px;--desktop-heading-01:54px;--desktop-heading-02:42px;--desktop-heading-03:32px;--desktop-heading-04:28px;--desktop-heading-05:20px;--desktop-heading-06:18px;--desktop-body-xl:18px;--desktop-body:16px;--desktop-body-sm:14px;--desktop-caption:12px;--desktop-helper-text:12px;--desktop-code:14px;--desktop-heading-01:64px;--desktop-heading-02:50px;--desktop-heading-03:40px;--desktop-heading-04:36px;--desktop-heading-05:28px;--desktop-heading-06:26px;--desktop-body-xl:26px;--desktop-body:24px;--desktop-body-sm:20px;--desktop-caption:16px;--desktop-helper-text:16px;--desktop-code:20px;--desktop-tracking-heading-01:-1.2px;--desktop-tracking-heading-02:-.8px;--desktop-tracking-heading-03:-.4px}.nu-u-fw-bold{font-weight:700}.nu-u-fw-semi-bold{font-weight:500}.nu-u-fw-normal{font-weight:400}.nu-u-text--uppercase{text-transform:uppercase}.nu-u-text--lowercase{text-transform:lowercase}.nu-u-text--capitalize{text-transform:capitalize}.nu-u-text--underline{text-decoration:underline}.nu-u-text--left{text-align:left}.nu-u-text--right{text-align:right}.nu-u-text--center{text-align:center}.nu-u-text--justify{text-align:justify}.nu-u-serif{font-family:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif}.nu-u-sans-serif{font-family:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif}.nu-u-code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace}.nu-c-h1{font-weight:700;font-size:var(--desktop-heading-01);line-height:var(--desktop-heading-01);letter-spacing:var(--desktop-tracking-heading-01)}@media screen and (max-width:600px){.nu-c-h1{font-size:var(--mobile-heading-01);line-height:var(--mobile-heading-01);letter-spacing:var(--mobile-tracking-heading-01)}}.nu-c-h2{font-weight:700;font-size:var(--desktop--heading-02);line-height:var(--desktop--heading-02);letter-spacing:var(--desktop-tracking-heading-02)}@media screen and (max-width:600px){.nu-c-h2{font-size:var(--mobile-heading-02);line-height:var(--mobile-heading-02);letter-spacing:var(--mobile-tracking-heading-02)}}.nu-c-h3{font-weight:700;font-size:var(--desktop-heading-03);line-height:var(--desktop-heading-03);letter-spacing:var(--desktop-tracking-heading-03)}@media screen and (max-width:600px){.nu-c-h3{font-size:var(--mobile-heading-03);line-height:var(--mobile-heading-03);letter-spacing:var(--mobile-tracking-heading-03)}}.nu-c-h4{font-weight:700;font-size:var(--desktop-heading-04);line-height:var(--desktop-heading-04)}@media screen and (max-width:600px){.nu-c-h4{font-size:var(--mobile-heading-04);line-height:var(--mobile-heading-04)}}.nu-c-h5{font-weight:700;font-size:var(--desktop-heading-05);line-height:var(--desktop-heading-05)}@media screen and (max-width:600px){.nu-c-h5{font-size:var(--mobile-heading-05);line-height:var(--mobile-heading-05)}}.nu-c-h6{font-weight:700;font-size:var(--desktop-heading-06);line-height:var(--desktop-heading-06)}@media screen and (max-width:600px){.nu-c-h6{font-size:var(--mobile-heading-06);line-height:var(--mobile-heading-06)}}.nu-c-fs-lead{font-size:var(--desktop-body-xl)}@media screen and (max-width:600px){.nu-c-fs-lead{font-size:var(--mobile-body-xl)}}.nu-c-caption{text-transform:uppercase;font-weight:500;font-size:var(--desktop-caption);line-height:var(--desktop-caption)}@media screen and (max-width:600px){.nu-c-caption{font-size:var(--mobile-caption);line-height:var(--mobile-caption)}}.nu-c-helper-text{font-size:var(--desktop-helper-text);line-height:var(--desktop-helper-text)}@media screen and (max-width:600px){.nu-c-helper-text{font-size:var(--mobile-helper-text);line-height:var(--mobile-helper-text)}}.nu-c-code{font-size:var(--desktop-code);line-height:var(--desktop-code)}@media screen and (max-width:600px){.nu-c-code{font-size:var(--mobile-code);line-height:var(--mobile-code)}}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"mappings":"AEAA,o1CCCA,8BAIA,mCAIA,gCAKA,+CAIA,+CAIA,iDAIA,gDAIA,iCAIA,mCAIA,qCAIA,uCAKA,6FAUA,iGAUA,4GChEA,qJAME,oCANF,mIAaA,uJAME,oCANF,mIAaA,qJAME,oCANF,mIAaA,mGAKE,oCALF,kFAWA,mGAKE,oCALF,kFAWA,mGAKE,oCALF,kFAWA,+CAGE,oCAHF,+CAQA,2HAME,oCANF,iFAYA,8FAIE,oCAJF,6FAUA,yEAIE,oCAJF","sources":["index.css","src/index.scss","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n  --mobile-heading-01: 32px;\n  --mobile-heading-02: 28px;\n  --mobile-heading-03: 24px;\n  --mobile-heading-04: 20px;\n  --mobile-heading-05: 18px;\n  --mobile-heading-06: 16px;\n  --mobile-body-xl: 16px;\n  --mobile-body: 14px;\n  --mobile-body-sm: 12px;\n  --mobile-caption: 12px;\n  --mobile-helper-text: 12px;\n  --mobile-code: 14px;\n  --mobile-heading-01: 40px;\n  --mobile-heading-02: 36px;\n  --mobile-heading-03: 30px;\n  --mobile-heading-04: 28px;\n  --mobile-heading-05: 26px;\n  --mobile-heading-06: 24px;\n  --mobile-body-xl: 24px;\n  --mobile-body: 20px;\n  --mobile-body-sm: 16px;\n  --mobile-caption: 16px;\n  --mobile-helper-text: 16px;\n  --mobile-code: 20px;\n  --mobile-tracking-heading-01: -.8px;\n  --mobile-tracking-heading-02: -.4px;\n  --mobile-tracking-heading-03: -.4px;\n  --desktop-heading-01: 54px;\n  --desktop-heading-02: 42px;\n  --desktop-heading-03: 32px;\n  --desktop-heading-04: 28px;\n  --desktop-heading-05: 20px;\n  --desktop-heading-06: 18px;\n  --desktop-body-xl: 18px;\n  --desktop-body: 16px;\n  --desktop-body-sm: 14px;\n  --desktop-caption: 12px;\n  --desktop-helper-text: 12px;\n  --desktop-code: 14px;\n  --desktop-heading-01: 64px;\n  --desktop-heading-02: 50px;\n  --desktop-heading-03: 40px;\n  --desktop-heading-04: 36px;\n  --desktop-heading-05: 28px;\n  --desktop-heading-06: 26px;\n  --desktop-body-xl: 26px;\n  --desktop-body: 24px;\n  --desktop-body-sm: 20px;\n  --desktop-caption: 16px;\n  --desktop-helper-text: 16px;\n  --desktop-code: 20px;\n  --desktop-tracking-heading-01: -1.2px;\n  --desktop-tracking-heading-02: -.8px;\n  --desktop-tracking-heading-03: -.4px;\n}\n\n.nu-u-fw-bold {\n  font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n  font-weight: 500;\n}\n\n.nu-u-fw-normal {\n  font-weight: 400;\n}\n\n.nu-u-text--uppercase {\n  text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n  text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n  text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n  text-decoration: underline;\n}\n\n.nu-u-text--left {\n  text-align: left;\n}\n\n.nu-u-text--right {\n  text-align: right;\n}\n\n.nu-u-text--center {\n  text-align: center;\n}\n\n.nu-u-text--justify {\n  text-align: justify;\n}\n\n.nu-u-serif {\n  font-family: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;\n}\n\n.nu-u-sans-serif {\n  font-family: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;\n}\n\n.nu-u-code {\n  font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;\n}\n\n.nu-c-h1 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-01);\n  line-height: var(--desktop-heading-01);\n  letter-spacing: var(--desktop-tracking-heading-01);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h1 {\n    font-size: var(--mobile-heading-01);\n    line-height: var(--mobile-heading-01);\n    letter-spacing: var(--mobile-tracking-heading-01);\n  }\n}\n\n.nu-c-h2 {\n  font-weight: 700;\n  font-size: var(--desktop--heading-02);\n  line-height: var(--desktop--heading-02);\n  letter-spacing: var(--desktop-tracking-heading-02);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h2 {\n    font-size: var(--mobile-heading-02);\n    line-height: var(--mobile-heading-02);\n    letter-spacing: var(--mobile-tracking-heading-02);\n  }\n}\n\n.nu-c-h3 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-03);\n  line-height: var(--desktop-heading-03);\n  letter-spacing: var(--desktop-tracking-heading-03);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h3 {\n    font-size: var(--mobile-heading-03);\n    line-height: var(--mobile-heading-03);\n    letter-spacing: var(--mobile-tracking-heading-03);\n  }\n}\n\n.nu-c-h4 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-04);\n  line-height: var(--desktop-heading-04);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h4 {\n    font-size: var(--mobile-heading-04);\n    line-height: var(--mobile-heading-04);\n  }\n}\n\n.nu-c-h5 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-05);\n  line-height: var(--desktop-heading-05);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h5 {\n    font-size: var(--mobile-heading-05);\n    line-height: var(--mobile-heading-05);\n  }\n}\n\n.nu-c-h6 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-06);\n  line-height: var(--desktop-heading-06);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-h6 {\n    font-size: var(--mobile-heading-06);\n    line-height: var(--mobile-heading-06);\n  }\n}\n\n.nu-c-fs-lead {\n  font-size: var(--desktop-body-xl);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-fs-lead {\n    font-size: var(--mobile-body-xl);\n  }\n}\n\n.nu-c-caption {\n  text-transform: uppercase;\n  font-weight: 500;\n  font-size: var(--desktop-caption);\n  line-height: var(--desktop-caption);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-caption {\n    font-size: var(--mobile-caption);\n    line-height: var(--mobile-caption);\n  }\n}\n\n.nu-c-helper-text {\n  font-size: var(--desktop-helper-text);\n  line-height: var(--desktop-helper-text);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-helper-text {\n    font-size: var(--mobile-helper-text);\n    line-height: var(--mobile-helper-text);\n  }\n}\n\n.nu-c-code {\n  font-size: var(--desktop-code);\n  line-height: var(--desktop-code);\n}\n\n@media screen and (max-width: 600px) {\n  .nu-c-code {\n    font-size: var(--mobile-code);\n    line-height: var(--mobile-code);\n  }\n}\n\n/*# sourceMappingURL=index.css.map */\n","@import 'variables';\n@import 'utilities';\n@import 'components';",":root {\n  /* Mobile */\n  --mobile-heading-01: 32px;\n  --mobile-heading-02: 28px;\n  --mobile-heading-03: 24px;\n  --mobile-heading-04: 20px;\n  --mobile-heading-05: 18px;\n  --mobile-heading-06: 16px;\n\n  --mobile-body-xl: 16px;\n  --mobile-body: 14px;\n  --mobile-body-sm: 12px;\n\n  --mobile-caption: 12px;\n  --mobile-helper-text: 12px;\n  --mobile-code: 14px;\n\n  --mobile-heading-01: 40px;\n  --mobile-heading-02: 36px;\n  --mobile-heading-03: 30px;\n  --mobile-heading-04: 28px;\n  --mobile-heading-05: 26px;\n  --mobile-heading-06: 24px;\n\n  --mobile-body-xl: 24px;\n  --mobile-body: 20px;\n  --mobile-body-sm: 16px;\n\n  --mobile-caption: 16px;\n  --mobile-helper-text: 16px;\n  --mobile-code: 20px;\n\n  --mobile-tracking-heading-01: -0.8px;\n  --mobile-tracking-heading-02: -0.4px;\n  --mobile-tracking-heading-03: -0.4px;\n\n  /* Desktop */\n  --desktop-heading-01: 54px;\n  --desktop-heading-02: 42px;\n  --desktop-heading-03: 32px;\n  --desktop-heading-04: 28px;\n  --desktop-heading-05: 20px;\n  --desktop-heading-06: 18px;\n\n  --desktop-body-xl: 18px;\n  --desktop-body: 16px;\n  --desktop-body-sm: 14px;\n\n  --desktop-caption: 12px;\n  --desktop-helper-text: 12px;\n  --desktop-code: 14px;\n\n  --desktop-heading-01: 64px;\n  --desktop-heading-02: 50px;\n  --desktop-heading-03: 40px;\n  --desktop-heading-04: 36px;\n  --desktop-heading-05: 28px;\n  --desktop-heading-06: 26px;\n\n  --desktop-body-xl: 26px;\n  --desktop-body: 24px;\n  --desktop-body-sm: 20px;\n\n  --desktop-caption: 16px;\n  --desktop-helper-text: 16px;\n  --desktop-code: 20px;\n\n  --desktop-tracking-heading-01: -1.2px;\n  --desktop-tracking-heading-02: -0.8px;\n  --desktop-tracking-heading-03: -0.4px;\n}","/* Font Weights */\n.nu-u-fw-bold {\n  font-weight: 700;\n}\n\n.nu-u-fw-semi-bold {\n  font-weight: 500;\n}\n\n.nu-u-fw-normal {\n  font-weight: 400;\n}\n\n/* Utilities */\n.nu-u-text--uppercase {\n  text-transform: uppercase;\n}\n\n.nu-u-text--lowercase {\n  text-transform: lowercase;\n}\n\n.nu-u-text--capitalize {\n  text-transform: capitalize;\n}\n\n.nu-u-text--underline {\n  text-decoration: underline;\n}\n\n.nu-u-text--left {\n  text-align: left;\n}\n\n.nu-u-text--right {\n  text-align: right;\n}\n\n.nu-u-text--center {\n  text-align: center;\n}\n\n.nu-u-text--justify {\n  text-align: justify;\n}\n\n/* Font family */\n.nu-u-serif {\n  font-family: Didot,\n    'Bodoni MT',\n    'Noto Serif Display',\n    'URW Palladio L',\n    P052,\n    Sylfaen,\n    serif;\n}\n\n.nu-u-sans-serif {\n  font-family: Inter,\n    Roboto,\n    'Helvetica Neue',\n    'Arial Nova',\n    'Nimbus Sans',\n    Arial,\n    sans-serif;\n}\n\n.nu-u-code {\n  font-family: ui-monospace,\n    'Cascadia Code',\n    'Source Code Pro',\n    Menlo,\n    Consolas,\n    'DejaVu Sans Mono',\n    monospace;\n}","$mobile-breakpoint: 600px;\n\n/* Components */\n.nu-c-h1 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-01);\n  line-height: var(--desktop-heading-01);\n  letter-spacing: var(--desktop-tracking-heading-01);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-01);\n    line-height: var(--mobile-heading-01);\n    letter-spacing: var(--mobile-tracking-heading-01);\n  }\n}\n\n.nu-c-h2 {\n  font-weight: 700;\n  font-size: var(--desktop--heading-02);\n  line-height: var(--desktop--heading-02);\n  letter-spacing: var(--desktop-tracking-heading-02);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-02);\n    line-height: var(--mobile-heading-02);\n    letter-spacing: var(--mobile-tracking-heading-02);\n  }\n}\n\n.nu-c-h3 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-03);\n  line-height: var(--desktop-heading-03);\n  letter-spacing: var(--desktop-tracking-heading-03);\n  \n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-03);\n    line-height: var(--mobile-heading-03);\n    letter-spacing: var(--mobile-tracking-heading-03);\n  }\n}\n\n.nu-c-h4 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-04);\n  line-height: var(--desktop-heading-04);\n  \n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-04);\n    line-height: var(--mobile-heading-04);\n  }\n}\n\n.nu-c-h5 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-05);\n  line-height: var(--desktop-heading-05);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-05);\n    line-height: var(--mobile-heading-05);\n  }\n}\n\n.nu-c-h6 {\n  font-weight: 700;\n  font-size: var(--desktop-heading-06);\n  line-height: var(--desktop-heading-06);\n  \n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-heading-06);\n    line-height: var(--mobile-heading-06);\n  }\n}\n\n.nu-c-fs-lead {\n  font-size: var(--desktop-body-xl);\n  \n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-body-xl);\n  }\n}\n\n.nu-c-caption {\n  font-weight: 500;\n  text-transform: uppercase;\n  font-size: var(--desktop-caption);\n  line-height: var(--desktop-caption);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-caption);\n    line-height: var(--mobile-caption);\n  }\n}\n\n.nu-c-helper-text {\n  font-size: var(--desktop-helper-text);\n  line-height: var(--desktop-helper-text);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-helper-text);\n    line-height: var(--mobile-helper-text);\n  }\n}\n\n.nu-c-code {\n  font-size: var(--desktop-code);\n  line-height: var(--desktop-code);\n\n  @media screen and (max-width: $mobile-breakpoint) {\n    font-size: var(--mobile-code);\n    line-height: var(--mobile-code);\n  }\n}\n"],"names":[],"version":3,"file":"index.css.map"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@new-ui/typography",
+  "version": "0.1.0",
+  "description": "Modular typographic scale for your apps and websites.",
+  "source": "src/index.scss",
+  "main": "dist/index.css",
+  "targets": {
+    "main": false
+  },
+  "scripts": {
+    "watch": "parcel watch",
+    "build": "parcel build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewDesignFile/typography.git"
+  },
+  "keywords": [
+    "typography",
+    "responsive",
+    "type",
+    "type-styles",
+    "modular",
+    "type",
+    "tokens",
+    "desktop",
+    "mobile"
+  ],
+  "author": "Abhimanyu Rana",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NewDesignFile/typography/issues"
+  },
+  "homepage": "https://github.com/NewDesignFile/typography#readme",
+  "devDependencies": {
+    "@parcel/transformer-sass": "^2.8.3",
+    "autoprefixer": "^10.4.13",
+    "parcel": "^2.8.3",
+    "postcss-node-sass": "^1.1.1"
+  }
+}

package/parcel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("autoprefixer"), require("postcss-node-sass")],
+};

package/src/_components.scss

@@ -0,0 +1,114 @@
+$mobile-breakpoint: 600px;
+
+/* Components */
+.nu-c-h1 {
+  font-weight: 700;
+  font-size: var(--desktop-heading-01);
+  line-height: var(--desktop-heading-01);
+  letter-spacing: var(--desktop-tracking-heading-01);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-01);
+    line-height: var(--mobile-heading-01);
+    letter-spacing: var(--mobile-tracking-heading-01);
+  }
+}
+
+.nu-c-h2 {
+  font-weight: 700;
+  font-size: var(--desktop--heading-02);
+  line-height: var(--desktop--heading-02);
+  letter-spacing: var(--desktop-tracking-heading-02);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-02);
+    line-height: var(--mobile-heading-02);
+    letter-spacing: var(--mobile-tracking-heading-02);
+  }
+}
+
+.nu-c-h3 {
+  font-weight: 700;
+  font-size: var(--desktop-heading-03);
+  line-height: var(--desktop-heading-03);
+  letter-spacing: var(--desktop-tracking-heading-03);
+  
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-03);
+    line-height: var(--mobile-heading-03);
+    letter-spacing: var(--mobile-tracking-heading-03);
+  }
+}
+
+.nu-c-h4 {
+  font-weight: 700;
+  font-size: var(--desktop-heading-04);
+  line-height: var(--desktop-heading-04);
+  
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-04);
+    line-height: var(--mobile-heading-04);
+  }
+}
+
+.nu-c-h5 {
+  font-weight: 700;
+  font-size: var(--desktop-heading-05);
+  line-height: var(--desktop-heading-05);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-05);
+    line-height: var(--mobile-heading-05);
+  }
+}
+
+.nu-c-h6 {
+  font-weight: 700;
+  font-size: var(--desktop-heading-06);
+  line-height: var(--desktop-heading-06);
+  
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-heading-06);
+    line-height: var(--mobile-heading-06);
+  }
+}
+
+.nu-c-fs-lead {
+  font-size: var(--desktop-body-xl);
+  
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-body-xl);
+  }
+}
+
+.nu-c-caption {
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: var(--desktop-caption);
+  line-height: var(--desktop-caption);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-caption);
+    line-height: var(--mobile-caption);
+  }
+}
+
+.nu-c-helper-text {
+  font-size: var(--desktop-helper-text);
+  line-height: var(--desktop-helper-text);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-helper-text);
+    line-height: var(--mobile-helper-text);
+  }
+}
+
+.nu-c-code {
+  font-size: var(--desktop-code);
+  line-height: var(--desktop-code);
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    font-size: var(--mobile-code);
+    line-height: var(--mobile-code);
+  }
+}

package/src/_utilities.scss

@@ -0,0 +1,76 @@
+/* Font Weights */
+.nu-u-fw-bold {
+  font-weight: 700;
+}
+
+.nu-u-fw-semi-bold {
+  font-weight: 500;
+}
+
+.nu-u-fw-normal {
+  font-weight: 400;
+}
+
+/* Utilities */
+.nu-u-text--uppercase {
+  text-transform: uppercase;
+}
+
+.nu-u-text--lowercase {
+  text-transform: lowercase;
+}
+
+.nu-u-text--capitalize {
+  text-transform: capitalize;
+}
+
+.nu-u-text--underline {
+  text-decoration: underline;
+}
+
+.nu-u-text--left {
+  text-align: left;
+}
+
+.nu-u-text--right {
+  text-align: right;
+}
+
+.nu-u-text--center {
+  text-align: center;
+}
+
+.nu-u-text--justify {
+  text-align: justify;
+}
+
+/* Font family */
+.nu-u-serif {
+  font-family: Didot,
+    'Bodoni MT',
+    'Noto Serif Display',
+    'URW Palladio L',
+    P052,
+    Sylfaen,
+    serif;
+}
+
+.nu-u-sans-serif {
+  font-family: Inter,
+    Roboto,
+    'Helvetica Neue',
+    'Arial Nova',
+    'Nimbus Sans',
+    Arial,
+    sans-serif;
+}
+
+.nu-u-code {
+  font-family: ui-monospace,
+    'Cascadia Code',
+    'Source Code Pro',
+    Menlo,
+    Consolas,
+    'DejaVu Sans Mono',
+    monospace;
+}

package/src/_variables.scss

@@ -0,0 +1,71 @@
+:root {
+  /* Mobile */
+  --mobile-heading-01: 32px;
+  --mobile-heading-02: 28px;
+  --mobile-heading-03: 24px;
+  --mobile-heading-04: 20px;
+  --mobile-heading-05: 18px;
+  --mobile-heading-06: 16px;
+
+  --mobile-body-xl: 16px;
+  --mobile-body: 14px;
+  --mobile-body-sm: 12px;
+
+  --mobile-caption: 12px;
+  --mobile-helper-text: 12px;
+  --mobile-code: 14px;
+
+  --mobile-heading-01: 40px;
+  --mobile-heading-02: 36px;
+  --mobile-heading-03: 30px;
+  --mobile-heading-04: 28px;
+  --mobile-heading-05: 26px;
+  --mobile-heading-06: 24px;
+
+  --mobile-body-xl: 24px;
+  --mobile-body: 20px;
+  --mobile-body-sm: 16px;
+
+  --mobile-caption: 16px;
+  --mobile-helper-text: 16px;
+  --mobile-code: 20px;
+
+  --mobile-tracking-heading-01: -0.8px;
+  --mobile-tracking-heading-02: -0.4px;
+  --mobile-tracking-heading-03: -0.4px;
+
+  /* Desktop */
+  --desktop-heading-01: 54px;
+  --desktop-heading-02: 42px;
+  --desktop-heading-03: 32px;
+  --desktop-heading-04: 28px;
+  --desktop-heading-05: 20px;
+  --desktop-heading-06: 18px;
+
+  --desktop-body-xl: 18px;
+  --desktop-body: 16px;
+  --desktop-body-sm: 14px;
+
+  --desktop-caption: 12px;
+  --desktop-helper-text: 12px;
+  --desktop-code: 14px;
+
+  --desktop-heading-01: 64px;
+  --desktop-heading-02: 50px;
+  --desktop-heading-03: 40px;
+  --desktop-heading-04: 36px;
+  --desktop-heading-05: 28px;
+  --desktop-heading-06: 26px;
+
+  --desktop-body-xl: 26px;
+  --desktop-body: 24px;
+  --desktop-body-sm: 20px;
+
+  --desktop-caption: 16px;
+  --desktop-helper-text: 16px;
+  --desktop-code: 20px;
+
+  --desktop-tracking-heading-01: -1.2px;
+  --desktop-tracking-heading-02: -0.8px;
+  --desktop-tracking-heading-03: -0.4px;
+}

package/src/index.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'utilities';
+@import 'components';