Add the stylesheet to the <head> of any page. Everything else is just the HTML you already know how to write.

<link rel="stylesheet" href="yearn.css">

Or straight from a CDN, no download needed:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/immannino/yearn.css@0.1.0/dist/yearn.min.css">

Want a different palette? Load a theme after it. A theme is just a handful of CSS variables, so you can write your own from themes/_template.css.

<link rel="stylesheet" href="yearn.css">
<link rel="stylesheet" href="themes/dusk.css">

Fine-tune the mood with attributes on <html> — or try the panel in the corner. Press ⌘ K to imagine a command bar.

<html data-theme="dark" data-gradient="creamsicle" data-accent="pink">

The reading column sits at a comfortable 44rem. Body copy is set in Inter at 17px with generous leading, while emphasis, inline links, highlighted passages, CSS abbreviations, inline code, deleted and inserted text, H₂O and E = mc² all have a considered look.

Heading one

Heading two, the section title

Heading three for cards and sub-sections

Heading four, a sans-serif subhead

Heading five — eyebrow label

Heading six — muted label

We want the internet to feel less like a place you go to get things done, and more like a place you live.

Lists

• Unordered lists have soft, muted markers
• They nest nicely
  • Second level item
  • Another one
• And keep their rhythm

1. Ordered lists use mono numerals
2. That line up neatly
3. Like a little spec sheet

Definition term

The description sits in a quieter tone beneath it.

Another term

Handy for glossaries, metadata and FAQs.

Code

<section>
  <h2>Pricing</h2>
  <article><h3>Free</h3><p>For tinkering.</p></article>
  <article><h3>Pro</h3><p>For shipping.</p></article>
</section>

Tables

Open a dialog