Variables
Variables from Harness UI Design System
Breakpoint
Breakpoint Variables
Variable Name | Value |
|---|---|
--cn-comp-dialog-title | 450 1.25rem/1.5625rem Inter, system-ui, sans-serif |
--cn-comp-link-default | 400 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-comp-link-default-underline | 400 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-comp-link-sm | 450 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-comp-link-sm-underline | 450 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-comp-markdown-title-h1 | 450 1.75rem/2.499rem Inter, system-ui, sans-serif |
--cn-comp-markdown-title-h2 | 450 1.5rem/2.25rem Inter, system-ui, sans-serif |
--cn-comp-markdown-title-h3 | 450 1.25rem/1.5rem Inter, system-ui, sans-serif |
--cn-comp-markdown-content-lead | 400 1.25rem/1.875rem Inter, system-ui, sans-serif |
--cn-comp-markdown-content-paragraph | 400 1rem/1.625rem Inter, system-ui, sans-serif |
--cn-comp-markdown-content-emphasized | 450 1rem/1.625rem Inter, system-ui, sans-serif |
--cn-comp-markdown-sm-title-h1 | 450 1.125rem/1.6065rem Inter, system-ui, sans-serif |
--cn-comp-markdown-sm-title-h2 | 450 1rem/1.5rem Inter, system-ui, sans-serif |
--cn-comp-markdown-sm-title-h3 | 550 0.875rem/1.3125rem Inter, system-ui, sans-serif |
--cn-comp-markdown-sm-content-paragraph | 400 0.875rem/1.4219rem Inter, system-ui, sans-serif |
--cn-comp-markdown-sm-content-emphasized | 450 0.875rem/1.4219rem Inter, system-ui, sans-serif |
--cn-comp-markdown-xs-title-h1 | 450 1rem/1.428rem Inter, system-ui, sans-serif |
--cn-comp-markdown-xs-title-h2 | 450 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-comp-markdown-xs-title-h3 | 550 0.813rem/1.2195rem Inter, system-ui, sans-serif |
--cn-comp-markdown-xs-content-paragraph | 400 0.813rem/1.2195rem Inter, system-ui, sans-serif |
--cn-comp-markdown-xs-content-emphasized | 450 0.813rem/1.2195rem Inter, system-ui, sans-serif |
--cn-breakpoint-viewport | 1440 |
--cn-breakpoint-viewport-min | 1080 |
--cn-breakpoint-viewport-max | 1919 |
--cn-container-spacing-px | 24px |
--cn-container-spacing-py | 20px |
--cn-heading-hero | 450 1.75rem/2.1875rem Inter, system-ui, sans-serif |
--cn-heading-section | 400 1.5rem/2.142rem Inter, system-ui, sans-serif |
--cn-heading-subsection | 400 1.125rem/1.6065rem Inter, system-ui, sans-serif |
--cn-heading-base | 400 1rem/1.25rem Inter, system-ui, sans-serif |
--cn-heading-small | 450 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-normal | 400 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-normal-line-through | 400 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-strong | 450 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-code | 300 0.813rem/1.2195rem 'JetBrains Mono', monospace |
--cn-body-light | 350 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-single-line-code | 350 0.813rem/0.9268rem 'JetBrains Mono', monospace |
--cn-body-single-line-normal | 400 0.875rem/0.9975rem Inter, system-ui, sans-serif |
--cn-body-single-line-strong | 450 0.875rem/0.9975rem Inter, system-ui, sans-serif |
--cn-body-single-line-light | 350 0.875rem/0.9975rem Inter, system-ui, sans-serif |
--cn-caption-normal | 400 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-strong | 450 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-code | 400 0.788rem/1.1253rem 'JetBrains Mono', monospace |
--cn-caption-light | 350 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-single-line-normal | 400 0.813rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-normal-caps | 400 0.788rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-strong | 450 0.813rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-code | 450 0.788rem/0.8983rem 'JetBrains Mono', monospace |
--cn-caption-single-line-light | 350 0.813rem/0.9268rem Inter, system-ui, sans-serif |
--cn-layout-4xs | 2px |
--cn-layout-3xs | 4px |
--cn-layout-2xs | 6px |
--cn-layout-xs | 8px |
--cn-layout-sm | 12px |
--cn-layout-md | 16px |
--cn-layout-lg | 20px |
--cn-layout-xl | 24px |
--cn-layout-2xl | 32px |
--cn-layout-3xl | 40px |
--cn-layout-4xl | 80px |
--cn-micro-normal | 450 0.719rem/1.0785rem Inter, system-ui, sans-serif |
Colors
Pure Colors
Variable Name | Value |
|---|---|
--cn-pure-white | lch(100% 0 0) |
--cn-pure-black | lch(5% 1.5 270) |
Typography
Letter Spacing
Variable Name | Value |
|---|---|
--cn-tracking-tighter | -0.05em |
--cn-tracking-tight | -0.02em |
--cn-tracking-normal | 0em |
--cn-tracking-wide | 0.025em |
--cn-tracking-wider | 0.05em |
--cn-tracking-widest | 0.1em |
Font Weight
Variable Name | Value |
|---|---|
--cn-font-weight-default-normal-100 | 100 |
--cn-font-weight-default-normal-200 | 200 |
--cn-font-weight-default-normal-300 | 350 |
--cn-font-weight-default-normal-400 | 400 |
--cn-font-weight-default-normal-500 | 450 |
--cn-font-weight-default-normal-600 | 550 |
--cn-font-weight-default-normal-700 | 700 |
--cn-font-weight-default-normal-800 | 800 |
--cn-font-weight-default-normal-900 | 900 |
--cn-font-weight-default-italic-100-weight | 100 |
--cn-font-weight-default-italic-100-style | italic |
--cn-font-weight-default-italic-200-weight | 200 |
--cn-font-weight-default-italic-200-style | italic |
--cn-font-weight-default-italic-300-weight | 300 |
--cn-font-weight-default-italic-300-style | italic |
--cn-font-weight-default-italic-400-weight | 400 |
--cn-font-weight-default-italic-400-style | italic |
--cn-font-weight-default-italic-500-weight | 500 |
--cn-font-weight-default-italic-500-style | italic |
--cn-font-weight-default-italic-600-weight | 600 |
--cn-font-weight-default-italic-600-style | italic |
--cn-font-weight-default-italic-700-weight | 700 |
--cn-font-weight-default-italic-700-style | italic |
--cn-font-weight-default-italic-800-weight | 800 |
--cn-font-weight-default-italic-800-style | italic |
--cn-font-weight-default-italic-900-weight | 900 |
--cn-font-weight-default-italic-900-style | italic |
--cn-font-weight-mono-normal-100 | 100 |
--cn-font-weight-mono-normal-200 | 200 |
--cn-font-weight-mono-normal-300 | 300 |
--cn-font-weight-mono-normal-400 | 400 |
--cn-font-weight-mono-normal-500 | 500 |
--cn-font-weight-mono-normal-700 | 700 |
--cn-font-weight-mono-normal-800 | 800 |
--cn-font-weight-mono-italic-100-weight | 100 |
--cn-font-weight-mono-italic-100-style | italic |
--cn-font-weight-mono-italic-200-weight | 200 |
--cn-font-weight-mono-italic-200-style | italic |
--cn-font-weight-mono-italic-300-weight | 300 |
--cn-font-weight-mono-italic-300-style | italic |
--cn-font-weight-mono-italic-400-weight | 400 |
--cn-font-weight-mono-italic-400-style | italic |
--cn-font-weight-mono-italic-500-weight | 500 |
--cn-font-weight-mono-italic-500-style | italic |
--cn-font-weight-mono-italic-700-weight | 700 |
--cn-font-weight-mono-italic-700-style | italic |
--cn-font-weight-mono-italic-800-weight | 800 |
--cn-font-weight-mono-italic-800-style | italic |
Font Family
Variable Name | Value |
|---|---|
--cn-font-family-default | Inter, system-ui, sans-serif |
--cn-font-family-mono | 'JetBrains Mono', monospace |
Text Decoration
Variable Name | Value |
|---|---|
--cn-text-decoration-none | none |
--cn-text-decoration-underline | underline |
--cn-text-decoration-line-through | line-through |
Text Case
Variable Name | Value |
|---|---|
--cn-text-case-none | none |
--cn-text-case-uppercase | uppercase |
--cn-text-case-lowercase | lowercase |
--cn-text-case-capitalize | capitalize |
Font Size
Variable Name | Value |
|---|---|
--cn-font-size-0 | 0.55rem |
--cn-font-size-1 | 0.641rem |
--cn-font-size-2 | 0.719rem |
--cn-font-size-3 | 0.788rem |
--cn-font-size-4 | 0.813rem |
--cn-font-size-5 | 0.875rem |
--cn-font-size-6 | 1rem |
--cn-font-size-7 | 1.125rem |
--cn-font-size-8 | 1.25rem |
--cn-font-size-9 | 1.5rem |
--cn-font-size-10 | 1.75rem |
--cn-font-size-11 | 2.25rem |
--cn-font-size-12 | 3rem |
--cn-font-size-13 | 3.75rem |
--cn-font-size-14 | 4.5rem |
--cn-font-size-15 | 6rem |
--cn-font-size-16 | 8rem |
Line Height
Variable Name | Value |
|---|---|
--cn-line-height-0-none | 0.627rem |
--cn-line-height-0-tight | 0.6875rem |
--cn-line-height-0-snug | 0.7854rem |
--cn-line-height-0-normal | 0.825rem |
--cn-line-height-0-relaxed | 0.8938rem |
--cn-line-height-0-loose | 0.9625rem |
--cn-line-height-1-none | 0.7307rem |
--cn-line-height-1-tight | 0.8013rem |
--cn-line-height-1-snug | 0.9153rem |
--cn-line-height-1-normal | 0.9615rem |
--cn-line-height-1-relaxed | 1.0416rem |
--cn-line-height-1-loose | 1.1218rem |
--cn-line-height-2-none | 0.8197rem |
--cn-line-height-2-tight | 0.8987rem |
--cn-line-height-2-snug | 1.0267rem |
--cn-line-height-2-normal | 1.0785rem |
--cn-line-height-2-relaxed | 1.1684rem |
--cn-line-height-2-loose | 1.2582rem |
--cn-line-height-3-none | 0.8983rem |
--cn-line-height-3-tight | 0.985rem |
--cn-line-height-3-snug | 1.1253rem |
--cn-line-height-3-normal | 1.182rem |
--cn-line-height-3-relaxed | 1.2805rem |
--cn-line-height-3-loose | 1.379rem |
--cn-line-height-4-none | 0.9268rem |
--cn-line-height-4-tight | 1.0162rem |
--cn-line-height-4-snug | 1.161rem |
--cn-line-height-4-normal | 1.2195rem |
--cn-line-height-4-relaxed | 1.3211rem |
--cn-line-height-4-loose | 1.4227rem |
--cn-line-height-5-none | 0.9975rem |
--cn-line-height-5-tight | 1.0938rem |
--cn-line-height-5-snug | 1.2495rem |
--cn-line-height-5-normal | 1.3125rem |
--cn-line-height-5-relaxed | 1.4219rem |
--cn-line-height-5-loose | 1.5313rem |
--cn-line-height-6-none | 1.14rem |
--cn-line-height-6-tight | 1.25rem |
--cn-line-height-6-snug | 1.428rem |
--cn-line-height-6-normal | 1.5rem |
--cn-line-height-6-relaxed | 1.625rem |
--cn-line-height-6-loose | 1.75rem |
--cn-line-height-7-none | 1.2825rem |
--cn-line-height-7-tight | 1.4063rem |
--cn-line-height-7-snug | 1.6065rem |
--cn-line-height-7-normal | 1.6875rem |
--cn-line-height-7-relaxed | 1.8281rem |
--cn-line-height-7-loose | 1.9688rem |
--cn-line-height-8-none | 1.425rem |
--cn-line-height-8-tight | 1.5625rem |
--cn-line-height-8-snug | 1.785rem |
--cn-line-height-8-normal | 1.875rem |
--cn-line-height-8-relaxed | 2.0313rem |
--cn-line-height-8-loose | 2.1875rem |
--cn-line-height-9-none | 1.71rem |
--cn-line-height-9-tight | 1.875rem |
--cn-line-height-9-snug | 2.142rem |
--cn-line-height-9-normal | 2.25rem |
--cn-line-height-9-relaxed | 2.4375rem |
--cn-line-height-9-loose | 2.625rem |
--cn-line-height-10-none | 1.995rem |
--cn-line-height-10-tight | 2.1875rem |
--cn-line-height-10-snug | 2.499rem |
--cn-line-height-10-normal | 2.625rem |
--cn-line-height-10-relaxed | 2.8438rem |
--cn-line-height-10-loose | 3.0625rem |
--cn-line-height-11-none | 2.565rem |
--cn-line-height-11-tight | 2.8125rem |
--cn-line-height-11-snug | 3.213rem |
--cn-line-height-11-normal | 3.375rem |
--cn-line-height-11-relaxed | 3.6563rem |
--cn-line-height-11-loose | 3.9375rem |
--cn-line-height-12-none | 3.42rem |
--cn-line-height-12-tight | 3.75rem |
--cn-line-height-12-snug | 4.284rem |
--cn-line-height-12-normal | 4.5rem |
--cn-line-height-12-relaxed | 4.875rem |
--cn-line-height-12-loose | 5.25rem |
--cn-line-height-13-none | 4.275rem |
--cn-line-height-13-tight | 4.6875rem |
--cn-line-height-13-snug | 5.355rem |
--cn-line-height-13-normal | 5.625rem |
--cn-line-height-13-relaxed | 6.0938rem |
--cn-line-height-13-loose | 6.5625rem |
--cn-line-height-14-none | 5.13rem |
--cn-line-height-14-tight | 5.625rem |
--cn-line-height-14-snug | 6.426rem |
--cn-line-height-14-normal | 6.75rem |
--cn-line-height-14-relaxed | 7.3125rem |
--cn-line-height-14-loose | 7.875rem |
--cn-line-height-15-none | 6.84rem |
--cn-line-height-15-tight | 7.5rem |
--cn-line-height-15-snug | 8.568rem |
--cn-line-height-15-normal | 9rem |
--cn-line-height-15-relaxed | 9.75rem |
--cn-line-height-15-loose | 10.5rem |
--cn-line-height-16-none | 9.12rem |
--cn-line-height-16-tight | 10rem |
--cn-line-height-16-snug | 11.424rem |
--cn-line-height-16-normal | 12rem |
--cn-line-height-16-relaxed | 13rem |
--cn-line-height-16-loose | 14rem |
--cn-line-height-multiplier-none | 1.14 |
--cn-line-height-multiplier-tight | 1.25 |
--cn-line-height-multiplier-snug | 1.428 |
--cn-line-height-multiplier-normal | 1.5 |
--cn-line-height-multiplier-relaxed | 1.625 |
--cn-line-height-multiplier-loose | 1.75 |
Sizing
Size Variables
Variable Name | Value |
|---|---|
--cn-size-0 | 0px |
--cn-size-1 | 4px |
--cn-size-2 | 8px |
--cn-size-3 | 12px |
--cn-size-4 | 16px |
--cn-size-5 | 20px |
--cn-size-6 | 24px |
--cn-size-7 | 28px |
--cn-size-8 | 32px |
--cn-size-9 | 36px |
--cn-size-10 | 40px |
--cn-size-11 | 44px |
--cn-size-12 | 48px |
--cn-size-13 | 52px |
--cn-size-14 | 56px |
--cn-size-15 | 60px |
--cn-size-16 | 64px |
--cn-size-17 | 68px |
--cn-size-18 | 72px |
--cn-size-19 | 76px |
--cn-size-20 | 80px |
--cn-size-21 | 84px |
--cn-size-22 | 88px |
--cn-size-23 | 92px |
--cn-size-24 | 96px |
--cn-size-25 | 98px |
--cn-size-26 | 104px |
--cn-size-27 | 108px |
--cn-size-28 | 112px |
--cn-size-29 | 116px |
--cn-size-30 | 120px |
--cn-size-31 | 124px |
--cn-size-32 | 128px |
--cn-size-33 | 132px |
--cn-size-34 | 136px |
--cn-size-35 | 140px |
--cn-size-36 | 144px |
--cn-size-37 | 148px |
--cn-size-38 | 152px |
--cn-size-39 | 156px |
--cn-size-40 | 160px |
--cn-size-41 | 164px |
--cn-size-42 | 168px |
--cn-size-43 | 172px |
--cn-size-44 | 176px |
--cn-size-45 | 180px |
--cn-size-46 | 184px |
--cn-size-47 | 188px |
--cn-size-48 | 192px |
--cn-size-49 | 196px |
--cn-size-50 | 200px |
--cn-size-51 | 204px |
--cn-size-52 | 208px |
--cn-size-53 | 212px |
--cn-size-54 | 216px |
--cn-size-55 | 220px |
--cn-size-56 | 224px |
--cn-size-57 | 228px |
--cn-size-58 | 230px |
--cn-size-59 | 236px |
--cn-size-60 | 240px |
--cn-size-61 | 244px |
--cn-size-62 | 248px |
--cn-size-63 | 252px |
--cn-size-64 | 256px |
--cn-size-65 | 260px |
--cn-size-66 | 264px |
--cn-size-67 | 268px |
--cn-size-68 | 272px |
--cn-size-69 | 276px |
--cn-size-70 | 280px |
--cn-size-71 | 284px |
--cn-size-72 | 288px |
--cn-size-73 | 292px |
--cn-size-74 | 296px |
--cn-size-75 | 300px |
--cn-size-76 | 304px |
--cn-size-77 | 308px |
--cn-size-78 | 312px |
--cn-size-79 | 316px |
--cn-size-80 | 320px |
--cn-size-81 | 324px |
--cn-size-82 | 328px |
--cn-size-83 | 332px |
--cn-size-84 | 336px |
--cn-size-85 | 340px |
--cn-size-86 | 344px |
--cn-size-87 | 348px |
--cn-size-88 | 352px |
--cn-size-89 | 356px |
--cn-size-90 | 360px |
--cn-size-91 | 364px |
--cn-size-92 | 368px |
--cn-size-93 | 372px |
--cn-size-94 | 376px |
--cn-size-95 | 380px |
--cn-size-96 | 384px |
--cn-size-px | 1px |
--cn-size-half | 2px |
--cn-size-1-half | 6px |
--cn-size-2-half | 10px |
--cn-size-3-half | 14px |
--cn-size-4-half | 18px |
--cn-size-5-half | 22px |
--cn-size-6-half | 26px |
--cn-size-7-half | 30px |
--cn-size-8-half | 34px |
--cn-size-9-half | 38px |
--cn-size-10-half | 42px |
--cn-size-11-half | 46px |
--cn-size-12-half | 50px |
Spacing Variables
Variable Name | Value |
|---|---|
--cn-spacing-0 | 0px |
--cn-spacing-1 | 4px |
--cn-spacing-2 | 8px |
--cn-spacing-3 | 12px |
--cn-spacing-4 | 16px |
--cn-spacing-5 | 20px |
--cn-spacing-6 | 24px |
--cn-spacing-7 | 28px |
--cn-spacing-8 | 32px |
--cn-spacing-9 | 36px |
--cn-spacing-10 | 40px |
--cn-spacing-11 | 44px |
--cn-spacing-12 | 48px |
--cn-spacing-13 | 52px |
--cn-spacing-14 | 56px |
--cn-spacing-15 | 60px |
--cn-spacing-16 | 64px |
--cn-spacing-17 | 68px |
--cn-spacing-18 | 72px |
--cn-spacing-19 | 76px |
--cn-spacing-20 | 80px |
--cn-spacing-21 | 84px |
--cn-spacing-22 | 88px |
--cn-spacing-23 | 92px |
--cn-spacing-24 | 96px |
--cn-spacing-26 | 104px |
--cn-spacing-28 | 112px |
--cn-spacing-30 | 120px |
--cn-spacing-32 | 128px |
--cn-spacing-34 | 136px |
--cn-spacing-36 | 144px |
--cn-spacing-38 | 152px |
--cn-spacing-40 | 160px |
--cn-spacing-42 | 168px |
--cn-spacing-44 | 176px |
--cn-spacing-46 | 184px |
--cn-spacing-48 | 192px |
--cn-spacing-50 | 200px |
--cn-spacing-52 | 208px |
--cn-spacing-54 | 216px |
--cn-spacing-56 | 224px |
--cn-spacing-58 | 232px |
--cn-spacing-60 | 240px |
--cn-spacing-62 | 248px |
--cn-spacing-64 | 256px |
--cn-spacing-66 | 264px |
--cn-spacing-68 | 272px |
--cn-spacing-70 | 280px |
--cn-spacing-72 | 288px |
--cn-spacing-74 | 296px |
--cn-spacing-76 | 304px |
--cn-spacing-78 | 312px |
--cn-spacing-80 | 320px |
--cn-spacing-82 | 328px |
--cn-spacing-84 | 336px |
--cn-spacing-86 | 344px |
--cn-spacing-88 | 352px |
--cn-spacing-90 | 360px |
--cn-spacing-92 | 368px |
--cn-spacing-94 | 376px |
--cn-spacing-96 | 384px |
--cn-spacing-px | 1px |
--cn-spacing-half | 2px |
--cn-spacing-1-half | 6px |
--cn-spacing-2-half | 10px |
--cn-spacing-3-half | 14px |
--cn-spacing-4-half | 18px |
--cn-spacing-5-half | 22px |
--cn-spacing-6-half | 26px |
--cn-spacing-7-half | 30px |
--cn-spacing-8-half | 34px |
--cn-spacing-9-half | 38px |
--cn-spacing-10-half | 42px |
--cn-spacing-11-half | 46px |
--cn-spacing-12-half | 50px |
Border Width
Variable Name | Value |
|---|---|
--cn-border-width-0 | 0rem |
--cn-border-width-1 | 1px |
--cn-border-width-2 | 2px |
--cn-border-width-4 | 4px |
--cn-border-width-8 | 8px |
Border Radius
Variable Name | Value |
|---|---|
--cn-rounded-1 | 2px |
--cn-rounded-2 | 4px |
--cn-rounded-3 | 6px |
--cn-rounded-4 | 8px |
--cn-rounded-5 | 12px |
--cn-rounded-6 | 16px |
--cn-rounded-7 | 24px |
--cn-rounded-px | 1px |
--cn-rounded-none | 0px |
--cn-rounded-full | 9999px |
Icon Size
Variable Name | Value |
|---|---|
--cn-icon-size-2xs | 12px |
--cn-icon-size-xs | 14px |
--cn-icon-size-sm | 16px |
--cn-icon-size-md | 18px |
--cn-icon-size-lg | 22px |
--cn-icon-size-xl | 32px |
Logo Size
Variable Name | Value |
|---|---|
--cn-logo-size-xs | 20px |
--cn-logo-size-sm | 24px |
--cn-logo-size-md | 32px |
--cn-logo-size-lg | 44px |
Effects
Opacity
Variable Name | Value |
|---|---|
--cn-opacity-5 | 0.05 |
--cn-opacity-10 | 0.1 |
--cn-opacity-20 | 0.2 |
--cn-opacity-30 | 0.3 |
--cn-opacity-40 | 0.4 |
--cn-opacity-50 | 0.5 |
--cn-opacity-60 | 0.6 |
--cn-opacity-70 | 0.7 |
--cn-opacity-80 | 0.8 |
--cn-opacity-90 | 0.9 |
--cn-opacity-100 | 1 |