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

#191a1a	17.44	1.20
#2c2c2d	13.95	1.51
#404141	10.24	2.05
#555657	7.36	2.85
#6a6c6d	5.28	3.98
#818384	3.81	5.51
#999a9c	2.82	7.46
#b1b3b4	2.10	9.98
#cbcccc	1.61	13.05
#e4e5e5	1.26	16.64

#151927	17.50	1.20
#202b4a	13.95	1.51
#293f6f	10.32	2.03
#315497	7.38	2.85
#3869c1	5.30	3.96
#3e80ec	3.82	5.50
#6d97fa	2.82	7.46
#98b0fc	2.11	9.95
#bdc9fd	1.62	12.94
#dfe4fe	1.26	16.67

#1e1629	17.47	1.20
#34244d	13.95	1.51
#4c3374	10.33	2.03
#65429e	7.43	2.83
#7f52ca	5.30	3.96
#986bdf	3.82	5.50
#af88e6	2.80	7.49
#c4a5ed	2.11	9.95
#d8c3f3	1.61	13.02
#ece1f9	1.26	16.70

#26122a	17.47	1.20
#46194f	13.89	1.51
#681d78	10.32	2.04
#8d1da4	7.38	2.84
#b319d1	5.28	3.98
#c64cde	3.83	5.49
#d475e6	2.81	7.49
#e199ed	2.10	9.98
#ecbbf3	1.62	12.97
#f6ddf9	1.26	16.63

#2e1108	17.50	1.20
#55170f	13.85	1.52
#7f1812	10.29	2.04
#ab1414	7.39	2.84
#be4031	5.29	3.97
#ce6250	3.83	5.49
#dc8270	2.81	7.47
#e8a192	2.11	9.94
#f2c0b5	1.62	12.98
#fadfda	1.26	16.63

#25170a	17.42	1.21
#422611	13.84	1.52
#613514	10.36	2.03
#834616	7.36	2.85
#a55717	5.28	3.98
#c96817	3.83	5.48
#eb7d21	2.80	7.49
#f79d5c	2.11	9.93
#ffbe92	1.61	13.03
#ffdfc9	1.26	16.65

#172a2e	14.92	1.41
#1c3d44	11.66	1.80
#20515a	8.80	2.39
#236672	6.53	3.21
#257c8a	4.85	4.33
#2592a3	3.67	5.72
#22a9bd	2.81	7.48
#1dc1d8	2.17	9.67
#3dd8f0	1.71	12.28
#9fe8f6	1.37	15.35

#262d16	14.29	1.47
#34411b	10.95	1.92
#445621	8.08	2.60
#536b26	6.00	3.50
#64822c	4.40	4.77
#749931	3.31	6.34
#86b136	2.51	8.36
#97c93b	1.96	10.73
#a9e240	1.54	13.64
#c3f95e	1.23	17.03

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!@#$%^&*()_+=

"SFMono-Regular", 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 Variables

root: {
--sans-serif: 'Geneva', sans-serif;
--serif: times, 'times new roman', serif;
--monospace: "SFMono-Regular", 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: #2e1108;
--red-100: #55170f;
--red-200: #7f1812;
--red-300: #ab1414;
--red-400: #be4031;
--red-500: #ce6250;
--red-600: #dc8270;
--red-700: #e8a192;
--red-800: #f2c0b5;
--red-900: #fadfda;
--gold-000: #25170a;
--gold-100: #422611;
--gold-200: #613514;
--gold-300: #834616;
--gold-400: #a55717;
--gold-500: #c96817;
--gold-600: #eb7d21;
--gold-700: #f79d5c;
--gold-800: #ffbe92;
--gold-900: #ffdfc9;
--green-000: #181b0e;
--green-100: #272f16;
--green-200: #37451c;
--green-300: #485c23;
--green-400: #5a7429;
--green-500: #6c8d2e;
--green-600: #7fa734;
--green-700: #92c139;
--green-800: #a5dd3f;
--green-900: #bbf849;
--teal-000: #111b1d;
--teal-100: #183034;
--teal-200: #1e464d;
--teal-300: #225d67;
--teal-400: #247683;
--teal-500: #258fa0;
--teal-600: #22a9bd;
--teal-700: #1cc4db;
--teal-800: #60dcf2;
--teal-900: #baeef8;
--blue-000: #151927;
--blue-100: #202b4a;
--blue-200: #293f6f;
--blue-300: #315497;
--blue-400: #3869c1;
--blue-500: #3e80ec;
--blue-600: #6d97fa;
--blue-700: #98b0fc;
--blue-800: #bdc9fd;
--blue-900: #dfe4fe;
--indigo-000: #1e1629;
--indigo-100: #34244d;
--indigo-200: #4c3374;
--indigo-300: #65429e;
--indigo-400: #7f52ca;
--indigo-500: #986bdf;
--indigo-600: #af88e6;
--indigo-700: #c4a5ed;
--indigo-800: #d8c3f3;
--indigo-900: #ece1f9;
--violet-000: #26122a;
--violet-100: #46194f;
--violet-200: #681d78;
--violet-300: #8d1da4;
--violet-400: #b319d1;
--violet-500: #c64cde;
--violet-600: #d475e6;
--violet-700: #e199ed;
--violet-800: #ecbbf3;
--violet-900: #f6ddf9;
--gray-000: #191a1a;
--gray-100: #2c2c2d;
--gray-200: #404141;
--gray-300: #555657;
--gray-400: #6a6c6d;
--gray-500: #818385;
--gray-600: #999a9c;
--gray-700: #b1b3b4;
--gray-800: #cbcbcc;
--gray-900: #e4e5e5;
}

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": "#2e1108",
"red-1": "#55170f",
"red-2": "#7f1812",
"red-3": "#ab1414",
"red-4": "#be4031",
"red-5": "#ce6250",
"red-6": "#dc8270",
"red-7": "#e8a192",
"red-8": "#f2c0b5",
"red-9": "#fadfda",
"gold-0": "#25170a",
"gold-1": "#422611",
"gold-2": "#613514",
"gold-3": "#834616",
"gold-4": "#a55717",
"gold-5": "#c96817",
"gold-6": "#eb7d21",
"gold-7": "#f79d5c",
"gold-8": "#ffbe92",
"gold-9": "#ffdfc9",
"green-0": "#181b0e",
"green-1": "#272f16",
"green-2": "#37451c",
"green-3": "#485c23",
"green-4": "#5a7429",
"green-5": "#6c8d2e",
"green-6": "#7fa734",
"green-7": "#92c139",
"green-8": "#a5dd3f",
"green-9": "#bbf849",
"teal-0": "#111b1d",
"teal-1": "#183034",
"teal-2": "#1e464d",
"teal-3": "#225d67",
"teal-4": "#247683",
"teal-5": "#258fa0",
"teal-6": "#22a9bd",
"teal-7": "#1cc4db",
"teal-8": "#60dcf2",
"teal-9": "#baeef8",
"blue-0": "#151927",
"blue-1": "#202b4a",
"blue-2": "#293f6f",
"blue-3": "#315497",
"blue-4": "#3869c1",
"blue-5": "#3e80ec",
"blue-6": "#6d97fa",
"blue-7": "#98b0fc",
"blue-8": "#bdc9fd",
"blue-9": "#dfe4fe",
"indigo-0": "#1e1629",
"indigo-1": "#34244d",
"indigo-2": "#4c3374",
"indigo-3": "#65429e",
"indigo-4": "#7f52ca",
"indigo-5": "#986bdf",
"indigo-6": "#af88e6",
"indigo-7": "#c4a5ed",
"indigo-8": "#d8c3f3",
"indigo-9": "#ece1f9",
"violet-0": "#26122a",
"violet-1": "#46194f",
"violet-2": "#681d78",
"violet-3": "#8d1da4",
"violet-4": "#b319d1",
"violet-5": "#c64cde",
"violet-6": "#d475e6",
"violet-7": "#e199ed",
"violet-8": "#ecbbf3",
"violet-9": "#f6ddf9",
"gray-0": "#191a1a",
"gray-1": "#2c2c2d",
"gray-2": "#404141",
"gray-3": "#555657",
"gray-4": "#6a6c6d",
"gray-5": "#818385",
"gray-6": "#999a9c",
"gray-7": "#b1b3b4",
"gray-8": "#cbcbcc",
"gray-9": "#e4e5e5"
},
"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

Card Title

Card Title

Card Title

Colors

Type scale

Font Family

'Geneva', sans-serif

times, 'times new roman', serif

"SFMono-Regular", monospace

Line heights

Solid

Title

Copy

Spacing

Shadows

Border Radius

Tachyons Custom Theme

Colors

Font Family

Type Scale

Line Height

Spacing

Border Radius

Box Shadow

.css-80vkzx{font-size:.75rem;}Css Variables

Generator Config

Css Variables