Contents

Usage

Color

Color

ClassDeclarations
c:red
color: var(--lns-color-red);
c:blurpleLight
color: var(--lns-color-blurpleLight);
c:blurpleMedium
color: var(--lns-color-blurpleMedium);
c:blurple
color: var(--lns-color-blurple);
c:blurpleDark
color: var(--lns-color-blurpleDark);
c:offWhite
color: var(--lns-color-offWhite);
c:blueLight
color: var(--lns-color-blueLight);
c:blue
color: var(--lns-color-blue);
c:blueDark
color: var(--lns-color-blueDark);
c:orangeLight
color: var(--lns-color-orangeLight);
c:orange
color: var(--lns-color-orange);
c:orangeDark
color: var(--lns-color-orangeDark);
c:tealLight
color: var(--lns-color-tealLight);
c:teal
color: var(--lns-color-teal);
c:tealDark
color: var(--lns-color-tealDark);
c:yellowLight
color: var(--lns-color-yellowLight);
c:yellow
color: var(--lns-color-yellow);
c:yellowDark
color: var(--lns-color-yellowDark);
c:grey8
color: var(--lns-color-grey8);
c:grey7
color: var(--lns-color-grey7);
c:grey6
color: var(--lns-color-grey6);
c:grey5
color: var(--lns-color-grey5);
c:grey4
color: var(--lns-color-grey4);
c:grey3
color: var(--lns-color-grey3);
c:grey2
color: var(--lns-color-grey2);
c:grey1
color: var(--lns-color-grey1);
c:white
color: var(--lns-color-white);
c:primary
color: var(--lns-color-primary);
c:primaryHover
color: var(--lns-color-primaryHover);
c:primaryActive
color: var(--lns-color-primaryActive);
c:body
color: var(--lns-color-body);
c:bodyDimmed
color: var(--lns-color-bodyDimmed);
c:background
color: var(--lns-color-background);
c:backgroundHover
color: var(--lns-color-backgroundHover);
c:backgroundActive
color: var(--lns-color-backgroundActive);
c:backgroundSecondary
color: var(--lns-color-backgroundSecondary);
c:backgroundSecondary2
color: var(--lns-color-backgroundSecondary2);
c:overlay
color: var(--lns-color-overlay);
c:border
color: var(--lns-color-border);
c:focusRing
color: var(--lns-color-focusRing);
c:record
color: var(--lns-color-record);
c:recordHover
color: var(--lns-color-recordHover);
c:recordActive
color: var(--lns-color-recordActive);
c:info
color: var(--lns-color-info);
c:success
color: var(--lns-color-success);
c:warning
color: var(--lns-color-warning);
c:danger
color: var(--lns-color-danger);
c:dangerHover
color: var(--lns-color-dangerHover);
c:dangerActive
color: var(--lns-color-dangerActive);
c:backdrop
color: var(--lns-color-backdrop);
c:backdropDark
color: var(--lns-color-backdropDark);
c:backdropTwilight
color: var(--lns-color-backdropTwilight);
c:disabledContent
color: var(--lns-color-disabledContent);
c:highlight
color: var(--lns-color-highlight);
c:disabledBackground
color: var(--lns-color-disabledBackground);
c:formFieldBorder
color: var(--lns-color-formFieldBorder);
c:formFieldBackground
color: var(--lns-color-formFieldBackground);
c:buttonBorder
color: var(--lns-color-buttonBorder);
c:upgrade
color: var(--lns-color-upgrade);
c:upgradeHover
color: var(--lns-color-upgradeHover);
c:upgradeActive
color: var(--lns-color-upgradeActive);
c:tabBackground
color: var(--lns-color-tabBackground);
c:discoveryBackground
color: var(--lns-color-discoveryBackground);
c:discoveryLightBackground
color: var(--lns-color-discoveryLightBackground);
c:discoveryTitle
color: var(--lns-color-discoveryTitle);
c:discoveryHighlight
color: var(--lns-color-discoveryHighlight);

Background color

ClassDeclarations
bgc:red
background-color: var(--lns-color-red);
bgc:blurpleLight
background-color: var(--lns-color-blurpleLight);
bgc:blurpleMedium
background-color: var(--lns-color-blurpleMedium);
bgc:blurple
background-color: var(--lns-color-blurple);
bgc:blurpleDark
background-color: var(--lns-color-blurpleDark);
bgc:offWhite
background-color: var(--lns-color-offWhite);
bgc:blueLight
background-color: var(--lns-color-blueLight);
bgc:blue
background-color: var(--lns-color-blue);
bgc:blueDark
background-color: var(--lns-color-blueDark);
bgc:orangeLight
background-color: var(--lns-color-orangeLight);
bgc:orange
background-color: var(--lns-color-orange);
bgc:orangeDark
background-color: var(--lns-color-orangeDark);
bgc:tealLight
background-color: var(--lns-color-tealLight);
bgc:teal
background-color: var(--lns-color-teal);
bgc:tealDark
background-color: var(--lns-color-tealDark);
bgc:yellowLight
background-color: var(--lns-color-yellowLight);
bgc:yellow
background-color: var(--lns-color-yellow);
bgc:yellowDark
background-color: var(--lns-color-yellowDark);
bgc:grey8
background-color: var(--lns-color-grey8);
bgc:grey7
background-color: var(--lns-color-grey7);
bgc:grey6
background-color: var(--lns-color-grey6);
bgc:grey5
background-color: var(--lns-color-grey5);
bgc:grey4
background-color: var(--lns-color-grey4);
bgc:grey3
background-color: var(--lns-color-grey3);
bgc:grey2
background-color: var(--lns-color-grey2);
bgc:grey1
background-color: var(--lns-color-grey1);
bgc:white
background-color: var(--lns-color-white);
bgc:primary
background-color: var(--lns-color-primary);
bgc:primaryHover
background-color: var(--lns-color-primaryHover);
bgc:primaryActive
background-color: var(--lns-color-primaryActive);
bgc:body
background-color: var(--lns-color-body);
bgc:bodyDimmed
background-color: var(--lns-color-bodyDimmed);
bgc:background
background-color: var(--lns-color-background);
bgc:backgroundHover
background-color: var(--lns-color-backgroundHover);
bgc:backgroundActive
background-color: var(--lns-color-backgroundActive);
bgc:backgroundSecondary
background-color: var(--lns-color-backgroundSecondary);
bgc:backgroundSecondary2
background-color: var(--lns-color-backgroundSecondary2);
bgc:overlay
background-color: var(--lns-color-overlay);
bgc:border
background-color: var(--lns-color-border);
bgc:focusRing
background-color: var(--lns-color-focusRing);
bgc:record
background-color: var(--lns-color-record);
bgc:recordHover
background-color: var(--lns-color-recordHover);
bgc:recordActive
background-color: var(--lns-color-recordActive);
bgc:info
background-color: var(--lns-color-info);
bgc:success
background-color: var(--lns-color-success);
bgc:warning
background-color: var(--lns-color-warning);
bgc:danger
background-color: var(--lns-color-danger);
bgc:dangerHover
background-color: var(--lns-color-dangerHover);
bgc:dangerActive
background-color: var(--lns-color-dangerActive);
bgc:backdrop
background-color: var(--lns-color-backdrop);
bgc:backdropDark
background-color: var(--lns-color-backdropDark);
bgc:backdropTwilight
background-color: var(--lns-color-backdropTwilight);
bgc:disabledContent
background-color: var(--lns-color-disabledContent);
bgc:highlight
background-color: var(--lns-color-highlight);
bgc:disabledBackground
background-color: var(--lns-color-disabledBackground);
bgc:formFieldBorder
background-color: var(--lns-color-formFieldBorder);
bgc:formFieldBackground
background-color: var(--lns-color-formFieldBackground);
bgc:buttonBorder
background-color: var(--lns-color-buttonBorder);
bgc:upgrade
background-color: var(--lns-color-upgrade);
bgc:upgradeHover
background-color: var(--lns-color-upgradeHover);
bgc:upgradeActive
background-color: var(--lns-color-upgradeActive);
bgc:tabBackground
background-color: var(--lns-color-tabBackground);
bgc:discoveryBackground
background-color: var(--lns-color-discoveryBackground);
bgc:discoveryLightBackground
background-color: var(--lns-color-discoveryLightBackground);
bgc:discoveryTitle
background-color: var(--lns-color-discoveryTitle);
bgc:discoveryHighlight
background-color: var(--lns-color-discoveryHighlight);

Text

Size

ClassDeclarations
text:smallfont-size: var(--lns-fontSize-small);
line-height: var(--lns-lineHeight-small);
text:body-smfont-size: var(--lns-fontSize-body-sm);
line-height: var(--lns-lineHeight-body-sm);
text:mediumfont-size: var(--lns-fontSize-medium);
line-height: var(--lns-lineHeight-medium);
text:body-mdfont-size: var(--lns-fontSize-body-md);
line-height: var(--lns-lineHeight-body-md);
text:largefont-size: var(--lns-fontSize-large);
line-height: var(--lns-lineHeight-large);
text:body-lgfont-size: var(--lns-fontSize-body-lg);
line-height: var(--lns-lineHeight-body-lg);
text:xlargefont-size: var(--lns-fontSize-xlarge);
line-height: var(--lns-lineHeight-xlarge);
text:heading-smfont-size: var(--lns-fontSize-heading-sm);
line-height: var(--lns-lineHeight-heading-sm);
text:xxlargefont-size: var(--lns-fontSize-xxlarge);
line-height: var(--lns-lineHeight-xxlarge);
text:heading-mdfont-size: var(--lns-fontSize-heading-md);
line-height: var(--lns-lineHeight-heading-md);
text:xxxlargefont-size: var(--lns-fontSize-xxxlarge);
line-height: var(--lns-lineHeight-xxxlarge);
text:heading-lgfont-size: var(--lns-fontSize-heading-lg);
line-height: var(--lns-lineHeight-heading-lg);

Weight

ClassDeclarations
weight:bookfont-weight: var(--lns-fontWeight-book);
weight:boldfont-weight: var(--lns-fontWeight-bold);

Variant

ClassDeclarations
text:bodyfont-size: var(--lns-fontSize-body-md);
line-height: var(--lns-lineHeight-body-md);
font-weight: var(--lns-fontWeight-book);
text:titlefont-size: var(--lns-fontSize-body-lg);
line-height: var(--lns-lineHeight-body-lg);
font-weight: var(--lns-fontWeight-bold);
text:mainTitlefont-size: var(--lns-fontSize-heading-md);
line-height: var(--lns-lineHeight-heading-md);
font-weight: var(--lns-fontWeight-bold);

Alignment

ClassDeclarations
text:lefttext-align: left;
text:righttext-align: right;
text:centertext-align: center;

Shadow

ClassDeclarations
shadow:smallbox-shadow: var(--lns-shadow-small);
shadow:mediumbox-shadow: var(--lns-shadow-medium);
shadow:largebox-shadow: var(--lns-shadow-large);

Radius

ClassDeclarations
radius:mediumborder-radius: var(--lns-radius-medium);
radius:largeborder-radius: var(--lns-radius-large);
radius:xlargeborder-radius: var(--lns-radius-xlarge);
radius:fullborder-radius: var(--lns-radius-full);

Margin

ClassDeclarations
m:0margin: 0;
m:automargin: auto;
m:xsmallmargin: var(--lns-space-xsmall);
m:smallmargin: var(--lns-space-small);
m:mediummargin: var(--lns-space-medium);
m:largemargin: var(--lns-space-large);
m:xlargemargin: var(--lns-space-xlarge);
m:xxlargemargin: var(--lns-space-xxlarge);
mt:0margin-top: 0;
mt:automargin-top: auto;
mt:xsmallmargin-top: var(--lns-space-xsmall);
mt:smallmargin-top: var(--lns-space-small);
mt:mediummargin-top: var(--lns-space-medium);
mt:largemargin-top: var(--lns-space-large);
mt:xlargemargin-top: var(--lns-space-xlarge);
mt:xxlargemargin-top: var(--lns-space-xxlarge);
mb:0margin-bottom: 0;
mb:automargin-bottom: auto;
mb:xsmallmargin-bottom: var(--lns-space-xsmall);
mb:smallmargin-bottom: var(--lns-space-small);
mb:mediummargin-bottom: var(--lns-space-medium);
mb:largemargin-bottom: var(--lns-space-large);
mb:xlargemargin-bottom: var(--lns-space-xlarge);
mb:xxlargemargin-bottom: var(--lns-space-xxlarge);
ml:0margin-left: 0;
ml:automargin-left: auto;
ml:xsmallmargin-left: var(--lns-space-xsmall);
ml:smallmargin-left: var(--lns-space-small);
ml:mediummargin-left: var(--lns-space-medium);
ml:largemargin-left: var(--lns-space-large);
ml:xlargemargin-left: var(--lns-space-xlarge);
ml:xxlargemargin-left: var(--lns-space-xxlarge);
mr:0margin-right: 0;
mr:automargin-right: auto;
mr:xsmallmargin-right: var(--lns-space-xsmall);
mr:smallmargin-right: var(--lns-space-small);
mr:mediummargin-right: var(--lns-space-medium);
mr:largemargin-right: var(--lns-space-large);
mr:xlargemargin-right: var(--lns-space-xlarge);
mr:xxlargemargin-right: var(--lns-space-xxlarge);

Horizontal and vertical

ClassDeclarations
mx:0margin-left: 0;
margin-right: 0;
mx:automargin-left: auto;
margin-right: auto;
mx:xsmallmargin-left: var(--lns-space-xsmall);
margin-right: var(--lns-space-xsmall);
mx:smallmargin-left: var(--lns-space-small);
margin-right: var(--lns-space-small);
mx:mediummargin-left: var(--lns-space-medium);
margin-right: var(--lns-space-medium);
mx:largemargin-left: var(--lns-space-large);
margin-right: var(--lns-space-large);
mx:xlargemargin-left: var(--lns-space-xlarge);
margin-right: var(--lns-space-xlarge);
mx:xxlargemargin-left: var(--lns-space-xxlarge);
margin-right: var(--lns-space-xxlarge);
my:0margin-top: 0;
margin-bottom: 0;
my:automargin-top: auto;
margin-bottom: auto;
my:xsmallmargin-top: var(--lns-space-xsmall);
margin-bottom: var(--lns-space-xsmall);
my:smallmargin-top: var(--lns-space-small);
margin-bottom: var(--lns-space-small);
my:mediummargin-top: var(--lns-space-medium);
margin-bottom: var(--lns-space-medium);
my:largemargin-top: var(--lns-space-large);
margin-bottom: var(--lns-space-large);
my:xlargemargin-top: var(--lns-space-xlarge);
margin-bottom: var(--lns-space-xlarge);
my:xxlargemargin-top: var(--lns-space-xxlarge);
margin-bottom: var(--lns-space-xxlarge);

Padding

ClassDeclarations
p:0padding: 0;
p:xsmallpadding: var(--lns-space-xsmall);
p:smallpadding: var(--lns-space-small);
p:mediumpadding: var(--lns-space-medium);
p:largepadding: var(--lns-space-large);
p:xlargepadding: var(--lns-space-xlarge);
p:xxlargepadding: var(--lns-space-xxlarge);
pt:0padding-top: 0;
pt:xsmallpadding-top: var(--lns-space-xsmall);
pt:smallpadding-top: var(--lns-space-small);
pt:mediumpadding-top: var(--lns-space-medium);
pt:largepadding-top: var(--lns-space-large);
pt:xlargepadding-top: var(--lns-space-xlarge);
pt:xxlargepadding-top: var(--lns-space-xxlarge);
pb:0padding-bottom: 0;
pb:xsmallpadding-bottom: var(--lns-space-xsmall);
pb:smallpadding-bottom: var(--lns-space-small);
pb:mediumpadding-bottom: var(--lns-space-medium);
pb:largepadding-bottom: var(--lns-space-large);
pb:xlargepadding-bottom: var(--lns-space-xlarge);
pb:xxlargepadding-bottom: var(--lns-space-xxlarge);
pl:0padding-left: 0;
pl:xsmallpadding-left: var(--lns-space-xsmall);
pl:smallpadding-left: var(--lns-space-small);
pl:mediumpadding-left: var(--lns-space-medium);
pl:largepadding-left: var(--lns-space-large);
pl:xlargepadding-left: var(--lns-space-xlarge);
pl:xxlargepadding-left: var(--lns-space-xxlarge);
pr:0padding-right: 0;
pr:xsmallpadding-right: var(--lns-space-xsmall);
pr:smallpadding-right: var(--lns-space-small);
pr:mediumpadding-right: var(--lns-space-medium);
pr:largepadding-right: var(--lns-space-large);
pr:xlargepadding-right: var(--lns-space-xlarge);
pr:xxlargepadding-right: var(--lns-space-xxlarge);

Horizontal and vertical

ClassDeclarations
px:0padding-left: 0;
padding-right: 0;
px:xsmallpadding-left: var(--lns-space-xsmall);
padding-right: var(--lns-space-xsmall);
px:smallpadding-left: var(--lns-space-small);
padding-right: var(--lns-space-small);
px:mediumpadding-left: var(--lns-space-medium);
padding-right: var(--lns-space-medium);
px:largepadding-left: var(--lns-space-large);
padding-right: var(--lns-space-large);
px:xlargepadding-left: var(--lns-space-xlarge);
padding-right: var(--lns-space-xlarge);
px:xxlargepadding-left: var(--lns-space-xxlarge);
padding-right: var(--lns-space-xxlarge);
py:0padding-top: 0;
padding-bottom: 0;
py:xsmallpadding-top: var(--lns-space-xsmall);
padding-bottom: var(--lns-space-xsmall);
py:smallpadding-top: var(--lns-space-small);
padding-bottom: var(--lns-space-small);
py:mediumpadding-top: var(--lns-space-medium);
padding-bottom: var(--lns-space-medium);
py:largepadding-top: var(--lns-space-large);
padding-bottom: var(--lns-space-large);
py:xlargepadding-top: var(--lns-space-xlarge);
padding-bottom: var(--lns-space-xlarge);
py:xxlargepadding-top: var(--lns-space-xxlarge);
padding-bottom: var(--lns-space-xxlarge);

Width

ClassDeclarations
width:autowidth: auto;
width:fullwidth: 100%;
width:0width: 0;

Min width

ClassDeclarations
minWidth:0min-width: 0;

Height

ClassDeclarations
height:autoheight: auto;
height:fullheight: 100%;
height:0height: 0;

Border

ClassDeclarations
borderborder: 1px solid var(--lns-color-border);
borderTopborder-top: 1px solid var(--lns-color-border);
borderBottomborder-bottom: 1px solid var(--lns-color-border);
borderLeftborder-left: 1px solid var(--lns-color-border);
borderRightborder-right: 1px solid var(--lns-color-border);

Display

ClassDeclarations
inlinedisplay: inline;
blockdisplay: block;
flexdisplay: flex;
inlineBlockdisplay: inline-block;
inlineFlexdisplay: inline-flex;
nonedisplay: none;

Flex

Wrap

ClassDeclarations
flexWrapflex-wrap: wrap;

Flex direction

ClassDeclarations
flexDirection:columnflex-direction: column;
flexDirection:rowflex-direction: row;

Flex item

ClassDeclarations
items:stretchalign-items: stretch;
items:centeralign-items: center;
items:baselinealign-items: baseline;
items:flexStartalign-items: flex-start;
items:flexEndalign-items: flex-end;
items:selfStartalign-items: self-start;
items:selfEndalign-items: self-end;

Justify content

ClassDeclarations
justify:flexStartjustify-content: flex-start;
justify:flexEndjustify-content: flex-end;
justify:centerjustify-content: center;
justify:spaceBetweenjustify-content: space-between;
justify:spaceAroundjustify-content: space-around;
justify:spaceEvenlyjustify-content: space-evenly;

Grow

ClassDeclarations
grow:0flex-grow: 0;
grow:1flex-grow: 1;

Shrink

ClassDeclarations
shrink:0flex-shrink: 0;
shrink:1flex-shrink: 1;

Align self

ClassDeclarations
self:autoalign-self: auto;
self:flexStartalign-self: flex-start;
self:flexEndalign-self: flex-end;
self:centeralign-self: center;
self:baselinealign-self: baseline;
self:stretchalign-self: stretch;

Overflow

ClassDeclarations
overflow:hiddenoverflow: hidden;
overflow:autooverflow: auto;

Position

ClassDeclarations
relativeposition: relative;
absoluteposition: absolute;
stickyposition: sticky;
fixedposition: fixed;

Sides

ClassDeclarations
top:0top: 0;
top:autotop: auto;
top:xsmalltop: var(--lns-space-xsmall);
top:smalltop: var(--lns-space-small);
top:mediumtop: var(--lns-space-medium);
top:largetop: var(--lns-space-large);
top:xlargetop: var(--lns-space-xlarge);
top:xxlargetop: var(--lns-space-xxlarge);
bottom:0bottom: 0;
bottom:autobottom: auto;
bottom:xsmallbottom: var(--lns-space-xsmall);
bottom:smallbottom: var(--lns-space-small);
bottom:mediumbottom: var(--lns-space-medium);
bottom:largebottom: var(--lns-space-large);
bottom:xlargebottom: var(--lns-space-xlarge);
bottom:xxlargebottom: var(--lns-space-xxlarge);
left:0left: 0;
left:autoleft: auto;
left:xsmallleft: var(--lns-space-xsmall);
left:smallleft: var(--lns-space-small);
left:mediumleft: var(--lns-space-medium);
left:largeleft: var(--lns-space-large);
left:xlargeleft: var(--lns-space-xlarge);
left:xxlargeleft: var(--lns-space-xxlarge);
right:0right: 0;
right:autoright: auto;
right:xsmallright: var(--lns-space-xsmall);
right:smallright: var(--lns-space-small);
right:mediumright: var(--lns-space-medium);
right:largeright: var(--lns-space-large);
right:xlargeright: var(--lns-space-xlarge);
right:xxlargeright: var(--lns-space-xxlarge);

Ellipsis

ClassDeclarations
ellipsisoverflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Accessibility

ClassDeclarations
srOnlyposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

Responsive

Syntax

Use any of the CSS utility classes with a breakpoint prefix.

// structure
PREFIX-CLASS
// examples
md-c:red
lg-c:primary
sm-mr:medium
md-mr:large
xs-block
sm-flex
PrefixMin width
xs-@media(min-width: 31em)
sm-@media(min-width: 48em)
md-@media(min-width: 64em)
lg-@media(min-width: 75em)

Usage

<div className="mr:medium md-mr:large lg-mr:xlarge">demo</div>

Demo

Examples

Layer style

Typography

Layout


Positioning


Ellipsis

With components