To set a theme, add a data-theme attribute to your <html> element.
Available values: light, dark, parchment,
chalkboard, sakura, neon, hacker, forest, and auto
(follows the system's light/dark preference).
<html data-theme="sakura">
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 banished
to the realm of websites past
Chalkboard takes Parchment's warmth into the dark, like an old blackboard dusted with chalk.
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.
Dark Forest brings a quiet, plain-sans calm — deep mossy greens for late nights spent among the trees.
CSS Variables Reference
Every color, border, and font in RakuCSS comes from a small set of CSS custom properties.
Override any of them — on :root, or scoped to a single element — to adjust the
framework to your taste. The swatches below reflect whichever theme is currently selected.
Backgrounds & text
Variable
Swatch
Purpose
--bg-surface
Page background
--bg-primary
Card, table, and form-message backgrounds
--bg-secondary
Hover states and nested panels
--color-text
Default body text color
--color-text-button
Button text and checkbox fill color
--medium-gray
De-emphasized text, e.g. small
Borders
Variable
Swatch
Purpose
--border-primary
Default border color for cards, hr, code, and inputs
--border-secondary
Subtle borders, hover outlines, placeholder text
--border-strong
High-contrast border, reserved for your own emphasis
Primary accent
Variable
Swatch
Purpose
--primary
Links and the main accent color
--primary-light
Hover accent
--primary-border
Focused or checked border color
--primary-bg
Checked or hover background fill
--primary-bg-active
Active/pressed background fill
Semantic states
Used by a bare <mark> (error is the default), <mark class="success">,
<mark class="warning">, and button.delete.
Variable
Swatch
Purpose
--error-bg
Error background
--error-bg-active
Reserved for your own active-state error styling
--error-border
Error border
--error-text
Error text
--success-bg
Success background
--success-bg-active
Reserved for your own active-state success styling
--success-border
Success border
--success-text
Success text
--warning-bg
Warning background
--warning-bg-active
Reserved for your own active-state warning styling
--warning-border
Warning border
--warning-text
Warning text
Decorative accents
Four accent colors plus a matching foreground — not used by RakuCSS itself, but defined by every
theme for your own charts, tags, or avatars.
Variable
Swatch
--spectral-bg-1
--spectral-bg-2
--spectral-bg-3
--spectral-bg-4
--spectral-fg
Typography & layout
Variable
Sample
Purpose
--font-theme
Aa
Base font family for body text and form controls
--mono-font
Aa
Font family for pre and code
--max-width
—
Maximum content width of the page layout
Effects
Variable
Swatch
Purpose
--color-shadow-inset
Card drop-shadow and hover-highlight tint
--bevel-light
Light inset edge on buttons and checked controls
--bevel-dark
Dark inset edge on buttons and checked controls
Demonstration of Look And Feel:
The following is dummy content with no particular meaning intended to show
what RakuCSS looks like when applied to an actual page.
Here is a recipe for castella
Gather the ingredients
All purpose flour (100g)
Sugar (100g)
Eggs 4
Mirin (2 Tablespoons / 30mL)
Honey (2 Tablespoons / 30mL)
Oil (2 Tablespoons / 30mL)
Line an 18cm×18cm pan with parchment paper
Sift the flour (100g) into a separate bowl for later
Beat eggs (4) and sugar (100g) in a bowl partially submerged in an additional bowl of 40°C water
until ribbons
Preheat oven to 180°C
Add additional wet ingredients and mix at low speed
Mirin (2 Tablespoons / 30mL)
Honey (2 Tablespoons / 30mL)
Oil (2 Tablespoons / 30mL)
Fold in the flour
Pour into lined baking pan
Drop the pan from ~10cm onto a hard countertop several times to release bubbles
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.
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.
This is a summary
This is the details element. It can be used to display additional information when a user clicks on a summary element.
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
Everything below this line is placeholder and whimsy — stream-of-consciousness prose, castella recipes, and lorem ipsum used to demonstrate how RakuCSS handles ordinary text and varied HTML in the wild. It is not documentation.
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
Example of a Card
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
Finally, when everything is said and done you can use a "footer" element with another "nav" element at the
end of the page.
