Yellow Card Design System

Appearance

Getting Started ​

The Yellow Card Design System provides a comprehensive set of Vue 3 components, design tokens, and utilities for building B2B interfaces.

Prerequisites ​

  • Vue 3.5+
  • Node.js 20.19+
  • Pinia 2.x or 3.x
  • Vue Router 4.6+

Quick Install ​

bash
npm install @yellowcard/b2b-design-system

Setup ​

Import the styles in your app's entry point:

ts
// main.ts
import '@yellowcard/b2b-design-system/style.css';

Then use components anywhere:

vue
<script setup>
import { Button, TextInput, Alert } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Alert variant="information" title="Welcome">
    Get started with the design system.
  </Alert>
  <TextInput v-model="name" label="Your name" />
  <Button label="Submit" hierarchy="primary" />
</template>

Individual Imports ​

For guaranteed tree-shaking, import components directly:

ts
import Button from '@yellowcard/b2b-design-system/Button';
import TextInput from '@yellowcard/b2b-design-system/TextInput';

Using Design Tokens ​

Import SCSS tokens to use the design system's colors, typography, and spacing in your own styles:

scss
@use '@yellowcard/b2b-design-system/scss/colors' as *;
@use '@yellowcard/b2b-design-system/scss/typography' as *;

.my-component {
  color: $color-grey-900;
  font-size: $font-size-body-md;
}

See the Tokens section for the full reference.

Next Steps ​