This is Cordial.

Rate this style:

A style inspired by the colors of cordials: pink grapefruit and raspberry.

Original color duo source: @randomColorContrasts

--cornflower-lilac: #FBB4B0;
--bordeaux:         #5E0921;

Color swatches

Cornflower Lilac variants

--primary1-m4: #614B49;
--primary1-m3: #7F605F;
--primary1-m2: #9E7674;
--primary1-m1: #BD8B88;
--primary1-m0: #DCA09C;
--primary1: var(--cornflower-lilac);
--primary1-p0: #FDBFBB;
--primary1-p1: #FECAC7;
--primary1-p2: #FFD6D4;
--primary1-p3: #FFE2E0;
--primary1-p4: #FFEFEE;

Bordeaux variants

--primary2-m1: #22070F;
--primary2-m0: #3F0918;
--primary2: var(--bordeaux);
--primary2-p0: #6F2137;
--primary2-p1: #80394D;
--primary2-p2: #915163;
--primary2-p3: #A16979;
--primary2-p4: #B1818F;
--primary2-p5: #C19AA5;
--primary2-p6: #D1B3BB;
--primary2-p7: #E1CCD2;

Tokens

Light theme

--background: var(--primary1-p4);
--foreground: var(--primary2-m0);
--link: var(--primary2);
--accent: var(--primary1-m4);
--line: var(--primary1-m2);
--highlight: var(--primary1);

Dark theme

--background: var(--primary2-p0);
--foreground: var(--primary1-p4);
--link: var(--primary1);
--accent: var(--primary2-p4);
--line: var(--primary2-p2);
--highlight: var(--primary2);

HTML elements

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Etiam porta sem malesuada magna mollis euismod.

<p>This is a very short paragraph in a code block.</p>

Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. — Sit Tristique

Egestas Nibh Fermentum: Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Dapibus Mollis: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

NASA's Spitzer space telescope captures the Helix Nebula in death, the star's dusty outer layers unraveling into space, glowing from the intense ultraviolet radiation.

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce Ligula Tristique
Sem Malesuada Parturient Elit
Risus Dolor

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Heading (h3) with anchor utility class

Heading (h4) with anchor

This is a table caption. This table is using a third-party web component called `<table-saw>` for small screens. Resize your browser or view on a mobile device to see it activated.
Table head 1	Table head 2	Table head 3	Table head 4
Table data 1, row 1	Table data 2, row 1	Table data 3, row 1	Table data 4, row 1
Table data 1, row 2	Table data 2, row 2	Table data 3, row 2	Table data 4, row 2
Table data 1, row 3	Table data 2, row 3	Table data 3, row 3	Table data 4, row 3
Table data 1, row 4	Table data 2, row 4	Table data 3, row 4	Table data 4, row 4

This is a checkbox input with label

Fieldset and Legend for Input Radios

Radio input with label, option 1
Radio input with label, option 2
Radio input with label, option 3

Range input with label:

Text input with label:

Select with label:

Textarea with label: