Guidelines for creating and maintaining design systems that ensure visual consistency, accessibility compliance, and scalable component architecture across digital products.
:root {
/* Colors */
--color-primary-500: #0066cc;
--color-neutral-100: #f5f5f5;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
/* Typography */
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
import React from "react";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
}
const sizeStyles: Record<string, React.CSSProperties> = {
sm: { padding: "var(--space-1) var(--space-2)", fontSize: "var(--font-size-sm)" },
md: { padding: "var(--space-2) var(--space-4)", fontSize: "var(--font-size-base)" },
lg: { padding: "var(--space-3) var(--space-6)", fontSize: "var(--font-size-lg)" },
};
export const Button: React.FC<ButtonProps> = ({
variant = "primary",
size = "md",
loading = false,
disabled,
children,
...props
}) => (
<button
style={{
...sizeStyles[size],
backgroundColor: `var(--color-${variant}-500)`,
color: "var(--color-neutral-100)",
borderRadius: "var(--radius-md)",
boxShadow: "var(--shadow-sm)",
cursor: disabled || loading ? "not-allowed" : "pointer",
opacity: disabled ? 0.5 : 1,
}}
disabled={disabled || loading}
aria-busy={loading}
{...props}
>
{loading ? "Loading…" : children}
</button>
);
// .storybook/preview.ts
import type { Preview } from "@storybook/react";
import "../src/tokens.css"; // import design tokens globally
const preview: Preview = {
parameters: {
a11y: { element: "#storybook-root" },
backgrounds: {
default: "light",
values: [
{ name: "light", value: "#ffffff" },
{ name: "dark", value: "#1a1a1a" },
],
},
},
};
export default preview;
When evolving the design system, validate changes against WCAG 2.1 AA, run visual regression tests, and ensure token updates propagate correctly across all consuming applications.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).