Open menu

CSS Component Kit Generator

Pick a button, form field, card and badge (from presets, your saved favourites or a share link from each studio) and export them together as one consistent mini design system. Turn on "Make it consistent" to apply one brand color, text and surface color, corner-radius scale and font to all four. Every color, radius, shadow and font is then factored into shared custom properties such as --kit-brand and --kit-radius-md, and you can download the CSS, a Tailwind v4 theme, design tokens and a demo page in one ZIP.

Components

Button
Button source
Open the Button studio →
Form field
Form field source
Open the Form field studio →
Card
Card source
Open the Card studio →
Badge
Badge source
Open the Badge studio →

Make it consistent

Brand color
Text color
Surface color

Preview

New

We'll never share your email.

Placeholder landscape

Mountain retreat

A quiet cabin with sweeping views, hiking trails and a wood-fired sauna.

Learn more

Checks

  • Pass Button label contrast 6.3:1 (needs 4.5:1).
  • Pass Form field border contrast 4.0:1 against its surface (needs 3:1).
  • Pass Card text contrast 17.9:1 (needs 4.5:1).
  • Pass The kit uses 22 color tokens and 3 radius tokens. Fewer shared values make a system easier to maintain.

Export the kit

Format
CSS (tokens + components)
/* Component kit: design tokens + components. Generated by Ali Tools Express. */
:root {
  --kit-brand: #4F46E5;
  --kit-ink: #0F172A;
  --kit-surface: #FFFFFF;
  --kit-on-brand: #FFFFFF;
  --kit-radius-sm: 8px;
  --kit-radius-md: 10px;
  --kit-radius-lg: 16px;
  --kit-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kit-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
  --kit-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0 10px 24px -6px rgba(79, 70, 229, 0.45), 0 12px 24px -8px rgba(79, 70, 229, 0.5);
  --kit-color-1: #7B7F8A;
  --kit-color-2: #6F747F;
  --kit-color-3: #505564;
  --kit-shadow-3: 0 0 0 3px rgba(79, 70, 229, 0.35);
  --kit-color-4: #ECECEE;
  --kit-color-5: #575D6A;
  --kit-color-6: #DC2626;
  --kit-shadow-4: 0 0 0 3px rgba(220, 38, 38, 0.3);
  --kit-shadow-5: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 20px -5px rgba(15, 23, 42, 0.12);
  --kit-color-7: #DDDFE1;
  --kit-shadow-6: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 40px 60px -20px rgba(15, 23, 42, 0.3);
  --kit-color-8: #E6E5FB;
  --kit-color-9: #E5E7EA;
  --kit-color-10: #475569;
  --kit-color-11: #DEEDE4;
  --kit-color-12: #137337;
  --kit-color-13: #F5E7DD;
  --kit-color-14: #AB4F09;
  --kit-color-15: #F5DFDF;
  --kit-color-16: #B91C1C;
  --kit-color-17: #DCEAF2;
  --kit-color-18: #0369A1;
}

/* button */
.kit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px;
  font-family: var(--kit-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--kit-on-brand);
  background: var(--kit-brand);
  border: 0;
  border-radius: var(--kit-radius-md);
  box-shadow: var(--kit-shadow-1);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-position 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 180ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kit-button:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px) translateY(-3px);
  box-shadow: var(--kit-shadow-2);
}

.kit-button:focus-visible {
  outline: 3px solid var(--kit-brand);
  outline-offset: 2px;
}

.kit-button:active:not(:disabled) {
  filter: brightness(0.96);
  transform: scale(0.98);
}

.kit-button:disabled,
.kit-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.kit-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .kit-button,
  .kit-button::before,
  .kit-button::after,
  .kit-button * {
    transition: none;
    animation: none;
  }
}

/* input */
.kit-field {
  position: relative;
  display: grid;
  gap: 6px;
  max-width: 360px;
  color: var(--kit-ink);
  font-family: var(--kit-font);
}

.kit-field__label {
  font-weight: 600;
  font-size: 14px;
}

.kit-field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  color: var(--kit-ink);
  border-radius: var(--kit-radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  background-color: var(--kit-surface);
  border: 1px solid var(--kit-color-1);
}

.kit-field__input::placeholder {
  color: var(--kit-color-2);
  opacity: 1;
}

.kit-field__input:hover {
  border-color: var(--kit-color-3);
}

.kit-field__input:focus-visible {
  outline: none;
  border-color: var(--kit-brand);
  box-shadow: var(--kit-shadow-3);
}

.kit-field__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--kit-color-4);
}

.kit-field__hint {
  margin: 0;
  font-size: 14px;
  color: var(--kit-color-5);
}

.kit-field__error {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--kit-color-6);
}

.kit-field--error .kit-field__input {
  border-color: var(--kit-color-6);
}

.kit-field--error .kit-field__input:focus-visible {
  box-shadow: var(--kit-shadow-4);
}

@media (prefers-reduced-motion: reduce) {
  .kit-field__input,
  .kit-field__label {
    transition: none;
  }
}

/* card */
.kit-card {
  position: relative;
  display: flex;
  width: min(100%, 320px);
  overflow: hidden;
  border-radius: var(--kit-radius-lg);
  background-color: var(--kit-surface);
  color: var(--kit-ink);
  box-shadow: var(--kit-shadow-5);
  flex-direction: column;
  border: 1px solid var(--kit-color-7);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  font-family: var(--kit-font);
}

.kit-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.kit-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.kit-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.kit-card__text,
.kit-card__meta {
  margin: 0;
  color: var(--kit-color-5);
  line-height: 1.55;
}

.kit-card__button {
  align-self: flex-start;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--kit-radius-lg);
  background-color: var(--kit-brand);
  color: var(--kit-on-brand);
  font-weight: 600;
  text-decoration: none;
}

.kit-card__button:focus-visible {
  outline: 2px solid var(--kit-brand);
  outline-offset: 3px;
}

.kit-card:hover,
.kit-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--kit-shadow-6);
}

@media (prefers-reduced-motion: reduce) {
  .kit-card,
  .kit-card__media {
    transition: none;
  }
}

/* badge */
.kit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--badge-border);
  border-radius: var(--kit-radius-sm);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-family: var(--kit-font);
}

.kit-badge--brand {
  --badge-bg: var(--kit-color-8);
  --badge-fg: var(--kit-brand);
  --badge-border: var(--kit-color-8);
}

.kit-badge--neutral {
  --badge-bg: var(--kit-color-9);
  --badge-fg: var(--kit-color-10);
  --badge-border: var(--kit-color-9);
}

.kit-badge--success {
  --badge-bg: var(--kit-color-11);
  --badge-fg: var(--kit-color-12);
  --badge-border: var(--kit-color-11);
}

.kit-badge--warning {
  --badge-bg: var(--kit-color-13);
  --badge-fg: var(--kit-color-14);
  --badge-border: var(--kit-color-13);
}

.kit-badge--danger {
  --badge-bg: var(--kit-color-15);
  --badge-fg: var(--kit-color-16);
  --badge-border: var(--kit-color-15);
}

.kit-badge--info {
  --badge-bg: var(--kit-color-17);
  --badge-fg: var(--kit-color-18);
  --badge-border: var(--kit-color-17);
}
  • Colors: 22
  • Radii: 3
  • Shadows: 6

Runs entirely in your browser. Nothing you paste or open here is uploaded or stored.

How to use the component kit

  1. Choose a source for each component: Preset, My favourites or Share link.
  2. Pick the design: a preset from the list, one of the favourites you saved in that studio, or paste the link from the studio’s Share button.
  3. Keep “Make it consistent” on and set the brand color, text color, surface color, base radius and font, or turn it off to keep each component exactly as designed.
  4. Check the preview and the checks for contrast and the number of shared values.
  5. Export: copy the CSS, Tailwind theme, JSON tokens or demo page, or download all four as a ZIP.

The Open the studio links take you to each component’s studio to design something new, then bring it back with a favourite or share link.

How the kit is built

Each component is generated by the same code as its studio, with namespaced class names: .kit-button, .kit-field, .kit-card and .kit-badge. The kit then walks through every declaration and replaces literal values with shared custom properties:

  • Colors become tokens. With harmonizing on, the semantic tokens come first: --kit-brand, --kit-ink, --kit-surface and --kit-on-brand. Any other color gets a numbered token such as --kit-color-3, used by every component that needs it.
  • Corner radii map to --kit-radius-sm, -md and -lg.
  • Shadows become --kit-shadow-1, --kit-shadow-2 and so on.
  • The font stack becomes --kit-font.

Values inside url(…), such as inline SVG placeholders, are left untouched. The result is a small :root block of tokens followed by components that only reference them, so changing --kit-brand re-themes everything at once.

Worked examples

Example 1: a quick brand system

Leave the presets, set the brand color to your logo color and the radius to 8 px, and choose the serif font. The button, the field’s focus ring, the card’s call to action and the brand badge all switch to your color, with white or dark text chosen for contrast. Download the ZIP and open demo.html to see everything together.

Example 2: bringing in your own designs

Design a pill-shaped gradient button in the Button Designer and save it as a favourite. In the kit, choose My favourites for the button. With harmonizing off, it’s exported exactly as designed; with harmonizing on, its gradient adopts your brand color while keeping its style.

Example 3: a Tailwind project

Export Tailwind v4. Paste it into your main CSS file: the tokens go into @theme (so bg-kit-brand and rounded-kit-md work in your markup) and the components go into @layer components, so utilities can still override them.

Using the exported files

  • kit.css: tokens and components; link it or paste it into your stylesheet.
  • kit-tailwind.css: the same kit for Tailwind CSS v4.
  • tokens.json: W3C design-token format for design tools and Style Dictionary.
  • demo.html: a standalone page showing all components.

The markup for each component (button, labelled field with hint, card and badge) is in the demo page. Copy it from there into your templates.

Common mistakes

  • Mixing harmonized and hand-tuned colors. If you edit token values later, edit them in :root, not in the component rules.
  • Removing the field’s label or hint. They provide the accessible name and description.
  • Ignoring the contrast checks after changing the brand or surface color.
  • Renaming classes in only some places. Search and replace the prefix in both CSS and markup.

Frequently asked questions

How do I use my own designs from the studios?

Design a component in its studio and save it with the Favourites panel, or press Share to copy a link. In the kit, choose “My favourites” or “Share link” for that component. Favourites are read from this browser only; nothing is uploaded.

What does “Make it consistent” change?

It sets the brand color on the button, focus ring, card accent and brand badge; uses your text and surface colors; derives a radius scale (badges a step smaller, cards a step larger); and applies one font. Readable text colors and accessible field borders are calculated automatically.

Why are the class names prefixed with kit-?

So the components can't clash with classes that already exist on your site, such as .btn or .card. Rename the prefix with search and replace if you prefer your own naming.

Can I use the kit without Tailwind?

Yes. The CSS export is plain CSS with custom properties and works anywhere. The Tailwind export puts the same tokens into a v4 @theme block, so utilities like bg-kit-brand also become available.

Can I change the kit's colours after exporting?

Yes. Colours, radii and spacing are defined once as custom properties at the top of the exported CSS, so changing a value there updates every component that uses it.

Sources