IBIS Design System for Svelte

A comprehensive design system for Svelte applications featuring IBIS brand colors, typography, and UI components. Built with Svelte 5 and SvelteKit, this design system provides a consistent and accessible foundation for building modern web applications.

Design Philosophy

The IBIS Design System is built around a purple/magenta brand identity with carefully chosen semantic colors that maintain accessibility and visual harmony.

Key Principles

• Accessibility First: All colors meet WCAG contrast requirements
• Brand Consistency: Purple/magenta family creates unified visual identity
• Semantic Clarity: Each color has a clear, purposeful meaning
• Scalable System: 50-950 scales provide flexibility for various use cases

Installation

npm install @ibis-design-svelte

Quick Start

Importing Design Tokens

// Import colors and typography
import { colors, typography } from '@ibis-design-svelte';

// Or import specific modules
import { colors } from '@ibis-design-svelte/theme/colors';
import { typography } from '@ibis-design-svelte/theme/typography';

Using Colors

// Primary brand elements
const primaryButton = {
  backgroundColor: colors.primary[500], // #522398
  color: colors.neutral[50]
};

// Semantic colors
const successState = {
  backgroundColor: colors.success[500], // #009A08
  color: colors.neutral[50]
};

const errorState = {
  backgroundColor: colors.error[500], // #B70C00
  color: colors.neutral[50]
};

Using Typography

// Heading styles
const headingStyle = {
  fontSize: typography.text.h1.fontSize,    // 4.188rem (67px)
  lineHeight: typography.text.h1.lineHeight, // 2.75rem (44px)
  fontFamily: typography.fontFamily.text,    // Inter, system-ui, sans-serif
  fontWeight: typography.fontWeight.bold     // 700
};

// Body text
const bodyStyle = {
  fontSize: typography.text.body.fontSize,   // 1.000rem (16px)
  lineHeight: typography.text.body.lineHeight, // 1.5rem (24px)
  fontFamily: typography.fontFamily.text
};

Color Palette

Primary Colors (Purple Family)

The core brand colors that establish visual identity and hierarchy.

colors.primary[500] // #522398 - Base brand color
colors.primary[50]  // #f5f3ff - Very light purple tint
colors.primary[950] // #0f0f23 - Darkest purple

Semantic Colors

Each color serves a specific purpose in the interface:

• Secondary: Deep magenta for supporting elements
• Accent: Light pink for highlights and special features
• Success: Pure green (#009A08) for positive states
• Warning: Pure orange (#FA8900) for caution states
• Error: Pure red (#B70C00) for error states
• Neutral: True neutral gray (#8B8B8E) for text and borders

Typography System

Font Families

• Text: Inter, system-ui, sans-serif - Primary content
• Marketing: Metrisch, sans-serif - Display and marketing content
• Button: Verdana, sans-serif - Button text
• Accent: Verdana, sans-serif - Accent text

Text Styles

• H1-H5: Primary headings with consistent scaling
• Body: Main content text (16px base)
• Body Small: Secondary content and captions
• Marketing Headers: Large display text for marketing content

Components

Button Component

The Button component is a foundational element providing comprehensive button functionality with multiple variants, sizes, and states.

Basic Usage

<script>
  import Button from '@ibis-design-svelte/Button';
  import IconPlus from '@lucide/svelte/icons/plus';
</script>

<!-- Basic button -->
<Button onclick={handleClick}>
  Click me
</Button>

<!-- Button with icon -->
<Button variant="success">
  {#snippet icon()}<IconPlus />{/snippet}
  Add Item
</Button>

<!-- Icon-only button -->
<Button variant="primary" iconOnly>
  {#snippet icon()}<IconPlus />{/snippet}
</Button>

Features

• Variants: Primary, secondary, accent, success, warning, error
• Presets: Filled, tonal, outlined
• Sizes: x-small, small, medium, large
• States: Default, disabled, loading, skeleton
• Icon Support: Left/right positioning with Svelte snippets
• Accessibility: WCAG compliant with proper ARIA attributes

For detailed Button component documentation, see Button Component Guide.

Roadmap

Current Version (0.1.0)

• Design Tokens: Complete color palette and typography system
• Theme Exports: Importable design tokens
• TypeScript Support: Full type definitions
• Button Component: Comprehensive button component with multiple variants, sizes, and states
• Documentation: Comprehensive usage guides and component documentation

Planned Releases

• Advanced Components (v0.2.0)

  • Form inputs and controls
  • Typography components
  • Layout utilities
  • Additional button variants and patterns

• Advanced Components (v0.2.0)

  • Navigation components
  • Feedback components (alerts, notifications)
  • Data display components
  • Modal and overlay components

• Complete Library (v1.0.0)

  • Full component library
  • Storybook documentation
  • Accessibility audit
  • Performance optimization

Development

Prerequisites

• Node.js 20+
• npm, yarn, or pnpm

Setup

# Clone the repository
git clone <repository-url>
cd ibis-design-svelte

# Install dependencies
npm install

# Start development server
npm run dev

Available Scripts

npm run dev          # Start development server
npm run build        # Build the library
npm run preview      # Preview production build
npm run check        # Type checking
npm run lint         # Linting and formatting
npm run test         # Run tests

Project Structure

src/
├── lib/
│   ├── components/     # UI components
│   ├── theme/         # Design tokens
│   └── index.ts       # Main exports
├── routes/            # Demo/showcase app
└── docs/             # Documentation

Documentation

For detailed documentation, visit our documentation site which includes:

• Color System
• Typography Guidelines
• Button Component
• Component Guidelines
• Accessibility Standards

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Guidelines

1. Follow the design spec from Figma
2. Ensure accessibility compliance
3. Write comprehensive tests
4. Update documentation
5. Follow established patterns

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

About

IBIS Design System is developed and maintained by IBIS Management Associates B.V..

Support

• Email: [[email protected]]
• Documentation: [./docs/README.md]
• Issues: [GitHub Issues]
• Discussions: [GitHub Discussions]

Built by IBIS Management Associates B.V.

Version: 0.1.0