@make-kits/design-system-atos

A complete design kit with components, styles, and guidelines for building modern web applications with the Atos brand identity.

Features

✨ Complete Component Library - Button, Card, Badge, Input, Alert, and more
🎨 Design Tokens - Comprehensive color, spacing, and typography system
⚡ TypeScript Support - Full type definitions included
🎯 Tailwind Compatible - Works seamlessly with Tailwind CSS v4
♿ Accessible - Built with accessibility best practices
🌳 Tree-Shakeable - Import only what you need

Installation

pnpm add @make-kits/design-system-atos

Quick Start

1. Import the stylesheet in your main CSS file:

@import '@make-kits/design-system-atos/style.css';

2. Import and use components:

import { Button, Card, Badge } from '@make-kits/design-system-atos';

function App() {
  return (
    <Card>
      <h2>Welcome</h2>
      <Button variant="primary">Get Started</Button>
      <Badge variant="success">Active</Badge>
    </Card>
  );
}

Documentation

Complete documentation is available in the guidelines/ directory:

• Guidelines.md - Overview and philosophy
• setup.md - Installation and configuration
• components.md - Component catalog and usage
• tokens.md - Design tokens reference
• styles.md - Styling guide and best practices

Components

Button

<Button variant="primary" size="md">Click Me</Button>
<Button variant="outline">Cancel</Button>
<Button variant="destructive">Delete</Button>

Card

<Card variant="glass">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Badge

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>

Input

<Input type="text" placeholder="Enter text" />

Alert

<Alert variant="info">
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>This is important</AlertDescription>
</Alert>

Design Tokens

Access design tokens via CSS custom properties:

.custom-element {
  color: var(--text-primary);
  background: var(--primary);
  padding: var(--spacer-md);
  border-radius: var(--radius-lg);
}

Color Palette

• Brand: --atos-blue, --blue-vivid, --blue-light
• Accents: --teal, --violet, --amber, --green, --rose
• Text: --text-primary, --text-secondary, --text-tertiary, --text-muted
• Backgrounds: --page-bg, --glass-header, --glass-card

See tokens.md for the complete reference.

Tailwind CSS Integration

If using Tailwind CSS v4, add these mappings to your tailwind.css:

@theme inline {
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  /* ... see setup.md for complete list */
}

Then use Tailwind utilities:

<div className="bg-primary text-primary-foreground">
  Styled with Tailwind
</div>

TypeScript

Full TypeScript support with exported types:

import { ButtonProps, CardProps } from '@make-kits/design-system-atos';

const myButtonProps: ButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};

Customization

Override design tokens in your CSS:

:root {
  --primary: #FF6B00;
  --spacer-md: 1.25rem;
}

Extend components with className:

<Button className="min-w-[200px] shadow-xl" variant="primary">
  Custom Button
</Button>

Best Practices

✅ Do:

• Use design system components instead of building from scratch
• Use CSS custom properties for all styling
• Extend with className prop
• Import only needed components

❌ Don't:

• Hardcode color values
• Modify design system source files
• Use !important to override styles
• Create duplicate components

Browser Support

• Chrome/Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)

Peer Dependencies

• React ^18.0.0
• React DOM ^18.0.0

License

MIT

Contributing

Issues and feature requests are welcome. Please follow the existing code style and include tests for new features.

Support

For questions or issues:

• Check the documentation
• Review component examples
• Consult the styling guide