bambiui
Untitled system
Design systems
Loading local draft…

Shape & spacing

100%

On desktop, drag empty space or use the mouse wheel to pan without bounds. Hold Control or Command while scrolling to zoom at the pointer; Shift and scroll pans horizontally. Focus the canvas and use arrow keys to pan, or use Fit and zoom buttons. On mobile, scroll the page normally. Hover over a section for a selection outline; click an empty area of that section to edit its tokens. Select an example frame or its text to edit that exact combination. Keyboard users can select an example using its size button, then choose a layer in the inspector. Interactive behavior is available in the optional state previews.

Colors

Semantic roles

These colors supply component defaults in Light. Select a role to edit it; component and layer overrides take precedence.

Background#fff8f6Foreground#201916Muted#fff4f1Muted foreground#796f6cBorder#8e8480Primary#e8673cOn primary#291b15Secondary#81711dOn secondary#ffffffSuccess#1c822bOn success#ffffffWarning#946900On warning#ffffffDanger#bb4441On danger#ffffffInfo#2671c9On info#ffffff

Palette scales

50–1000 shades derived from each role until overridden. Editing a shade updates the palette reference and CSS export, not the semantic role or component colors.

neutralneutral 50: #fff9f6neutral 100: #f6ece8neutral 200: #e6dcd7neutral 300: #d2c8c4neutral 400: #b8afabneutral 500: #9f9692neutral 600: #877e7aneutral 700: #706763neutral 800: #59504dneutral 900: #433b38neutral 1000: #120c09
primaryprimary 50: #fff8f6primary 100: #ffe9e2primary 200: #ffd3c4primary 300: #ffb69fprimary 400: #ff8d68primary 500: #ed6c41primary 600: #d15225primary 700: #b43900primary 800: #902b00primary 900: #6d1f00primary 1000: #1f0400
secondarysecondary 50: #fffbe5secondary 100: #fff0a6secondary 200: #f0df8fsecondary 300: #dccc7csecondary 400: #c2b263secondary 500: #a9994asecondary 600: #908030secondary 700: #796910secondary 800: #605200secondary 900: #483d00secondary 1000: #110d00
successsuccess 50: #f0fff0success 100: #caffcasuccess 200: #99f99dsuccess 300: #86e58asuccess 400: #6cca71success 500: #52b059success 600: #379740success 700: #167e27success 800: #006517success 900: #004b0fsuccess 1000: #001201
warningwarning 50: #fff9f0warning 100: #ffecccwarning 200: #ffd895warning 300: #f1c270warning 400: #d7a956warning 500: #bd903cwarning 600: #a3781ewarning 700: #896100warning 800: #6c4c00warning 900: #513800warning 1000: #150b00
dangerdanger 50: #fff8f8danger 100: #ffe9e6danger 200: #ffd1cddanger 300: #ffb5aedanger 400: #ff8a82danger 500: #e86d66danger 600: #cc544fdanger 700: #b03a38danger 800: #951e22danger 900: #78000edanger 1000: #220001
infoinfo 50: #f7faffinfo 100: #e4f0ffinfo 200: #c9e0ffinfo 300: #a7ceffinfo 400: #79b4ffinfo 500: #509af5info 600: #3780dainfo 700: #1b68bfinfo 800: #0050a0info 900: #003b79info 1000: #000d23

Typography

Shared by Light and Dark and used by every component. Select the font, base size or a text style to edit it.

Font familySystem sansBase size14px
H148px · 1.1 · 700 · -1pxH240px · 1.15 · 700 · -0.75pxH332px · 1.2 · 700 · -0.5pxH428px · 1.25 · 600 · -0.35pxH524px · 1.3 · 600 · -0.25pxH620px · 1.35 · 600Heading32px · 1.2 · 700 · -0.5pxParagraph16px · 1.5 · 400Label14px · 1.4 · 500Caption12px · 1.4 · 400

Shape & spacing

Shared dimensions for both themes: the radius scale, default padding, gap and margin, the spacing scale used between Card.Content items, and control heights. Select a token to edit its value.

Radius sm4pxRadius md8pxRadius lg12pxBorder width1pxHorizontal padding16pxVertical padding10pxGap8pxMargin0pxSpacing sm4pxSpacing md8pxSpacing lg16pxControl height sm32pxControl height md36pxControl height lg44px