omapps-design-system
v0.2.0
Published
HaHo web design system — CSS tokens, component styles, and DM Sans fonts. Brand-aware (coralCamo, seaLime, mistyRose, blueHaze) and style-aware (light/dark, rounded/sharp).
Maintainers
oxmo88Readme
omapps-design-system
HaHo web design system. Ships CSS tokens (colors, type, spacing, radii), a component stylesheet (buttons, inputs, lists, badges, toggles), and the DM Sans font family. Brand-aware (coralCamo, seaLime, mistyRose, blueHaze) and style-aware (light/dark, rounded/sharp).
npm install omapps-design-systemInstall
Option A — local install (no npm registry needed)
From your app's project root:
npm install ./path/to/design-systemThis works for monorepos and private projects. The folder is treated as if it were a published package.
Option B — publish to npm
cd design-system
# either set "name" to a scope you own, e.g. "@yourorg/futevolution-design-system"
# and remove "private": true from package.json
npm publish --access publicThen in the consuming app:
npm install @yourorg/futevolution-design-systemOption C — private GitHub package
Push the design-system/ folder to its own repo and install with:
npm install github:yourorg/futevolution-design-systemUsage
Vite / Next.js / Create React App / any modern bundler
// In your app entry (main.jsx, _app.tsx, etc.)
import "omapps-design-system/styles";Or import the two stylesheets individually:
import "omapps-design-system/tokens.css";
import "omapps-design-system/components.css";The fonts (DMSans-*.ttf) are referenced from tokens.css with relative paths and will be picked up automatically by the bundler.
Setting the brand + style
The design system is driven by two attributes on the root element:
<body data-brand="coralCamo" data-style="lightRounded">Or programmatically:
import { applyTheme } from "omapps-design-system";
applyTheme({ brand: "coralCamo", style: "lightRounded" });Brands: coralCamo · seaLime · mistyRose · blueHaze
Styles: lightRounded · lightSharp · darkRounded · darkSharp
Using tokens in your CSS
All design decisions live in CSS custom properties. Just read them:
.my-card {
background: var(--surface-card);
color: var(--text-primary);
border-radius: var(--radius-lg);
padding: var(--space-lg);
font: var(--type-h5);
letter-spacing: var(--ls-h);
}
.my-button {
background: var(--button-primary-fill);
color: var(--button-text-on-primary);
}When the user switches brand or style, every value above re-tints automatically.
Using component classes
components.css ships pre-styled primitives. Apply them as classes:
<button class="btn btn--big btn--filledA">Continue</button>
<button class="btn btn--medium btn--outlined">Cancel</button>
<button class="icon-btn"><svg>…</svg></button>(See components.css for the full list — buttons, inputs, lists, badges, toggles, etc.)
File map
design-system/
├── package.json
├── index.js # entry — imports both CSS files, exports applyTheme()
├── index.css # if you'd rather only use CSS, @imports both stylesheets
├── tokens.css # CSS variables (colors, type, spacing, radii, shadows)
├── components.css # button, input, list, badge, toggle, etc.
└── fonts/
├── DMSans-Regular.ttf
├── DMSans-Medium.ttf
└── DMSans-SemiBold.ttfLicense
Internal — Futevolution.