Contents

Usage

Element
Element
Element

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: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:overlay
color: var(--lns-color-overlay);
c:border
color: var(--lns-color-border);
c:primary
color: var(--lns-color-primary);
c:primaryHover
color: var(--lns-color-primaryHover);
c:primaryActive
color: var(--lns-color-primaryActive);
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:success
color: var(--lns-color-success);
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: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:tabBackground
color: var(--lns-color-tabBackground);
c:upgrade
color: var(--lns-color-upgrade);
c:upgradeHover
color: var(--lns-color-upgradeHover);
c:upgradeActive
color: var(--lns-color-upgradeActive);

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: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:overlay
background-color: var(--lns-color-overlay);
bgc:border
background-color: var(--lns-color-border);
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: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:success
background-color: var(--lns-color-success);
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: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:tabBackground
background-color: var(--lns-color-tabBackground);
bgc:upgrade
background-color: var(--lns-color-upgrade);
bgc:upgradeHover
background-color: var(--lns-color-upgradeHover);
bgc:upgradeActive
background-color: var(--lns-color-upgradeActive);

Text

Size

ClassDeclarations
text:smallfont-size: var(--lns-fontSize-small);
line-height: var(--lns-lineHeight-small);
text:mediumfont-size: var(--lns-fontSize-medium);
line-height: var(--lns-lineHeight-medium);
text:largefont-size: var(--lns-fontSize-large);
line-height: var(--lns-lineHeight-large);
text:xlargefont-size: var(--lns-fontSize-xlarge);
line-height: var(--lns-lineHeight-xlarge);
text:xxlargefont-size: var(--lns-fontSize-xxlarge);
line-height: var(--lns-lineHeight-xxlarge);
text:xxxlargefont-size: var(--lns-fontSize-xxxlarge);
line-height: var(--lns-lineHeight-xxxlarge);

Weight

ClassDeclarations
weight:bookfont-weight: var(--lns-fontWeight-book);
weight:mediumfont-weight: var(--lns-fontWeight-medium);
weight:boldfont-weight: var(--lns-fontWeight-bold);
weight:blackfont-weight: var(--lns-fontWeight-black);

Variant

ClassDeclarations
text:bodyfont-size: var(--lns-fontSize-medium);
line-height: var(--lns-lineHeight-medium);
font-weight: var(--lns-fontWeight-book);
text:titlefont-size: var(--lns-fontSize-large);
line-height: var(--lns-lineHeight-large);
font-weight: var(--lns-fontWeight-bold);
text:mainTitlefont-size: var(--lns-fontSize-xxlarge);
line-height: var(--lns-lineHeight-xxlarge);
font-weight: var(--lns-fontWeight-black);

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);

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

show on xsmall and smaller
show only on small
show only on medium
show on large and up
red on xsmall and smaller
red only on small
red only on medium
red on large and larger

Examples

Layer style

A
B

Typography

Granularization of Incoming Signals
Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

Layout

A
B
C

A
B
C
D
E

Positioning

Relative
Absolute

1

2

3

Sticky

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

Ellipsis

The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.
The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

With components

Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.
The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.