Smart MobiusDesign system

Estilos

Los 244 tokens de design.css, agrupados por lo que son. Cada muestra se pinta con el token mismo, así que cambia con el tema claro u oscuro.

Color

--color-primary171 78 255
--color-secondary0 255 158
--color-primary-foreground255 255 255
--color-accent102 91 192
--color-background243 243 245oscuro: 14 14 16
--color-surface255 255 255oscuro: 27 27 31
--color-foreground11 11 12oscuro: 236 236 239
--color-muted110 110 118oscuro: 155 155 164
--color-muted-foreground160 160 168oscuro: 116 116 125
--color-border230 230 232oscuro: 30 30 34
--color-success52 199 89
--color-warning255 149 0
--color-error255 59 48
--color-info0 122 255
--bg#f3f3f5oscuro: #0e0e10
--canvasvar(--chrome)
--tile-head-bgrgba(0, 0, 0, 0.028)oscuro: rgba(255, 255, 255, 0.05)
--bg-2#e8e8ecoscuro: #1b1b1f
--surface#ffffffoscuro: #1b1b1f
--surface-2#ffffffoscuro: #1b1b1f
--surface-3#ffffffoscuro: #1b1b1f
--skeleton-base#e4e4e9oscuro: rgba(255, 255, 255, 0.08)
--glassrgba(255, 255, 255, 0.72)oscuro: rgba(28, 28, 32, 0.72)
--glass-borderrgba(0, 0, 0, 0.06)oscuro: rgba(255, 255, 255, 0.08)
--ink#0b0b0coscuro: #ececef
--noir#1F1F1F
--ink-2#3f4147oscuro: #d0d0d6
--ink-3#6b6e76oscuro: #9b9ba4
--ink-4#9a9da4oscuro: #74747d
--ink-5#c8c8cdoscuro: #3a3a40
--hairlinergba(0, 0, 0, 0.06)oscuro: rgba(255, 255, 255, 0.07)
--hairline-2rgba(0, 0, 0, 0.04)oscuro: rgba(255, 255, 255, 0.05)
--action#0b0b0coscuro: #e6e6ea
--mint#12a877
--signal#6d3df0oscuro: #a98bff
--signal-soft#f3f0fdoscuro: rgba(169, 139, 255, 0.14)
--action-hover#26262aoscuro: #d4d4da
--action-ink#ffffffoscuro: #0e0e10
--alert#ff3b30oscuro: #ff6b61
--alert-bgrgba(255, 59, 48, 0.10)oscuro: rgba(255, 107, 97, 0.16)
--warn#ff9500oscuro: #ffab33
--warn-bgrgba(255, 149, 0, 0.12)oscuro: rgba(255, 171, 51, 0.16)
--info#007aff
--info-bgrgba(0, 122, 255, 0.10)oscuro: rgba(0, 122, 255, 0.18)
--ok#34c759oscuro: #4cd471
--ok-bgrgba(52, 199, 89, 0.12)oscuro: rgba(76, 212, 113, 0.16)
--ok-strong#157347oscuro: #4cd471
--barvar(--ink)oscuro: #b9b9c1
--bg-primaryvar(--surface)
--bg-secondaryvar(--surface-2)
--bg-tertiaryvar(--bg)
--bg-hovervar(--surface-3)
--bg-activevar(--bg-2)
--bg-inversevar(--ink)
--bg-inverse-hover#2e2e34oscuro: #d4d4da
--text-primaryvar(--ink)
--text-secondaryvar(--ink-2)
--text-tertiaryvar(--ink-3)
--text-mutedvar(--ink-4)
--text-inversevar(--surface)oscuro: var(--bg)
--border-defaultvar(--hairline)
--border-strongvar(--ink-5)
--border-inversevar(--ink-2)
--accentrgb(var(--color-primary))
--brand-primaryrgb(var(--color-primary))oscuro: #C77DFF
--brand-dark#7A1FD0oscuro: #AB4EFF
--brand-light#C77DFFoscuro: #E0AAFF
--brand-lighter#E0AAFFoscuro: #C8C0ED
--brand-lightest#F3E8FFoscuro: #34145A
--brand-surface#F7EDFFoscuro: #241033
--secondaryrgb(var(--color-secondary))
--secondary-surface#E3FFF4oscuro: #06291D
--mock-bar#075e54oscuro: #1f2c34
--mock-bar-ink#ffffff
--mock-mine#dcf8c6oscuro: #005c4b
--mock-theirs#ffffffoscuro: #202c33
--mock-ink#111b21oscuro: #e9edef
--mock-ink-2#667781oscuro: #8696a0
--mock-field#ffffffoscuro: #2a3942
--mock-action#00a884
--mock-seen#53bdeb
--mock-ok-bg#e7f7e1oscuro: #0b3b2e
--mock-ok-ink#1f7a44oscuro: #7ee3a8
--mock-ok-icon#1fa855
--mock-paper#fbf9f4
--mock-avatar-bg#d9dee1oscuro: #3b4a52
--mock-avatar-ink#4a5b63oscuro: #cfd9de
--mock-shade-1rgba(0, 0, 0, 0.20)
--mock-shade-2rgba(0, 0, 0, 0.14)
--mock-shade-3rgba(0, 0, 0, 0.07)
--mock-veilrgba(0, 0, 0, 0.45)
--dividerrgba(0, 0, 0, 0.10)oscuro: rgba(255, 255, 255, 0.12)
--divider-strongvar(--divider)
--field-bgrgba(0, 0, 0, 0.042)oscuro: rgba(255, 255, 255, 0.055)
--field-bg-hoverrgba(0, 0, 0, 0.062)oscuro: rgba(255, 255, 255, 0.085)
--field-bordertransparent
--field-border-hovertransparent
--field-focusrgba(0, 0, 0, 0.28)oscuro: rgba(255, 255, 255, 0.38)
--hover-softrgba(0, 0, 0, 0.02)oscuro: rgba(255, 255, 255, 0.032)
--hover-soft-2rgba(0, 0, 0, 0.038)oscuro: rgba(255, 255, 255, 0.055)
--fill-softrgba(0, 0, 0, 0.052)oscuro: rgba(255, 255, 255, 0.06)
--fill-soft-hoverrgba(0, 0, 0, 0.085)oscuro: rgba(255, 255, 255, 0.12)
--fill-mediumrgba(0, 0, 0, 0.075)oscuro: rgba(255, 255, 255, 0.105)
--chrome#f4f4f5oscuro: #0e0e10
--chrome-hover#e9e9ecoscuro: #18181b
--chrome-active#e1e1e6oscuro: #212125
--btn-borderrgba(0, 0, 0, 0.16)oscuro: rgba(255, 255, 255, 0.18)
--btn-border-hoverrgba(0, 0, 0, 0.30)oscuro: rgba(255, 255, 255, 0.38)

Tipografía

--font-sansvar(--font-montserrat), "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif
Factura F001-4472 · S/ 2,985.40
--font-displayvar(--font-zalando), "Zalando Sans Expanded", var(--font-montserrat), system-ui, sans-serif
Factura F001-4472 · S/ 2,985.40
--font-monovar(--font-geist-mono), "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace
Factura F001-4472 · S/ 2,985.40
--lh-title1
Factura F001-4472 · S/ 2,985.40
--lh-body1.4
Factura F001-4472 · S/ 2,985.40
--mock-fs13px
Factura F001-4472 · S/ 2,985.40
--fs-mockcalc(var(--fs-base) * 0.625)
Factura F001-4472 · S/ 2,985.40
--fs-mock-lgcalc(var(--fs-base) * 0.719)
Factura F001-4472 · S/ 2,985.40
--fw-title500
Factura F001-4472 · S/ 2,985.40
--fw-display700
Factura F001-4472 · S/ 2,985.40
--fs-base14px
Factura F001-4472 · S/ 2,985.40
--fs-2xscalc(var(--fs-base) * 0.75)
Factura F001-4472 · S/ 2,985.40
--fs-xscalc(var(--fs-base) * 0.857)
Factura F001-4472 · S/ 2,985.40
--fs-smcalc(var(--fs-base) * 0.929)
Factura F001-4472 · S/ 2,985.40
--fs-mdcalc(var(--fs-base) * 1.143)
Factura F001-4472 · S/ 2,985.40
--fs-lgcalc(var(--fs-base) * 1.286)
Factura F001-4472 · S/ 2,985.40
--fs-xlcalc(var(--fs-base) * 1.571)
Factura F001-4472 · S/ 2,985.40
--fs-2xlcalc(var(--fs-base) * 1.929)
Factura F001-4472 · S/ 2,985.40
--fs-figurecalc(var(--fs-base) * 1.375)
Factura F001-4472 · S/ 2,985.40
--figure-weight500
Factura F001-4472 · S/ 2,985.40
--fs-3xlcalc(var(--fs-base) * 2.286)
Factura F001-4472 · S/ 2,985.40
--fs-4xlcalc(var(--fs-base) * 3)
Factura F001-4472 · S/ 2,985.40
--fs-5xlcalc(var(--fs-base) * 3.75)
Factura F001-4472 · S/ 2,985.40

Espacio y medidas

--canvas-gap20px
--tile-px12px
--tile-py8px
--tile-head-h32px
--tile-head-btn-h24px
--block-gap4px
--row-h44px
--row-py8px
--receipt-h440px
--empty-py32px
--empty-py-card20px
--empty-gap8px
--tile-head-gap8px
--landing-w1104px
--landing-px24px
--landing-colcalc(var(--landing-w) / var(--landing-cols))
--landing-air8px
--landing-py96px
--container-padding1.25rem
--mock-w400px
--mock-action-d46px
--mock-u4px
--mock-px12px
--mock-gap8px
--mock-avatar36px
--mock-icon20px
--mock-fs-xs11px
--mock-fs-lg17px
--control-h-sm28px
--control-h36px
--control-h-lg44px
--control-px11px
--control-px-flat6px
--switch-w34px
--switch-h20px
--switch-dot16px
--badge-py3px
--badge-px8px
--badge-gap4px
--doc-px20px
--doc-py18px
--tab-px10px
--gap-block20px
--gap-item10px
--gap-piece6px
--sidebar-px16px
--sidebar-bleed8px
--sidebar-icon-col18px
--divider-w3px
--divider-hairline1px
--gap16px
--pad16px
--topbar-h46px
--wtab-px13px
--icon-btn26px
--btn-py5px
--btn-gap6px
--btn-compact-py4px
--btn-compact-px13px
--btn-compact-lh16px
--btn-compact-h32px
--btn-px13px
--control-lh22px
--btn-h32px
--btn-icon15px
--ag-read-w46rem
--head-h46px
--wtab-w178px
--wtab-w-min44px
--aside-w19rem
--inbox-w26rem
--aside-w-collapsed4rem
--layout-aside-w20rem
--cfg-nav-w14rem
--layout-gap1rem
--content-max-w60rem

Forma

--r-tile12px
--r-pressable999px
--r-control8px
--r-box16px
--r-flat4px
--r-cover28px
--radius-smvar(--r-control)
--radius-mdvar(--r-control)
--radius-lgvar(--r-box)
--radius-xlvar(--r-box)
--radius-2xlvar(--r-box)
--radius-fullvar(--r-pressable)
--r-pillvar(--r-pressable)
--r-cardvar(--r-box)
--r-card-lgvar(--r-box)
--r-inputvar(--r-control)
--r-chipvar(--r-control)
--mock-r16px
--mock-r-in12px
--mock-r-tail4px
--control-rvar(--r-control)
--control-r-flatvar(--r-flat)
--badge-rvar(--r-pressable)

Sombras

--shadow-smnone
--shadow-mdnone
--shadow-lgnone
--shadow-xlnone
--shadow-insetnone

Movimiento

--dur-instant100ms
--dur-fast160ms
--dur240ms
--dur-slow400ms
--easecubic-bezier(0.32, 0.72, 0, 1)
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
--ease-incubic-bezier(0.7, 0, 0.84, 0)
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)

Otros

--landing-cols6