Drop-in semantic styling library in pure CSS.

Utilize the form below to obtain a custom build of matcha.css.

For more intricate customization, consider forking and directly patching it. Note that matcha.css never utilizes !important rules, ensuring ease of style overriding if necessary.

Customize CSS variables
Colors and backgrounds
Colors Backgrounds Example usage
Name Light Dark Name Light Dark
--default --bg-default default text color and background color
--contrast --bg-contrast used to constrast with --default
--subtle --bg-subtle <progress> and <meter> backgrounds, etc.
--muted --bg-muted .disabled, <caption>, <blockquote>, etc.
--accent --bg-accent :hover, .selected, <a>, <button>, etc.
--active --bg-active :active, :focus, etc.
--variant --bg-variant
--success --bg-success :user-valid, <ins>, <meter>'s optimum value, etc.
--attention --bg-attention <meter>'s sub-optimum value, etc.
--severe --bg-severe
--danger --bg-danger :user-invalid, <del>, <meter>'s sub-sub-optimum value, <button type="reset">, etc.
Font related variables

These variables are only revelant when using a layout from @layouts extra feature.

Name Light Dark Example usage
Color Alpha Color Alpha
--backdrop dialog::backdrop, --shadow, etc.
--bd-muted <td>, <th>, <article>, <blockquote>, <fieldset>, <input>, <select>, <textarea>, etc.

Preview your custom build to ensure it fits your taste.

  • Brew matcha!

    Ready to brew your custom matcha? Click the button below to get started!