The Last CSS Framework You'll Ever Need?

Classless CSS

If you use HTML semantically, then you can just write your code and leave the theming to RakuCSS. article elements display with elegant slightly rounded borders. If you want basic styling just use "p" tags with strong for bold, em for italics, etc.

In the RakuCSS design system, some classes are available for use, but they are optional, and semantic.

Themes for every occasion

RakuCSS has a carefully designed set of themes. We hope one of them fits your needs, but if none suit your fancy, you can make your own by overriding our set of css variable on which the framework is built and everything will match.

The following is a list of the built in themes in no particular order

• Light is easy on the eyes yet cheerfull
• Dark fits in nicely with other dark mode apps maintaining well balanced contrast
• Parchment shows how a warm design and a serif font need not necessarily be banashed to the realm of websites past
• Sakura's graceful charm with make your users fall in love.
• Neon for those with their eye on the future we always dreamed of.
• Hacker mode harks back to a time before css.

Here is a recipe for castella that IS in a particular order.

1. Gather the ingredients
   1. All purpose flour (100g)
   2. Sugar (100g)
   3. Eggs 4
   4. Mirin (2 Tablespoons / 30mL)
   5. Honey (2 Tablespoons / 30mL)
   6. Oil (2 Tablespoons / 30mL)
2. Line an 18cm×18cm pan with parchment paper
3. Sift the flour (100g) into a separate bowl for later
4. Beat eggs (4) and sugar (100g) in a bowl partially submerged in an additional bowl of 40°C water until ribbons
5. Preheat oven to 180°C
6. Add additional wet ingredients and mix at low speed
   1. Mirin (2 Tablespoons / 30mL)
   2. Honey (2 Tablespoons / 30mL)
   3. Oil (2 Tablespoons / 30mL)
7. Fold in the flour
8. Pour into lined baking pan
9. Drop the pan from ~10cm onto a hard countertop several times to release bubbles
10. Bake 180°C for 10min then 140°C for 40min

Form elements

RakuCSS strives to maintain beautiful design without sacrificing information density. Inputs nested inside labels are displayed to the right of the label. Otherwise, inputs display below their labels.

Code

Below is some code, you can copy it with Ctrl-C. Did you know, alert(1) can show an alert in JavaScript!

// This logs a message to the console
console.log('Hello, world!')

Do you know about the "samp" tag? It can be used to denote the output of a computer program. This is sample output from a computer program.

Other Fun elements

Images have subtle rounded corners and have an effective max width of 100% of the page.

And here's a nicely marked up table!

This table also has a footer and a caption:

You can use a small tag for fine print. Prices as of May 2026. The density of honey is 1.4 g/mL. The density of oil is 0.92 g/mL

Typography

This is a blockquote. My castela recipe consists of only flour, sugar, eggs, mirin, honey, and oil. Castella is a popular confectionary in Japan tracing back to the influence of Portuguese traders in the age of exloration.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.

HTML description list element:

The HTML you are reading now is a definition list. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Glottal stop:

A type of consonantal sound, produced by obstructing airflow in the glottis

Momme:

Part of a system of Japanese units where during the Edo period it was equal to 1⁄10 ryō, but has since been reformed to equal exactly 3.75 grams

Heading 1 Concerning Headings:

When designing a set of headings, there's a lot to think about.

Heading 2 A design problem

Designing a set of six heading styles that are distinguishable and distinct while maintaining information density is a challenge.

Heading 3 Why

One must balance the design goals of making headings suficiently large and offset from normal text while not taking up so much space that it impacts usability.

Heading 4 The world

Too many modern websites make their headings large an beautiful with typography that takes your breath away yet takes up so much space that you have to scroll around to get to the part you really care about as a user.

Heading 5 Us

RakuCSS dares to be different by being radically reasonable.

Heading 6 Appreciation

Thank you for coming to my "ted talk" about headings

Another Article

Here are some mark elements for your viewing pleasure. They display as appealing badges. While classes are usually not necessary in RakuCSS, here classes can be used to indicate an class=animated or class=success state.

mark1 class=primary class=warning animated mark successful

To display inputs that combine gracefully with associated buttons, place them in a div or fieldset with role=group

It also works for dropdown select elements

Login

Here is an example of how you might create a compact login form. Note, the three buttons at the bottom are placed into a div so that they display arranged horizontally. The forgot password button has class=secondary and the cancel button has class=delete.

An example of loading state indicated by aria-busy=true

Here is some data

• Item 1
• Item 2
• Roadmap
  • Styled Dropdown Support
  • Loading Spinners
  • Modal
  • Tooltips
  • Radio Buttons
  • role="switch" Checkboxes
  • multiselect styling
  • aria-invalid
  • indeterminate checkboxes
  • Figure elements
  • mark for highlighting
  • Figures