Biings Design System

A comprehensive design system for building consistent user experiences across Biings products. Built on Bulma 0.9 with custom components, typography, and a complete icon set.

🚀 Quick Start

Installation

npm install biings-ds

yarn add biings-ds

Usage

Include the CSS file in your project:

<link rel="stylesheet" href="node_modules/biings-ds/build/bds.css">

For icons, include the SVG sprite:

<svg class="icon">
  <use href="node_modules/biings-ds/build/bds-icons.min.svg#icon-name"></use>
</svg>

📦 What's Included

Core Files

• bds.css - Complete CSS framework with all components and utilities
• bds-icons.min.svg - SVG sprite with 310+ custom icons
• Fonts - Averta (sans-serif) and Plush (serif) font families

Components

• Layout: Box, columns, hero, section, footer
• Forms: Input, textarea, select, checkbox, radio, file upload
• Navigation: Menu, breadcrumb, pagination, tabs
• Data Display: Table, card, media, message, notification
• Feedback: Modal, dropdown, tooltip, loader, skeleton
• Interactive: Button, tag, badge, progress bar

Design Tokens

• Colors: Primary (#8c50b9), secondary (#cb9569), state colors
• Typography: Custom font stacks with Averta and Plush
• Spacing: Consistent spacing scale
• Border Radius: Rounded corners system
• Shadows: Elevation system

🎨 Design System Features

Typography

• Primary Font: Averta (clean, modern sans-serif)
• Secondary Font: Plush (elegant serif for headings)
• Handwriting Font: Caveat (for special emphasis)
• Monospace: Roboto Mono (for code)

Color Palette

• Primary: Purple (#8c50b9) - Main brand color
• Secondary: Orange (#cb9569) - Accent color
• State Colors: Info, success, warning, danger
• Neutral: Black, white, grays, light/dark variants

Icons

• 310+ Custom Icons in SVG format
• Optimized: Minified and combined into single sprite
• Scalable: Vector-based for crisp display at any size
• Accessible: Proper ARIA labels and semantic markup

🛠️ Development

Prerequisites

• Node.js >= 20.0.0
• Yarn >= 1.22.19

Setup

# Clone the repository
git clone https://github.com/Biings/biings-ds.git
cd biings-ds

# Install dependencies
yarn install

# Start development server
yarn dev

Build Commands

# Build CSS and icons
yarn build

# Build CSS only
yarn styles

# Build icons only
yarn icons

# Watch for changes
yarn dev

Project Structure

src/
├── styles/
│   ├── bds.sass              # Main entry point
│   ├── bds_vars.sass         # Bulma configuration
│   └── bds/                  # Component styles
│       ├── avatar.sass
│       ├── button.sass
│       ├── form.sass
│       └── ...
├── icons/                    # SVG icon sources
└── themes/                   # Theme variations

build/
├── bds.css                   # Compiled CSS
├── bds-icons.min.svg         # Icon sprite
└── fonts/                    # Web fonts

📚 Documentation

Visit the live documentation for:

• Component examples and usage
• Design guidelines and best practices
• Color palette and typography
• Icon library and usage
• Migration guides

🤝 Contributing

We welcome contributions! Please see our contribution guidelines for:

• Design principles and standards
• Development workflow
• Code style guidelines
• Pull request process

📄 License

This project is licensed under the CC BY-SA 4.0 License - see the LICENCE.md file for details.

🏢 About Biings

Biings Design System is developed by Biings Technologies SA, a company focused on creating innovative digital solutions.

Made with ❤️ by the Biings team