@octaviaflow/fonts 1.0.0

package/README.md

@@ -0,0 +1,189 @@
+# @octaviaflow/fonts
+
+> Octaviaflow Design System typeface family
+
+## Overview
+
+The `@octaviaflow/fonts` package provides the Octaviaflow Design System typeface family, including:
+
+- **Lufga** - Modern geometric sans-serif (18 styles: Thin to Black, with italics)
+- **RTL United Text** - Right-to-left language support (6 styles: Light to Bold, with italics)
+- **JetBrains Mono** - Monospace font for code (16 styles: Thin to Extra Bold, with italics)
+
+## Installation
+
+```bash
+npm install @octaviaflow/fonts
+```
+
+Or with Bun:
+
+```bash
+bun add @octaviaflow/fonts
+```
+
+## Usage
+
+### CSS Import (Recommended)
+
+Import the compiled CSS file in your application:
+
+```css
+@import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
+```
+
+Or use the minified version:
+
+```css
+@import '@octaviaflow/fonts/css/octaviaflow-fonts.min.css';
+```
+
+### SCSS Import
+
+For more control, import the SCSS files:
+
+```scss
+// Import all fonts
+@import '@octaviaflow/fonts/scss/octaviaflow-fonts';
+
+// Or import individually
+@import '@octaviaflow/fonts/scss/lufga';
+@import '@octaviaflow/fonts/scss/rtl-united-text';
+@import '@octaviaflow/fonts/scss/jetbrains-mono';
+```
+
+### Custom Font Path
+
+If you need to customize the font file path:
+
+```scss
+$font-prefix: './custom/path/to/fonts';
+@import '@octaviaflow/fonts/scss/octaviaflow-fonts';
+```
+
+### Font Family Usage
+
+Once imported, use the fonts in your CSS:
+
+```css
+/* Lufga - Primary typeface */
+body {
+  font-family: 'Lufga', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* RTL United Text - For RTL languages */
+[dir='rtl'] {
+  font-family: 'RTL United Text', 'Lufga', sans-serif;
+}
+
+/* JetBrains Mono - For code */
+code, pre, .code {
+  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+```
+
+## Font Weights
+
+### Lufga
+- **100** - Thin
+- **200** - Extra Light
+- **300** - Light
+- **400** - Regular (default)
+- **500** - Medium
+- **600** - Semi Bold
+- **700** - Bold
+- **800** - Extra Bold
+- **900** - Black
+
+All weights include italic variants.
+
+### RTL United Text
+- **300** - Light
+- **400** - Regular (default)
+- **700** - Bold
+
+All weights include italic variants.
+
+### JetBrains Mono
+- **100** - Thin
+- **200** - Extra Light
+- **300** - Light
+- **400** - Regular (default)
+- **500** - Medium
+- **600** - Semi Bold
+- **700** - Bold
+- **800** - Extra Bold
+
+All weights include italic variants.
+
+## Storybook Integration
+
+To use Octaviaflow fonts globally in Storybook, add to `.storybook/preview-head.html`:
+
+```html
+<link rel="stylesheet" href="../node_modules/@octaviaflow/fonts/css/octaviaflow-fonts.css">
+```
+
+Or import in `.storybook/preview.js`:
+
+```javascript
+import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
+```
+
+## Next.js Integration
+
+In your `_app.tsx` or `layout.tsx`:
+
+```tsx
+import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+```
+
+## React Integration
+
+In your main entry file (e.g., `index.tsx`):
+
+```tsx
+import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+## File Structure
+
+```
+@octaviaflow/fonts/
+├── css/
+│   ├── octaviaflow-fonts.css
+│   └── octaviaflow-fonts.min.css
+├── scss/
+│   ├── _lufga.scss
+│   ├── _rtl-united-text.scss
+│   └── octaviaflow-fonts.scss
+├── fonts/
+│   ├── lufga/
+│   │   └── *.woff
+│   └── rtl-united-text/
+│       └── *.ttf
+└── package.json
+```
+
+## Performance Tips
+
+1. **Use CSS import** - Precompiled CSS is faster than SCSS compilation
+2. **Minified version** - Use `.min.css` in production
+3. **Subset fonts** - Only import the fonts you need (Lufga, RTL United Text, or JetBrains Mono)
+4. **font-display: swap** - All fonts use `font-display: swap` for better performance
+
+## License
+
+Apache-2.0
+
+## Support
+
+For issues and questions, visit: https://github.com/octaviaflow-design-system/issues

package/css/octaviaflow-fonts.css

@@ -0,0 +1,296 @@
+/**
+ * Copyright Octaviaflow 2026
+ * Main entry point for Octaviaflow fonts
+ */
+/**
+ * Copyright Octaviaflow 2026
+ * Lufga typeface
+ */
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaThin.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaThinItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaExtraLight.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaExtraLightItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaLight.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaLightItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaRegular.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaMedium.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaMediumItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaSemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaSemiBoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaBoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaExtraBold.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaExtraBoldItalic.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaBlack.woff") format("woff");
+}
+@font-face {
+  font-family: "Lufga";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("../fonts/lufga/LufgaBlackItalic.woff") format("woff");
+}
+/**
+ * Copyright Octaviaflow 2026
+ * RTL United Text typeface
+ */
+@font-face {
+  font-family: "RTL United Text";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextLight.ttf") format("truetype");
+}
+@font-face {
+  font-family: "RTL United Text";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextLightItalic.ttf") format("truetype");
+}
+@font-face {
+  font-family: "RTL United Text";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextRegular.ttf") format("truetype");
+}
+@font-face {
+  font-family: "RTL United Text";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextRegularItalic.ttf") format("truetype");
+}
+@font-face {
+  font-family: "RTL United Text";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextBold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "RTL United Text";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/rtl-united-text/RTLUnitedTextBoldItalic.ttf") format("truetype");
+}
+/**
+ * Copyright Octaviaflow 2026
+ * JetBrains Mono - Monospace typeface for code
+ */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Thin.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-ThinItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-ExtraLight.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Light.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-LightItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-MediumItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-BoldItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-ExtraBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
+}

package/css/octaviaflow-fonts.min.css

@@ -0,0 +1 @@
+@font-face{font-family:"Lufga";font-style:normal;font-weight:100;font-display:swap;src:url("../fonts/lufga/LufgaThin.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:100;font-display:swap;src:url("../fonts/lufga/LufgaThinItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/lufga/LufgaExtraLight.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:200;font-display:swap;src:url("../fonts/lufga/LufgaExtraLightItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/lufga/LufgaLight.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/lufga/LufgaLightItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lufga/LufgaRegular.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lufga/LufgaItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/lufga/LufgaMedium.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/lufga/LufgaMediumItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/lufga/LufgaSemiBold.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/lufga/LufgaSemiBoldItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lufga/LufgaBold.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/lufga/LufgaBoldItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/lufga/LufgaExtraBold.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:800;font-display:swap;src:url("../fonts/lufga/LufgaExtraBoldItalic.woff") format("woff")}@font-face{font-family:"Lufga";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/lufga/LufgaBlack.woff") format("woff")}@font-face{font-family:"Lufga";font-style:italic;font-weight:900;font-display:swap;src:url("../fonts/lufga/LufgaBlackItalic.woff") format("woff")}@font-face{font-family:"RTL United Text";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextLight.ttf") format("truetype")}@font-face{font-family:"RTL United Text";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextLightItalic.ttf") format("truetype")}@font-face{font-family:"RTL United Text";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextRegular.ttf") format("truetype")}@font-face{font-family:"RTL United Text";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextRegularItalic.ttf") format("truetype")}@font-face{font-family:"RTL United Text";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextBold.ttf") format("truetype")}@font-face{font-family:"RTL United Text";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/rtl-united-text/RTLUnitedTextBoldItalic.ttf") format("truetype")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Thin.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:100;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-ThinItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-ExtraLight.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:200;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-ExtraLightItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Light.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-LightItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Italic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-MediumItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-BoldItalic.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-ExtraBold.woff2") format("woff2")}@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:800;font-display:swap;src:url("../fonts/jetbrains-mono/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2")}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@octaviaflow/fonts",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Octaviaflow Design System typeface family - Lufga, RTL United Text, and JetBrains Mono",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octaviaflow-design-system.git",
+    "directory": "packages/fonts"
+  },
+  "bugs": "https://github.com/octaviaflow-design-system/issues",
+  "keywords": [
+    "octaviaflow",
+    "fonts",
+    "typeface",
+    "lufga",
+    "rtl-united-text",
+    "jetbrains-mono",
+    "monospace",
+    "design-system"
+  ],
+  "files": [
+    "css",
+    "scss",
+    "fonts/lufga/**/*.woff",
+    "fonts/lufga/**/*.woff2",
+    "fonts/rtl-united-text/**/*.ttf",
+    "fonts/rtl-united-text/**/*.woff",
+    "fonts/rtl-united-text/**/*.woff2",
+    "fonts/jetbrains-mono/**/*.woff2"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf css",
+    "build": "bun run clean && node tasks/build-css.js"
+  },
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "sass": "^1.97.3"
+  },
+  "dependencies": {
+    "sass": "1.97.3"
+  }
+}

package/scss/_jetbrains-mono.scss

@@ -0,0 +1,142 @@
+/**
+ * Copyright Octaviaflow 2026
+ * JetBrains Mono - Monospace typeface for code
+ */
+
+$font-prefix: '../fonts' !default;
+
+// JetBrains Mono Thin
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Extra Light
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Light
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-LightItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Regular
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
+}
+
+// JetBrains Mono Medium
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-MediumItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Semi Bold
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Bold
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2');
+}
+
+// JetBrains Mono Extra Bold
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('#{$font-prefix}/jetbrains-mono/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
+}

package/scss/_lufga.scss

@@ -0,0 +1,159 @@
+/**
+ * Copyright Octaviaflow 2026
+ * Lufga typeface
+ */
+
+$font-prefix: '../fonts' !default;
+
+// Lufga Thin
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaThin.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaThinItalic.woff') format('woff');
+}
+
+// Lufga Extra Light
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaExtraLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaExtraLightItalic.woff') format('woff');
+}
+
+// Lufga Light
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaLightItalic.woff') format('woff');
+}
+
+// Lufga Regular
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaRegular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaItalic.woff') format('woff');
+}
+
+// Lufga Medium
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaMedium.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaMediumItalic.woff') format('woff');
+}
+
+// Lufga Semi Bold
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaSemiBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaSemiBoldItalic.woff') format('woff');
+}
+
+// Lufga Bold
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaBoldItalic.woff') format('woff');
+}
+
+// Lufga Extra Bold
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaExtraBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaExtraBoldItalic.woff') format('woff');
+}
+
+// Lufga Black
+@font-face {
+  font-family: 'Lufga';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaBlack.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lufga';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('#{$font-prefix}/lufga/LufgaBlackItalic.woff') format('woff');
+}

package/scss/_rtl-united-text.scss

@@ -0,0 +1,57 @@
+/**
+ * Copyright Octaviaflow 2026
+ * RTL United Text typeface
+ */
+
+$font-prefix: '../fonts' !default;
+
+// RTL United Text Light
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextLight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextLightItalic.ttf') format('truetype');
+}
+
+// RTL United Text Regular
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextRegular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextRegularItalic.ttf') format('truetype');
+}
+
+// RTL United Text Bold
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'RTL United Text';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-prefix}/rtl-united-text/RTLUnitedTextBoldItalic.ttf') format('truetype');
+}

package/scss/octaviaflow-fonts.scss

@@ -0,0 +1,8 @@
+/**
+ * Copyright Octaviaflow 2026
+ * Main entry point for Octaviaflow fonts
+ */
+
+@use 'lufga';
+@use 'rtl-united-text';
+@use 'jetbrains-mono';