Breakdex

ColorSystem

Adaptive color palette with four theme modes and semantic state/action colors

Values

Modes

dark

bg #090B10

card #11141B

fill #1A1F29

secondary #A7B1C2

separator #283041

text #F7FAFF

light

bg #F8FAFC

card #FFFFFF

fill #F1F5F9

secondary #5A6272

separator #D9E0EA

text #0B0D12

mono Dark

bg #090909

card #111111

fill #181818

secondary #B3B3B3

separator #F4F4F4

text #F4F4F4

mono Light

bg #F7F7F7

card #FFFFFF

fill #F0F0F0

secondary #5F5F5F

separator #111111

text #111111

Depth

Layered depth system with z-index, parametric depth levels, and shadow presets

Values

elevated

{
  "blur": 0,
  "parallax": 0.5,
  "scale": 1,
  "shadowBlur": 16,
  "shadowOffsetY": 4,
  "shadowOpacity": 0.12
}

flat

{
  "blur": 0,
  "parallax": 0,
  "scale": 1,
  "shadowBlur": 8,
  "shadowOffsetY": 2,
  "shadowOpacity": 0.06
}

floating

{
  "blur": 0,
  "parallax": 1,
  "scale": 1.005,
  "shadowBlur": 28,
  "shadowOffsetY": 8,
  "shadowOpacity": 0.18
}

overlayLevel

{
  "blur": 20,
  "parallax": 1.5,
  "scale": 1.01,
  "shadowBlur": 40,
  "shadowOffsetY": 16,
  "shadowOpacity": 0.24
}

shadowFocus

{
  "blur": 34,
  "darkColor": "#66000000",
  "lightColor": "#260F0B08",
  "offsetY": 16
}

shadowLayered

{
  "ambient": {
    "blur": 20,
    "darkColor": "#42000000",
    "lightColor": "#140F0B08"
  },
  "key": {
    "blur": 16,
    "darkColor": "#52000000",
    "lightColor": "#1A0F0B08"
  }
}

shadowRaised

{
  "blur": 22,
  "darkColor": "#52000000",
  "lightColor": "#1A0F0B08",
  "offsetY": 10
}

shadowSoft

{
  "blur": 12,
  "darkColor": "#42000000",
  "lightColor": "#140F0B08",
  "offsetY": 4
}

sunken

{
  "blur": 0,
  "parallax": 0,
  "scale": 0.98,
  "shadowOpacity": 0
}

Scale

background -1

content 0

overlay 2

raised 1

top 3

Spacing

Consistent spacing ramp and border-radius scale for layout harmony

Values

radiusLg 22

radiusMd 16

radiusSm 10

radiusXl 30

radiusXs 6

Scale

lg 24

md 16

screenEdge 20

sm 8

xl 32

xs 4

xxl 48

Typography

IBM Carbon Productive type scale with selectable font families

Values

inter Inter

jetbrainsMono JetBrains Mono

outfit Outfit

poppins Poppins

spaceMono Space Mono

system platform native

Scale

bodyMedium

{
  "lineHeight": 24,
  "size": 16,
  "weight": 400
}

bodySmall

{
  "lineHeight": 20,
  "size": 14,
  "weight": 400
}

caption

{
  "lineHeight": 16,
  "size": 12,
  "weight": 500
}

sectionHeader

{
  "letterSpacing": 1.2,
  "lineHeight": 16,
  "size": 12,
  "weight": 700
}

titleLarge

{
  "lineHeight": 36,
  "size": 30,
  "weight": 700
}

titleMedium

{
  "lineHeight": 30,
  "size": 24,
  "weight": 600
}

titleSmall

{
  "lineHeight": 26,
  "size": 20,
  "weight": 600
}