Design System Editor

Create, edit, and save custom design systems for your projects

Current System

Import

Design System Overview

This interactive editor allows you to customize and save design systems for your projects. Switch to Edit Mode to modify the current design system.

Colors

Customize your color palette, including primary, semantic, and UI colors

Typography

Adjust fonts, sizes, weights, and text styles

Components

Modify UI components like buttons, cards, and alerts

Spacing

Change margin, padding, and layout spacing values

Icons

Edit icon library and usage parameters

Export

Save your design system as JSON to use in your projects

Current Design System Preview

Color Palette

Background

Surface

Accent

Success

Error

Typography

Heading 1

Heading 2

Body Text Sample

Buttons

Alert

Information

This is a sample alert message.

Getting Started

This design system is built with React and Tailwind CSS. Use these elements to maintain consistency across your projects.

// Import necessary components
import { Button, Card, Alert } from '@/components/ui';

// Use in your components
export default function MyPage() {
  return (
    <div className="p-6">
      <Card>
        <h1 className="text-2xl font-bold text-gray-100">
          Hello World
        </h1>
        <p className="text-gray-400">
          Welcome to my portfolio!
        </p>
        <Button variant="primary">Get Started</Button>
      </Card>
    </div>
  );
}