Components AI — A new way to explore generative design systems

An example of an alert component

Badge

Card Title

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Card Title

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Colors

#121b1f	17.47	1.20
#252e32	13.86	1.52
#394246	10.29	2.04
#4e575c	7.39	2.84
#636d72	5.30	3.96
#7a8489	3.83	5.49
#939ba0	2.82	7.44
#adb3b7	2.12	9.91
#c8ccce	1.62	12.98
#e3e5e6	1.26	16.62

#00193c	17.44	1.20
#002d55	13.94	1.51
#00436e	10.35	2.03
#005b87	7.38	2.85
#0073a1	5.29	3.97
#008cbc	3.83	5.48
#27a5d6	2.82	7.44
#5dbdeb	2.11	9.94
#9dd3f2	1.61	13.03
#d0e9f9	1.26	16.71

#000000	21.00	1.00
#19009b	13.86	1.51
#4c00bd	10.28	2.04
#6926d5	7.40	2.84
#8549dc	5.27	3.98
#9d68e2	3.81	5.51
#b385e9	2.82	7.45
#c7a3ef	2.12	9.91
#dbc1f5	1.62	12.96
#ede0fa	1.26	16.64

#3b001c	17.46	1.20
#5c0037	13.91	1.51
#7f0055	10.33	2.03
#9b216d	7.42	2.83
#b53d84	5.30	3.97
#d0569c	3.82	5.49
#e574b2	2.81	7.47
#ee98c5	2.11	9.93
#f5bbd8	1.62	12.98
#fbddeb	1.26	16.64

#000000	21.00	1.00
#610000	13.92	1.51
#870014	10.29	2.04
#a61f29	7.37	2.85
#bb4241	5.29	3.97
#cb635e	3.83	5.49
#d9837c	2.80	7.49
#e5a19b	2.12	9.90
#f0c0bb	1.62	12.96
#f8e0dd	1.26	16.70

#3e0000	17.43	1.20
#541800	13.93	1.51
#6c2f00	10.27	2.04
#854500	7.37	2.85
#a05b00	5.26	3.99
#bc7100	3.82	5.50
#d88804	2.82	7.44
#e9a550	2.11	9.96
#f6c28a	1.62	13.00
#fde0c4	1.26	16.64

#003827	13.17	1.59
#004b38	10.18	2.06
#005e49	7.79	2.70
#00735c	5.82	3.61
#008770	4.47	4.70
#009d84	3.41	6.16
#00b399	2.66	7.91
#0ec9ae	2.10	9.98
#58ddc3	1.67	12.55
#a3ebda	1.36	15.45

#003a00	13.08	1.61
#004e00	10.05	2.09
#006400	7.44	2.82
#007a00	5.55	3.78
#009100	4.16	5.05
#29a700	3.17	6.62
#47be20	2.43	8.65
#77d155	1.90	11.04
#a9e18f	1.52	13.85
#d5f0c6	1.23	17.11

Type scale

Headline

Subheadline

Font Size 1

Font Size 2

Font Size 3

Font Size 4

Font Size 5

Font Size 6

Font Size 7

Font Family

'Geneva', sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=

times, 'times new roman', serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=

"Menlo", monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=

Line heights

Solid

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Copy

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Spacing

Shadows

Border Radius

Tachyons Custom Theme

Colors

Canvas

Gray

Blue

Indigo

Violet

Red

gold

green

teal

Scale Mode

Font Family

Sans Serif

Serif

Monospace

Type Scale

Headline12rem

Subheadline8rem

Font Size 16rem

Font Size 24rem

Font Size 33rem

Font Size 42rem

Font Size 51.5rem

Font Size 61rem

Font Size 70.75rem

Line Height

Solid1

Title1.25

Copy1.5

Spacing

10.25rem

20.5rem

31rem

42rem

54rem

68rem

716rem

Border Radius

1rem

2rem

3rem

4rem

Box Shadow

Css Variabels

root: {
--sans-serif: 'Geneva', sans-serif;
--serif: times, 'times new roman', serif;
--monospace: "Menlo", monospace;

--font-size-headline: 12rem;
--font-size-subheadline: 8rem;
--font-size-1: 6rem;
--font-size-2: 4rem;
--font-size-3: 3rem;
--font-size-4: 2rem;
--font-size-5: 1.5rem;
--font-size-6: 1rem;
--font-size-7: 0.75rem;

--measure: 30em;
--measure-narrow: 20em;
--measure-wide: 34em;

--letter-spacing-tight:-.05em;
--letter-spacing-1:.1em;
--letter-spacing-2:.25em;

--line-height-solid: 1;
--line-height-title: 1.25;
--line-height-copy: 1.5;

--spacing-extra-small: 0.25rem;
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;

--border-radius-1: 0.125rem;
--border-radius-2: 0.25rem;
--border-radius-3: 0.5rem;
--border-radius-4: 1rem;
--border-radius-circle: 100%;
--border-radius-pill: 9999px;

--box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
--box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );
--box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );

--height-1: 1rem;
--height-2: 2rem;
--height-3: 4rem;
--height-4: 8rem;
--height-5: 16rem;
--width-1: 1rem;
--width-2: 2rem;
--width-3: 4rem;
--width-4: 8rem;
--width-5: 16rem;

--max-width-1: 1rem;
--max-width-2: 2rem;
--max-width-3: 4rem;
--max-width-4: 8rem;
--max-width-5: 16rem;
--max-width-6: 32rem;
--max-width-7: 48rem;
--max-width-8: 64rem;
--max-width-9: 96rem;

--red-000: #000000;
--red-100: #610000;
--red-200: #870014;
--red-300: #a61f29;
--red-400: #bb4241;
--red-500: #cb635e;
--red-600: #d9837c;
--red-700: #e5a19b;
--red-800: #f0c0bb;
--red-900: #f8e0dd;
--gold-000: #3e0000;
--gold-100: #541800;
--gold-200: #6c2f00;
--gold-300: #854500;
--gold-400: #a05b00;
--gold-500: #bc7100;
--gold-600: #d88804;
--gold-700: #e9a550;
--gold-800: #f6c28a;
--gold-900: #fde0c4;
--green-000: #002000;
--green-100: #003500;
--green-200: #004c00;
--green-300: #006400;
--green-400: #007e00;
--green-500: #059800;
--green-600: #37b10b;
--green-700: #5fca3a;
--green-800: #9cdc7f;
--green-900: #cfeebf;
--teal-000: #001f02;
--teal-100: #003423;
--teal-200: #004a37;
--teal-300: #00624d;
--teal-400: #007a63;
--teal-500: #00947b;
--teal-600: #00ae94;
--teal-700: #0cc9ad;
--teal-800: #67dfc7;
--teal-900: #baf0e3;
--blue-000: #00193c;
--blue-100: #002d55;
--blue-200: #00436e;
--blue-300: #005b87;
--blue-400: #0073a1;
--blue-500: #008cbc;
--blue-600: #27a5d6;
--blue-700: #5dbdeb;
--blue-800: #9dd3f2;
--blue-900: #d0e9f9;
--indigo-000: #000000;
--indigo-100: #19009b;
--indigo-200: #4c00bd;
--indigo-300: #6926d5;
--indigo-400: #8549dc;
--indigo-500: #9d68e2;
--indigo-600: #b385e9;
--indigo-700: #c7a3ef;
--indigo-800: #dbc1f5;
--indigo-900: #ede0fa;
--violet-000: #3b001c;
--violet-100: #5c0037;
--violet-200: #7f0055;
--violet-300: #9b216d;
--violet-400: #b53d84;
--violet-500: #d0569c;
--violet-600: #e574b2;
--violet-700: #ee98c5;
--violet-800: #f5bbd8;
--violet-900: #fbddeb;
--gray-000: #131b1f;
--gray-100: #252e32;
--gray-200: #394246;
--gray-300: #4e575c;
--gray-400: #636d72;
--gray-500: #7a8489;
--gray-600: #939ba0;
--gray-700: #adb3b7;
--gray-800: #c8ccce;
--gray-900: #e3e5e6;
}

For use with Tachyons Custom. Copy and paste the above vars into src/_variables.css.

Generator Config

{
"typeScale": [ 12, 8, 6, 4, 3, 2, 1.5, 1, 0.75 ],
"spacing": [ 0.25, 0.5, 1, 2, 4, 8, 16 ],
"lineHeight": [ 1, 1.25, 1.5 ],
"colors": {
"red-0": "#000000",
"red-1": "#610000",
"red-2": "#870014",
"red-3": "#a61f29",
"red-4": "#bb4241",
"red-5": "#cb635e",
"red-6": "#d9837c",
"red-7": "#e5a19b",
"red-8": "#f0c0bb",
"red-9": "#f8e0dd",
"gold-0": "#3e0000",
"gold-1": "#541800",
"gold-2": "#6c2f00",
"gold-3": "#854500",
"gold-4": "#a05b00",
"gold-5": "#bc7100",
"gold-6": "#d88804",
"gold-7": "#e9a550",
"gold-8": "#f6c28a",
"gold-9": "#fde0c4",
"green-0": "#002000",
"green-1": "#003500",
"green-2": "#004c00",
"green-3": "#006400",
"green-4": "#007e00",
"green-5": "#059800",
"green-6": "#37b10b",
"green-7": "#5fca3a",
"green-8": "#9cdc7f",
"green-9": "#cfeebf",
"teal-0": "#001f02",
"teal-1": "#003423",
"teal-2": "#004a37",
"teal-3": "#00624d",
"teal-4": "#007a63",
"teal-5": "#00947b",
"teal-6": "#00ae94",
"teal-7": "#0cc9ad",
"teal-8": "#67dfc7",
"teal-9": "#baf0e3",
"blue-0": "#00193c",
"blue-1": "#002d55",
"blue-2": "#00436e",
"blue-3": "#005b87",
"blue-4": "#0073a1",
"blue-5": "#008cbc",
"blue-6": "#27a5d6",
"blue-7": "#5dbdeb",
"blue-8": "#9dd3f2",
"blue-9": "#d0e9f9",
"indigo-0": "#000000",
"indigo-1": "#19009b",
"indigo-2": "#4c00bd",
"indigo-3": "#6926d5",
"indigo-4": "#8549dc",
"indigo-5": "#9d68e2",
"indigo-6": "#b385e9",
"indigo-7": "#c7a3ef",
"indigo-8": "#dbc1f5",
"indigo-9": "#ede0fa",
"violet-0": "#3b001c",
"violet-1": "#5c0037",
"violet-2": "#7f0055",
"violet-3": "#9b216d",
"violet-4": "#b53d84",
"violet-5": "#d0569c",
"violet-6": "#e574b2",
"violet-7": "#ee98c5",
"violet-8": "#f5bbd8",
"violet-9": "#fbddeb",
"gray-0": "#131b1f",
"gray-1": "#252e32",
"gray-2": "#394246",
"gray-3": "#4e575c",
"gray-4": "#636d72",
"gray-5": "#7a8489",
"gray-6": "#939ba0",
"gray-7": "#adb3b7",
"gray-8": "#c8ccce",
"gray-9": "#e3e5e6"
},
"typography": { "measure": [30,34,20] },
"tables": { "striped": ["blue-9", "gray-9", "gray-8" ], "stripe": ["light", "dark"] },
"borderWidths": [ 0, 0.125, 0.25, 0.5, 1, 2],
"borderRadius": [ 0, 0.125, 0.25, 0.5, 1 ],
"widths": [1, 2, 4, 8, 16],
"heights": [1, 2, 4, 8, 16],
"maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
"opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

For use with the Tachyons Generator. Save the above as config.json and run the command below.

curl -X POST -H "Content-Type: application/json" -d @config.json https://tachyons.pub/api