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

#191a1b	17.43	1.20
#2b2c30	13.95	1.51
#3e4047	10.35	2.03
#52565e	7.36	2.85
#676c77	5.27	3.99
#7e838d	3.81	5.52
#979aa3	2.81	7.47
#b0b2b9	2.12	9.91
#cacbd0	1.62	12.96
#e4e5e7	1.26	16.66

#151a21	17.48	1.20
#212d3c	13.95	1.51
#2d425a	10.30	2.04
#395879	7.38	2.85
#456f9a	5.26	3.99
#5186bc	3.83	5.49
#629edc	2.82	7.44
#8fb6e5	2.10	9.99
#b6cdee	1.62	12.96
#dbe6f7	1.26	16.67

#25132b	17.40	1.21
#431b51	13.87	1.51
#64217b	10.27	2.05
#8625a7	7.40	2.84
#aa28d6	5.27	3.98
#c83ff7	3.81	5.51
#d76efa	2.80	7.50
#e494fc	2.11	9.94
#efb9fd	1.61	13.03
#f8dcfe	1.26	16.66

#281224	17.47	1.20
#4a1944	13.87	1.51
#6e1e65	10.31	2.04
#952089	7.38	2.85
#bd1eaf	5.29	3.97
#e815d6	3.81	5.51
#f35ee1	2.80	7.50
#f98ce9	2.11	9.96
#feb4f0	1.62	13.00
#ffdaf8	1.26	16.64

#2c1212	17.47	1.20
#51191d	13.94	1.51
#7a1e28	10.27	2.04
#a42033	7.41	2.83
#c92f43	5.29	3.97
#d7595f	3.83	5.48
#e47c7d	2.81	7.48
#ee9d9c	2.11	9.94
#f6bebc	1.61	13.01
#fcdedd	1.26	16.63

#21180b	17.50	1.20
#3a2911	13.95	1.51
#563c14	10.23	2.05
#724f16	7.38	2.85
#906318	5.27	3.98
#af7818	3.80	5.52
#cf8d16	2.81	7.47
#e9a63d	2.10	9.99
#f6c37f	1.61	13.03
#fee0be	1.26	16.62

#162d2a	14.55	1.44
#1b403c	11.38	1.85
#1f5550	8.49	2.47
#226a64	6.34	3.31
#248078	4.74	4.43
#24978e	3.56	5.89
#22afa4	2.71	7.74
#1ec7ba	2.11	9.93
#16e0d1	1.66	12.62
#84f1e6	1.34	15.71

#1d2c15	14.75	1.42
#27411b	11.30	1.86
#325722	8.33	2.52
#3c6d27	6.16	3.41
#47852d	4.51	4.66
#529d33	3.37	6.23
#5db639	2.56	8.22
#68cf3e	1.98	10.58
#91e46c	1.55	13.52
#ccf2b6	1.24	16.94

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

-apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif

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

georgia, 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

Headline9rem

Subheadline7rem

Font Size 15rem

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: -apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
--serif: georgia, serif;
--monospace: "SFMono-Regular", monospace;

--font-size-headline: 9rem;
--font-size-subheadline: 7rem;
--font-size-1: 5rem;
--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: #2c1212;
--red-100: #51191d;
--red-200: #7a1e28;
--red-300: #a42033;
--red-400: #c92f43;
--red-500: #d7595f;
--red-600: #e47c7d;
--red-700: #ee9d9c;
--red-800: #f6bebc;
--red-900: #fcdedd;
--gold-000: #21180b;
--gold-100: #3a2911;
--gold-200: #563c14;
--gold-300: #724f16;
--gold-400: #906318;
--gold-500: #af7818;
--gold-600: #cf8d16;
--gold-700: #e9a63d;
--gold-800: #f6c37f;
--gold-900: #fee0be;
--green-000: #141c0f;
--green-100: #1f3117;
--green-200: #2b481d;
--green-300: #366024;
--green-400: #41792a;
--green-500: #4d9231;
--green-600: #59ad37;
--green-700: #65c93d;
--green-800: #86e15f;
--green-900: #c7f1b0;
--teal-000: #111c1a;
--teal-100: #18312e;
--teal-200: #1d4743;
--teal-300: #215f59;
--teal-400: #237870;
--teal-500: #249188;
--teal-600: #23aca1;
--teal-700: #1ec7ba;
--teal-800: #14e3d5;
--teal-900: #9ff4ea;
--blue-000: #151a21;
--blue-100: #212d3c;
--blue-200: #2d425a;
--blue-300: #395879;
--blue-400: #456f9a;
--blue-500: #5186bc;
--blue-600: #629edc;
--blue-700: #8fb6e5;
--blue-800: #b6cdee;
--blue-900: #dbe6f7;
--indigo-000: #25132b;
--indigo-100: #431b51;
--indigo-200: #64217b;
--indigo-300: #8625a7;
--indigo-400: #aa28d6;
--indigo-500: #c83ff7;
--indigo-600: #d76efa;
--indigo-700: #e494fc;
--indigo-800: #efb9fd;
--indigo-900: #f8dcfe;
--violet-000: #281224;
--violet-100: #4a1944;
--violet-200: #6e1e65;
--violet-300: #952089;
--violet-400: #bd1eaf;
--violet-500: #e815d6;
--violet-600: #f35ee1;
--violet-700: #f98ce9;
--violet-800: #feb4f0;
--violet-900: #ffdaf8;
--gray-000: #191a1b;
--gray-100: #2b2c30;
--gray-200: #3e4047;
--gray-300: #52565e;
--gray-400: #676c77;
--gray-500: #7e838d;
--gray-600: #979aa3;
--gray-700: #b0b2b9;
--gray-800: #cacbd0;
--gray-900: #e4e5e7;
}

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

Generator Config

{
"typeScale": [ 9, 7, 5, 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": "#2c1212",
"red-1": "#51191d",
"red-2": "#7a1e28",
"red-3": "#a42033",
"red-4": "#c92f43",
"red-5": "#d7595f",
"red-6": "#e47c7d",
"red-7": "#ee9d9c",
"red-8": "#f6bebc",
"red-9": "#fcdedd",
"gold-0": "#21180b",
"gold-1": "#3a2911",
"gold-2": "#563c14",
"gold-3": "#724f16",
"gold-4": "#906318",
"gold-5": "#af7818",
"gold-6": "#cf8d16",
"gold-7": "#e9a63d",
"gold-8": "#f6c37f",
"gold-9": "#fee0be",
"green-0": "#141c0f",
"green-1": "#1f3117",
"green-2": "#2b481d",
"green-3": "#366024",
"green-4": "#41792a",
"green-5": "#4d9231",
"green-6": "#59ad37",
"green-7": "#65c93d",
"green-8": "#86e15f",
"green-9": "#c7f1b0",
"teal-0": "#111c1a",
"teal-1": "#18312e",
"teal-2": "#1d4743",
"teal-3": "#215f59",
"teal-4": "#237870",
"teal-5": "#249188",
"teal-6": "#23aca1",
"teal-7": "#1ec7ba",
"teal-8": "#14e3d5",
"teal-9": "#9ff4ea",
"blue-0": "#151a21",
"blue-1": "#212d3c",
"blue-2": "#2d425a",
"blue-3": "#395879",
"blue-4": "#456f9a",
"blue-5": "#5186bc",
"blue-6": "#629edc",
"blue-7": "#8fb6e5",
"blue-8": "#b6cdee",
"blue-9": "#dbe6f7",
"indigo-0": "#25132b",
"indigo-1": "#431b51",
"indigo-2": "#64217b",
"indigo-3": "#8625a7",
"indigo-4": "#aa28d6",
"indigo-5": "#c83ff7",
"indigo-6": "#d76efa",
"indigo-7": "#e494fc",
"indigo-8": "#efb9fd",
"indigo-9": "#f8dcfe",
"violet-0": "#281224",
"violet-1": "#4a1944",
"violet-2": "#6e1e65",
"violet-3": "#952089",
"violet-4": "#bd1eaf",
"violet-5": "#e815d6",
"violet-6": "#f35ee1",
"violet-7": "#f98ce9",
"violet-8": "#feb4f0",
"violet-9": "#ffdaf8",
"gray-0": "#191a1b",
"gray-1": "#2b2c30",
"gray-2": "#3e4047",
"gray-3": "#52565e",
"gray-4": "#676c77",
"gray-5": "#7e838d",
"gray-6": "#979aa3",
"gray-7": "#b0b2b9",
"gray-8": "#cacbd0",
"gray-9": "#e4e5e7"
},
"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