Comprehensive Styles with Modern CSS

Base styles and color palettes for any web project.

Overview

Install

If you are using a bundler, you can install the package from npm and import into your css,

npm i -D uico

@import "uico";

or link to a CDN in your html,

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/uico@version/style.css"
/>

or copy and paste the stylesheet into your project (everything is in one CSS file).

Layers

uico uses css layers applied in the following order.

• theme - css custom properties
• base - base styles and components
• utilities - utility classes
• components - empty

Theme

Below is the default theme. The base OKLCH palette will be calculated with relative color syntax based on the color, lightness, and chroma values you provide with custom properties. You can use any color function, you do not have to use hexadecimal. uico will automatically apply a light or dark color scheme based on your theme.

You can use or override any of uico’s custom properties in your CSS. View the theme layer to see a full list of custom properties uico sets. Most of sizing values are based on TailwindCSS and Radix UI values.

Check out the OKLCH color generator or the pre-made palettes for inspiration.

Base

Base styles are added to the elements in your application. There are also classes to apply these styles to other elements if needed. For example, when you need to style a link as a button, apply the button class to it.

button, .button

a, .link

Here’s a link to the project’s GitHub repository.

.badge

input, .input

Utilities

.prose

Base styles for many common elements, mainly font styles, are included without any extra configuration. Apply the prose class to add spacing and other styles to make it easier to read.

Here’s a sample of what different elements look like with the prose class applied.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores cupiditate facilis nemo pariatur quae delectus, earum dolore asperiores. Id ad excepturi iusto commodi at totam placeat quasi facere officia in.

• Facilisi sed nunc et mi nascetur efficitur.

  • Etiam id laoreet tempus

• Imperdiet conubia viverra dignissim pulvinar semper.

  Litora facilisi nam in posuere dictumst velit auctor tempus rutrum.

  • Orci lacinia aliquam hendrerit lectus magnis.
  • Cubilia malesuada mi imperdiet suscipit nisi efficitur risus.

• Platea fringilla tempor risus, tellus porta laoreet fringilla.

1. Quis hendrerit netus nullam dui sagittis ultricies est duis.
2. Parturient fringilla viverra proin cras convallis velit.
3. Aptent ultrices felis finibus ante venenatis placerat.

Lorem ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Efficitur magnis lorem morbi curae aenean vestibulum parturient non. Taciti at neque blandit aptent sollicitudin; dignissim senectus hendrerit. Cubilia malesuada mi imperdiet suscipit nisi efficitur risus. Orci lacinia aliquam hendrerit lectus magnis. Etiam id laoreet tempus cubilia pretium. Dis imperdiet lobortis diam aptent varius commodo mauris. Litora facilisi nam in posuere dictumst velit auctor tempus rutrum. Dapibus torquent eu phasellus parturient, rhoncus tempor in potenti.

Diam bibendum mus pellentesque cras curabitur facilisi;

Ullamcorper vivamus malesuada ut finibus parturient accumsan arcu lacinia consectetur. Faucibus interdum luctus conubia tempor pellentesque diam vivamus est. Pharetra vivamus taciti ex massa commodo pretium senectus? Porttitor elit et porttitor cursus enim aptent torquent sapien.

Morbi ligula volutpat erat mollis blandit proin purus.

Orci lacinia aliquam hendrerit lectus magnis.

Ullamcorper vivamus malesuada ut finibus parturient accumsan arcu lacinia consectetur. Faucibus interdum luctus conubia tempor pellentesque diam vivamus est. Pharetra vivamus taciti ex massa commodo pretium senectus? Porttitor elit et porttitor cursus enim aptent torquent sapien. Dictum varius finibus, parturient dolor eros etiam fringilla. Laoreet nunc eros venenatis, eget nec ligula donec. Morbi ligula volutpat erat mollis blandit proin purus.

Diam bibendum mus pellentesque cras curabitur facilisi; urna facilisis? Interdum venenatis finibus cubilia nisl pretium. Per nascetur scelerisque lacus rhoncus varius inceptos nullam!

/* this sample uses the base colors to highlight codeblocks with shiki */
:root {
	--shiki-foreground: var(--base-100);
	--shiki-background: var(--base-900);
	--shiki-token-constant: var(--base-50);
	--shiki-token-string: var(--base-300);
	--shiki-token-comment: var(--base-400);
	--shiki-token-keyword: var(--base-400);
	--shiki-token-parameter: var(--base-300);
	--shiki-token-function: var(--base-300);
	--shiki-token-string-expression: var(--base-200);
	--shiki-token-punctuation: var(--base-500);
	--shiki-token-link: var(--base-300);
}