Introducing Clair Music
The Community Practice App.
Clair
Music
Spaces
Support
About
Pricing
Contact
Join the Beta
Home
Contact
Brand
Text
Objects
Icons
Borders
Background
Effects
Spacing
Layout
Brand
Mission
Our mission is to help musicians love their practice.
Copy
Vision
Our vision is to harmonize music and community through technology.
Copy
Company Values
Details
Simple
Frictionless
Copy
ruby-red
Copy
#e32f4a
Hex
Iolite
Copy
#6236ff
Hex
amethyst
Copy
#b620e0
Hex
amber
Copy
#fa6400
Hex
citrine
Copy
#f7b500
Hex
emerald
Copy
#6dd400
Hex
amazonite
Copy
#44d7b6
Hex
apatite
Copy
#32c5ff
Hex
sapphire
Copy
#0e7aff
Hex
midnight-blue
Copy
#0a2c6d
Hex
overlays
Copy
#282828
Hex
white-smoke
Copy
#f1f1f1
Hex
black
Copy
#000000
Hex
white
Copy
#ffffff
Hex
midnight
Copy
#1c2128
Hex
Text
Title
Copy
Headers
Marketting Pages
H1
Copy
Headers
Main Headers
H2
Copy
Headers
Secondary Headers
H3
Copy
Headers
...
H4
Copy
Headers
...
H5
Copy
Headers
...
H6
Copy
Headers
...
h0-bold
Copy
Span Text
Bold text in the middle of a paragraph
gradient-text-bg
Copy
Gradients
Bold text in the middle of a paragraph
Objects
Button
Clickable
Copy
button
"Clicked" Button!
Clickable
Copy
.button.clicked
Dark Button
Clickable
Copy
.button.clicked
Icons
Copy
<div class="fa-3x">
<i class="fa-solid fa-arrow-right"
</i></div>
Copy
<div class="fa-3x">
<i class="fa-solid fa-arrow-up-from-bracket"></i>
</div>
Layout
Flex
-
Copy
Flex
center
Copy
abs
abs-btm-right
Copy
abs
abs-top-right
Copy
Flex
abs-btm-left
Copy
Borders
Borders
Copy
rounded-corners
Borders
Copy
+small
Borders
Copy
+large
Borders
Copy
top-border-mobile
Colros
Color
Copy
white-smoke
Color
Copy
green
Color
Copy
blue
Color
Copy
yellow
Color
Copy
red
Spacing
Spacing
clair-margin
Copy
Spacing
clair-padding
Copy
Spacing
margin-10px-all
Copy
Spacing
10-px
Copy