Design system for SQLI applications built on DaisyUI with custom SQLI themes.
Current version: 0.5.0-alpha - View Changelog
| Environment | URL | Branch |
|---|---|---|
| Stable | https://main-bvxea6i-n3mp4dy5ud5ck.fr-3.platformsh.site/ | main |
| Dev | https://dev-54ta5gq-n3mp4dy5ud5ck.fr-3.platformsh.site/ | dev |
Install directly from GitHub:
# Latest version (main branch)
npm install git+https://github.com/sqli/elevate-design-system.git
# Specific version tag
npm install git+https://github.com/sqli/elevate-design-system.git#v1.0.0
# Development branch
npm install git+https://github.com/sqli/elevate-design-system.git#devThen import in your CSS or JS:
/* In your main CSS file */
@import '@sqli/elevate-design-system/dist/sqli-design-system.css';
/* Or minified version */
@import '@sqli/elevate-design-system/dist/sqli-design-system.min.css';
/* Include fonts (optional but recommended) */
@import '@sqli/elevate-design-system/dist/fonts.css';// In your JS entry point
import '@sqli/elevate-design-system/dist/sqli-design-system.css';
import '@sqli/elevate-design-system/dist/fonts.css';Apply a theme to your HTML:
<html data-theme="sqli-light">
<button class="btn btn-primary">Hello World</button>
</html>If published to npm registry:
npm install @sqli/elevate-design-system@import '@sqli/elevate-design-system';| File | Description | Size |
|---|---|---|
dist/sqli-design-system.css |
Full CSS (readable) | ~267 KB |
dist/sqli-design-system.min.css |
Minified CSS (production) | ~198 KB |
dist/tokens.css |
CSS variables only | ~3 KB |
dist/fonts.css |
@font-face declarations | ~2 KB |
dist/fonts/ |
TWK Everett font files | - |
dist/logos/ |
SQLI logos (SVG & PNG) | - |
src/tailwind/preset.js |
Tailwind CSS preset | - |
| Theme | Background | Primary | Usage |
|---|---|---|---|
sqli-light |
Cream | Cobalt | Default |
sqli-dark |
Midnight | Sky | Dark mode |
// Toggle theme
document.documentElement.setAttribute('data-theme', 'sqli-dark');| Color | Hex | Usage |
|---|---|---|
| Cream | #FFFAF0 |
Light background |
| Midnight | #0F0E2B |
Dark background |
| Cobalt | #1F24E9 |
Primary (light) |
| Sky | #6DA5FF |
Primary (dark) |
All brand assets are available in the dist/ folder after installation:
// Import paths for logos
import logoMidnight from '@sqli/elevate-design-system/dist/logos/Logo_midnight.svg';
import logoCream from '@sqli/elevate-design-system/dist/logos/Logo_cream.svg';
import logoSky from '@sqli/elevate-design-system/dist/logos/Logo_sky.svg';
// Ascenders
import ascendersCobalt from '@sqli/elevate-design-system/dist/logos/Ascenders-cobalt.svg';
// Favicons
import favicon from '@sqli/elevate-design-system/dist/logos/favicon.svg';<!-- Direct URL reference (adjust path based on your bundler) -->
<img src="node_modules/@sqli/elevate-design-system/dist/logos/Logo_midnight.svg" alt="SQLI" />Available logos:
Logo_cream.svg/.png- Light theme logoLogo_midnight.svg/.png- Dark theme logoLogo_sky.svg/.png- Alternative logoLogo_*_with_exclusion.svg/.png- Logos with exclusion zoneAscenders-*.svg/.png- Brand ascenders (cobalt, cream, midnight, sky)favicon*.svg- Favicons for different themes
Fonts are automatically loaded via fonts.css:
@import '@sqli/elevate-design-system/dist/fonts.css';65+ DaisyUI components with SQLI themes:
<button class="btn btn-primary">Button</button>
<div class="card bg-base-100 shadow-xl">...</div>
<div class="alert alert-info">Alert</div>See DaisyUI Components for full documentation.
npm run dev # Storybook + CSS watch
npm run build # Build all assets
npm run storybook # Launch Storybook
npm test # Run tests- Node.js >= 22
- npm >= 9
Full documentation available in Storybook:
- Getting Started - 5-minute quick start
- Installation Guide - Git repository, Platform.sh, frameworks
- Design Tokens - CSS variables
- Component Index - All 65+ components
Proprietary SQLI - Internal use only.
- Repository: https://github.com/sqli/elevate-design-system
- Brand Guidelines: See SQLI-BRAND-REFERENCE.md