Foundations
Colors
Switch the theme to see the dark values. Each name is a CSS variable.
--ra-bg
#ffffff / #0b0b0c
--ra-surface
#ffffff / #111113
--ra-sunken
#f7f7f8 / #17171a
--ra-hover
#f4f4f5 / #1c1c20
--ra-border
#e3e3e3 / #2a2a2e
--ra-border-strong
#d2d2d4 / #3a3a3f
--ra-ink
#000000 / #ffffff
--ra-ink-2
#3c3c3f / #d4d4d8
--ra-muted
#6b6b6b / #9e9ea3
--ra-brand
#6155f5 / #6155f5
--ra-brand-hover
#4a3fd6 / #4a3fd6
--ra-brand-soft
#efedff / rgba(97,85,245,.18)
--ra-brand-text
#4a3fd6 / #a9a2ff
--ra-on-brand
#ffffff / #ffffff
--ra-ok
#1f7a2b / #4cc35a
--ra-ok-soft
#e8f5ea / rgba(47,164,60,.16)
--ra-warn
#7d6300 / #ffd84d
--ra-warn-soft
#fff5cc / rgba(255,204,0,.12)
--ra-warn-line
#ffcc00 / #ffcc00
--ra-err
#c22a30 / #ff6b70
--ra-err-soft
#fdecec / rgba(229,72,77,.14)
--ra-pass
#0068c9 / #4aa8ff
--ra-pass-soft
rgba(0,136,255,.1) / rgba(0,136,255,.18)
--ra-code-bg
#0c0d10 / #0c0d10
--ra-code-fg
#e6e8ec / #e6e8ec
--ra-code-muted
#7d828a / #7d828a
--ra-code-str
#f0b46a / #f0b46a
--ra-code-key
#b9a8ff / #b9a8ff
--ra-code-flag
#7dd3fc / #7dd3fc
--ra-json-key
#7a3fd6 / #b9a8ff
--ra-json-str
#b45309 / #f0b46a
--ra-json-num
#0e7c3a / #6fdc8c
--ra-accent-blue
#0088ff / #0088ff
--ra-accent-yellow
#ffcc00 / #ffcc00
--ra-on-accent
#000000 / #000000
--ra-accent-green
#2fa43c / #2fa43c
--ra-scrim
rgba(0,0,0,.28) / rgba(0,0,0,.28)
HTML
<div style="display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))"><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-bg)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-bg</div><div class="ra-muted ra-mono" style="font-size:11px">#ffffff / #0b0b0c</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-surface)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-surface</div><div class="ra-muted ra-mono" style="font-size:11px">#ffffff / #111113</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-sunken</div><div class="ra-muted ra-mono" style="font-size:11px">#f7f7f8 / #17171a</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-hover)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-hover</div><div class="ra-muted ra-mono" style="font-size:11px">#f4f4f5 / #1c1c20</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-border)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-border</div><div class="ra-muted ra-mono" style="font-size:11px">#e3e3e3 / #2a2a2e</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-border-strong)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-border-strong</div><div class="ra-muted ra-mono" style="font-size:11px">#d2d2d4 / #3a3a3f</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-ink)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-ink</div><div class="ra-muted ra-mono" style="font-size:11px">#000000 / #ffffff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-ink-2)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-ink-2</div><div class="ra-muted ra-mono" style="font-size:11px">#3c3c3f / #d4d4d8</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-muted)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-muted</div><div class="ra-muted ra-mono" style="font-size:11px">#6b6b6b / #9e9ea3</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-brand)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-brand</div><div class="ra-muted ra-mono" style="font-size:11px">#6155f5 / #6155f5</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-brand-hover)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-brand-hover</div><div class="ra-muted ra-mono" style="font-size:11px">#4a3fd6 / #4a3fd6</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-brand-soft)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-brand-soft</div><div class="ra-muted ra-mono" style="font-size:11px">#efedff / rgba(97,85,245,.18)</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-brand-text)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-brand-text</div><div class="ra-muted ra-mono" style="font-size:11px">#4a3fd6 / #a9a2ff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-on-brand)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-on-brand</div><div class="ra-muted ra-mono" style="font-size:11px">#ffffff / #ffffff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-ok)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-ok</div><div class="ra-muted ra-mono" style="font-size:11px">#1f7a2b / #4cc35a</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-ok-soft)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-ok-soft</div><div class="ra-muted ra-mono" style="font-size:11px">#e8f5ea / rgba(47,164,60,.16)</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-warn)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-warn</div><div class="ra-muted ra-mono" style="font-size:11px">#7d6300 / #ffd84d</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-warn-soft)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-warn-soft</div><div class="ra-muted ra-mono" style="font-size:11px">#fff5cc / rgba(255,204,0,.12)</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-warn-line)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-warn-line</div><div class="ra-muted ra-mono" style="font-size:11px">#ffcc00 / #ffcc00</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-err)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-err</div><div class="ra-muted ra-mono" style="font-size:11px">#c22a30 / #ff6b70</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-err-soft)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-err-soft</div><div class="ra-muted ra-mono" style="font-size:11px">#fdecec / rgba(229,72,77,.14)</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-pass)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-pass</div><div class="ra-muted ra-mono" style="font-size:11px">#0068c9 / #4aa8ff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-pass-soft)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-pass-soft</div><div class="ra-muted ra-mono" style="font-size:11px">rgba(0,136,255,.1) / rgba(0,136,255,.18)</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-bg)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-bg</div><div class="ra-muted ra-mono" style="font-size:11px">#0c0d10 / #0c0d10</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-fg)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-fg</div><div class="ra-muted ra-mono" style="font-size:11px">#e6e8ec / #e6e8ec</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-muted)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-muted</div><div class="ra-muted ra-mono" style="font-size:11px">#7d828a / #7d828a</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-str)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-str</div><div class="ra-muted ra-mono" style="font-size:11px">#f0b46a / #f0b46a</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-key)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-key</div><div class="ra-muted ra-mono" style="font-size:11px">#b9a8ff / #b9a8ff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-code-flag)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-code-flag</div><div class="ra-muted ra-mono" style="font-size:11px">#7dd3fc / #7dd3fc</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-json-key)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-json-key</div><div class="ra-muted ra-mono" style="font-size:11px">#7a3fd6 / #b9a8ff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-json-str)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-json-str</div><div class="ra-muted ra-mono" style="font-size:11px">#b45309 / #f0b46a</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-json-num)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-json-num</div><div class="ra-muted ra-mono" style="font-size:11px">#0e7c3a / #6fdc8c</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-accent-blue)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-accent-blue</div><div class="ra-muted ra-mono" style="font-size:11px">#0088ff / #0088ff</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-accent-yellow)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-accent-yellow</div><div class="ra-muted ra-mono" style="font-size:11px">#ffcc00 / #ffcc00</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-on-accent)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-on-accent</div><div class="ra-muted ra-mono" style="font-size:11px">#000000 / #000000</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-accent-green)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-accent-green</div><div class="ra-muted ra-mono" style="font-size:11px">#2fa43c / #2fa43c</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-scrim)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-scrim</div><div class="ra-muted ra-mono" style="font-size:11px">rgba(0,0,0,.28) / rgba(0,0,0,.28)</div></div></div>App type scale
Geist for UI text, Geist Mono for labels and code, Caslon for big numbers.
--ra-text-labelRun enrichment 10.5px
--ra-text-xsRun enrichment 11px
--ra-text-smRun enrichment 12px
--ra-text-baseRun enrichment 13px
--ra-text-mdRun enrichment 14px
--ra-text-lgRun enrichment 15px
--ra-text-xlRun enrichment 20px
--ra-text-stat1,284
HTML
<div style="display:grid;gap:8px"><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-label</span><span style="font-size:var(--ra-text-label)">Run enrichment 10.5px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-xs</span><span style="font-size:var(--ra-text-xs)">Run enrichment 11px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-sm</span><span style="font-size:var(--ra-text-sm)">Run enrichment 12px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-base</span><span style="font-size:var(--ra-text-base)">Run enrichment 13px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-md</span><span style="font-size:var(--ra-text-md)">Run enrichment 14px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-lg</span><span style="font-size:var(--ra-text-lg)">Run enrichment 15px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-xl</span><span style="font-size:var(--ra-text-xl)">Run enrichment 20px</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-text-stat</span><span class="ra-serif" style="font-size:var(--ra-text-stat)">1,284</span></div></div>Marketing type scale
Caslon at weight 400 for display headings, Geist for body copy.
--ra-site-xsEvery data API, one key
--ra-site-smEvery data API, one key
--ra-site-baseEvery data API, one key
--ra-site-lgEvery data API, one key
--ra-site-xlEvery data API, one key
--ra-site-2xlEvery data API, one key
--ra-site-3xlEvery data API, one key
--ra-site-4xlEvery data API, one key
--ra-site-5xlEvery data API, one key
--ra-site-6xlEvery data API, one key
--ra-site-7xlEvery data API, one key
HTML
<div style="display:grid;gap:8px"><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-xs</span><span style="font-size:var(--ra-site-xs);line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-sm</span><span style="font-size:var(--ra-site-sm);line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-base</span><span style="font-size:var(--ra-site-base);line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-lg</span><span style="font-size:var(--ra-site-lg);line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-xl</span><span style="font-size:var(--ra-site-xl);line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-2xl</span><span class="ra-serif" style="font-size:var(--ra-site-2xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-3xl</span><span class="ra-serif" style="font-size:var(--ra-site-3xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-4xl</span><span class="ra-serif" style="font-size:var(--ra-site-4xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-5xl</span><span class="ra-serif" style="font-size:var(--ra-site-5xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-6xl</span><span class="ra-serif" style="font-size:var(--ra-site-6xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div><div style="display:flex;gap:16px;align-items:baseline"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-site-7xl</span><span class="ra-serif" style="font-size:var(--ra-site-7xl);letter-spacing:-0.02em;line-height:1.15">Every data API, one key</span></div></div>Spacing
--ra-space-14px
--ra-space-28px
--ra-space-312px
--ra-space-416px
--ra-space-520px
--ra-space-624px
--ra-space-728px
--ra-space-832px
--ra-space-936px
--ra-space-1040px
--ra-space-1144px
--ra-space-1248px
--ra-space-1352px
--ra-space-1456px
--ra-space-1560px
--ra-space-1664px
--ra-space-2080px
--ra-space-2496px
--ra-space-32128px
HTML
<div style="display:grid;gap:6px"><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-1</span><span style="width:var(--ra-space-1);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">4px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-2</span><span style="width:var(--ra-space-2);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">8px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-3</span><span style="width:var(--ra-space-3);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">12px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-4</span><span style="width:var(--ra-space-4);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">16px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-5</span><span style="width:var(--ra-space-5);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">20px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-6</span><span style="width:var(--ra-space-6);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">24px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-7</span><span style="width:var(--ra-space-7);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">28px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-8</span><span style="width:var(--ra-space-8);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">32px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-9</span><span style="width:var(--ra-space-9);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">36px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-10</span><span style="width:var(--ra-space-10);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">40px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-11</span><span style="width:var(--ra-space-11);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">44px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-12</span><span style="width:var(--ra-space-12);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">48px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-13</span><span style="width:var(--ra-space-13);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">52px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-14</span><span style="width:var(--ra-space-14);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">56px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-15</span><span style="width:var(--ra-space-15);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">60px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-16</span><span style="width:var(--ra-space-16);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">64px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-20</span><span style="width:var(--ra-space-20);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">80px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-24</span><span style="width:var(--ra-space-24);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">96px</span></div><div style="display:flex;gap:16px;align-items:center"><span class="ra-mono ra-muted" style="width:140px;font-size:11px">--ra-space-32</span><span style="width:var(--ra-space-32);height:8px;background:var(--ra-brand);border-radius:2px"></span><span class="ra-muted ra-mono" style="font-size:11px">128px</span></div></div>Radius
--ra-radius-2xs
3px
--ra-radius-xs
4px
--ra-radius-sm
5px
--ra-radius-md
6px
--ra-radius-lg
8px
--ra-radius-xl
10px
--ra-radius-2xl
16px
--ra-radius-full
9999px
HTML
<div style="display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))"><div><div style="height:56px;border-radius:var(--ra-radius-2xs);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-2xs</div><div class="ra-muted ra-mono" style="font-size:11px">3px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-xs);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-xs</div><div class="ra-muted ra-mono" style="font-size:11px">4px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-sm);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-sm</div><div class="ra-muted ra-mono" style="font-size:11px">5px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-md);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-md</div><div class="ra-muted ra-mono" style="font-size:11px">6px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-lg</div><div class="ra-muted ra-mono" style="font-size:11px">8px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-xl);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-xl</div><div class="ra-muted ra-mono" style="font-size:11px">10px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-2xl);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-2xl</div><div class="ra-muted ra-mono" style="font-size:11px">16px</div></div><div><div style="height:56px;border-radius:var(--ra-radius-full);border:1px solid var(--ra-border);background:var(--ra-sunken)"></div><div class="ra-mono" style="font-size:12px;margin-top:6px">--ra-radius-full</div><div class="ra-muted ra-mono" style="font-size:11px">9999px</div></div></div>Shadows
--ra-shadow-pop
--ra-shadow-ring
HTML
<div style="display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))"><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:0;background:var(--ra-surface);box-shadow:var(--ra-shadow-pop)"></div><div class="ra-mono" style="font-size:12px;margin-top:10px">--ra-shadow-pop</div></div><div><div style="height:56px;border-radius:var(--ra-radius-lg);border:0;background:var(--ra-surface);box-shadow:var(--ra-shadow-ring)"></div><div class="ra-mono" style="font-size:12px;margin-top:10px">--ra-shadow-ring</div></div></div>Logos
Use the dark lockup on dark backgrounds and the light lockup on light backgrounds.
logos/richapi-logo-light.svg
logos/richapi-logo-dark.svg
logos/richapi-icon-color-blue.svg
logos/richapi-icon-color-white.svg
logos/richapi-icon-grayscale-black.svg
logos/richapi-icon-grayscale-white.svg
HTML
<link rel="preload" as="image" href="../dist/assets/logos/richapi-logo-light.svg"/><link rel="preload" as="image" href="../dist/assets/logos/richapi-logo-dark.svg"/><link rel="preload" as="image" href="../dist/assets/logos/richapi-icon-color-blue.svg"/><link rel="preload" as="image" href="../dist/assets/logos/richapi-icon-color-white.svg"/><link rel="preload" as="image" href="../dist/assets/logos/richapi-icon-grayscale-black.svg"/><link rel="preload" as="image" href="../dist/assets/logos/richapi-icon-grayscale-white.svg"/><div style="display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))"><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#ffffff"><img src="../dist/assets/logos/richapi-logo-light.svg" alt="richapi-logo-light" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-logo-light.svg</div></div><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#0b0b0c"><img src="../dist/assets/logos/richapi-logo-dark.svg" alt="richapi-logo-dark" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-logo-dark.svg</div></div><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#ffffff"><img src="../dist/assets/logos/richapi-icon-color-blue.svg" alt="richapi-icon-color-blue" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-icon-color-blue.svg</div></div><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#0b0b0c"><img src="../dist/assets/logos/richapi-icon-color-white.svg" alt="richapi-icon-color-white" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-icon-color-white.svg</div></div><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#ffffff"><img src="../dist/assets/logos/richapi-icon-grayscale-black.svg" alt="richapi-icon-grayscale-black" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-icon-grayscale-black.svg</div></div><div><div style="height:72px;border-radius:var(--ra-radius-lg);border:1px solid var(--ra-border);display:grid;place-items:center;background:#0b0b0c"><img src="../dist/assets/logos/richapi-icon-grayscale-white.svg" alt="richapi-icon-grayscale-white" style="max-height:32px;max-width:80%"/></div><div class="ra-mono" style="font-size:12px;margin-top:6px">logos/richapi-icon-grayscale-white.svg</div></div></div>