Ruul

Ruul — design reference

Source: https://ruul.io/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

• font-family: Hedvig Letters Sans,system-ui,-apple-system,sans-serif — selector body
• font-family: "Hedvig Letters Serif",Georgia,serif — selector h1,h2,h3,h4,h5,h6
• font-size: 100% — selector button,input,optgroup,select,textarea
• font-size: 16px — selector body
• font-size: 1.5rem — selector .text-2xl
• font-size: 1.875rem — selector .text-3xl
• font-size: 2.25rem — selector .text-4xl
• font-size: 3rem — selector .text-5xl
• font-weight: 400 — selector body
• font-weight: 500 — selector .prose-headings:font-medium :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] _)))
• line-height: 1.5 — selector body
• line-height: 2rem — selector .text-2xl
• line-height: 2.25rem — selector .text-3xl
• line-height: 2.5rem — selector .text-4xl
• line-height: 1 — selector .text-5xl
• line-height: 1.5rem — selector .text-base
• line-height: 1.75rem — selector .text-lg
• letter-spacing: -.01em — selector .prose-headings:tracking-[-0.01em] :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] _)))

Colors and surfaces

• color: #1a2018 — selector .cascading-slider**button
• color: rgb(var(--color-ruul-ink)) — selector body
• color: #000000a3 — selector .text-[#000000a3]
• color: rgb(26 32 24 / var(--tw-text-opacity, 1)) — selector .text-[#1A2018]
• color: #1a2018b3 — selector .text-[#1A2018]/70
• color: #1a2018a3 — selector .text-[#1a2018a3]
• color: rgb(136 136 136 / var(--tw-text-opacity, 1)) — selector .text-[#888]
• background-color: #d3f969 — selector .cascading-slider**button
• background-color: transparent — selector button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])
• background-color: rgb(var(--color-ruul-canvas)) — selector body
• background-color: rgb(var(--color-ruul-forest-card))!important — selector .!bg-ruul-forest-card
• background-color: rgb(var(--color-ruul-forest-card)) — selector .bg-ruul-forest-card
• background-color: rgb(var(--color-ruul-forest-card) / .4) — selector .bg-ruul-forest-card/40
• background-color: rgb(var(--color-ruul-forest-card) / .5) — selector .bg-ruul-forest-card/50

Components and layout

• border-radius: .25em — selector .cascading-slider**button
• box-shadow: none — selector :-moz-ui-invalid
• box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows) — selector .prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] \*))
• box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) — selector .shadow
• box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000) — selector .ring
• max-width: 640px!important — selector .!container
• max-width: 640px — selector .container
• max-width: 768px!important — selector .!container
• max-width: 768px — selector .container
• max-width: 1024px!important — selector .!container
• max-width: 1024px — selector .container
• max-width: 1280px!important — selector .!container
• max-width: 1280px — selector .container
• padding: .75em — selector .cascading-slider**button
• padding: 0 — selector button,input,optgroup,select,textarea
• gap: 1em — selector .cascading-slider**nav
• gap: 2.5rem!important — selector .!gap-10
• gap: .125rem — selector .gap-0.5
• gap: .25rem — selector .gap-1
• gap: .375rem — selector .gap-1.5
• gap: 2.5rem — selector .gap-10
• gap: 3rem — selector .gap-12
• gap: 3.5rem — selector .gap-14
• transition: opacity .15s ease — selector .cascading-slider**button

Responsive rules

(min-width:640px)
(min-width:768px)
(min-width:1024px)
(min-width:1280px)
(min-width:1536px)
(prefers-reduced-motion:reduce)
not all and (min-width:640px)
(min-width:480px)
(min-width:490px)
(min-width:992px)