CSS reference | Mobieus community platform

Colors

36

(inherited)
var(--blue-bright)
(inherited)
(inherited)
var(--bg-3)
(inherited)
(inherited)
(inherited)
var(--bg-elevated)
var(--bg-elevated)
rgba(0, 0, 0, 0.82)
var(--bg-2)
(inherited)
var(--bg-2)
var(--border)
var(--blue-bright)
(inherited)
(inherited)
var(--red)
#ff8585
var(--blue-bright)
#66adff
var(--blue)
var(--blue-bright)
var(--green)
#33ffaa
var(--bg)
var(--text-muted)
var(--text)
var(--text-dim)
rgba(255, 107, 107, 0.12)
rgba(77, 144, 255, 0.12)
rgba(0, 255, 136, 0.12)
rgba(255, 179, 71, 0.12)
var(--amber)
#ffc777

Base Colors

16

#07091A
#0E1228
#161B36
#1d234a
rgba(255, 255, 255, 0.08)
rgba(255, 255, 255, 0.16)
var(--blue-bright)
(inherited)
(inherited)
(inherited)
(inherited)
#F4F6FB
#A7AEC4
#8A92AE
#ffffff
(inherited)

Typography

22

'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif
'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif
var(--font-body)
var(--font-mono)
'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', mo
1.5rem
1.875rem
2.25rem
1rem
1.167rem
1.125rem
(inherited)
0.875rem
1.25rem
0.75rem
700
500
400
600
1.5
1.75
1.25

Spacing

15

(inherited)
0
0.25rem
2.5rem
3rem
4rem
0.5rem
5rem
6rem
0.75rem
8rem
1rem
1.25rem
1.5rem
2rem

Borders & Radius

5

16px
10px
999px
6px
20px

Shadows

7

(inherited)
0 0 0 3px rgba(44, 124, 255, 0.4)
0 8px 24px rgba(44, 124, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)
0 12px 32px rgba(44, 124, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25)
0 12px 32px rgba(0, 0, 0, 0.40)
0 8px 24px rgba(0, 0, 0, 0.35)
0 2px 8px rgba(0, 0, 0, 0.25)

Gradients

3

linear-gradient(135deg, #2C7CFF 0%, #7B3FE4 100%)
linear-gradient(135deg, #4D90FF 0%, #9B5FFF 100%)
linear-gradient(135deg, rgba(44, 124, 255, 0.15) 0%, rgba(123, 63, 228, 0.15) 10

Layout

13

22rem
75rem
56rem
40rem
250ms ease
150ms ease
400ms ease
100
(inherited)
300
200
400
500

Other

94

(inherited)
(inherited)
#FFB347
(inherited)
(inherited)
(inherited)
#2C7CFF
#4D90FF
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
cubic-bezier(0.0, 0.0, 0.2, 1)
cubic-bezier(0.4, 0.0, 1, 1)
cubic-bezier(0.2, 0, 0, 1)
0px
(inherited)
(inherited)
0 0 16px rgba(44, 124, 255, 0.35)
0 0 16px rgba(123, 63, 228, 0.30)
(inherited)
(inherited)
#00FF88
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
1.6
1.75
1.3
1.1
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
200ms
120ms
360ms
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
#7B3FE4
#9B5FFF
#FF6B6B
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
0
0.12em
-0.02em
(inherited)
1rem
1.125rem
0.875rem
1.25rem
0.8125rem
clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem)
clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem)
clamp(3rem, 2.2rem + 3.5vw, 4.5rem)
0.6875rem
1.5rem
1.25rem
1.125rem
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)
(inherited)

Components

9

Live usage-meter wrapper (CM settings).
Label row above the bar (flex, space-between).
Bar track (rounded, muted background).
Filled bar; width set inline as a percent.
Modifier: amber fill at 80%+ of budget.
Modifier: red fill at 100% of budget.
Community footer wrapper (legal bar; theme-correct).
Focused Create menu opened by the redesign rail Create button (fixed-positioned).
An action row inside the Create menu.

<div class="cm-budget-meter"><div class="cm-budget-meter__row"><span><strong>820</strong> tokens used this month</span><span>82% of 1,000</span></div><div class="cm-budget-meter__track"><span class="cm-budget-meter__fill is-warn" style="width: 82%"></span></div></div>

Mobile

6

Wrap long words, URLs, and emails instead of overflowing the viewport.
Two-column form-plus-aside layout that stacks to one column on phones.
Four-up pricing-tier card grid; collapses to two, then one column.
Two-up code/example grid; stacks to a single column on phones.
Dimmed scrim behind the open mobile nav drawer (created by script.js).
Inline form error message; replaces native alert() on the buy and contact forms.

Every theme token your tenant can override.