Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
<img class="prismea-landingpage-author-picture" src="https://placeimg.com/100/100/animals"/>
img.prismea-landingpage-author-picture(src='https://placeimg.com/100/100/animals')
<a class="branding-link font-weight-medium">Lorem ipsum dolor</a><a class="branding-link branding-link--secondary font-weight-normal">Lorem ipsum dolor</a>
a.branding-link.font-weight-medium Lorem ipsum dolor
a.branding-link.branding-link--secondary.font-weight-normal Lorem ipsum dolor
<p class="branding-text-xs color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-sm color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-md color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-lg color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-xl color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-xxl color-grey--700">Lorem ipsum dolor sit amet
</p>
p.branding-text-xs.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text-sm.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text-md.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text-lg.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text-xl.color-grey--700.
Lorem ipsum dolor sit amet
p.branding-text-xxl.color-grey--700.
Lorem ipsum dolor sit amet
<h1 class="branding-title-1 color-grey--800">Lorem ipsum dolor sit amet
</h1>
<h2 class="branding-title-2 color-grey--800">Lorem ipsum dolor sit amet
</h2>
<h3 class="branding-title-3 color-grey--800">Lorem ipsum dolor sit amet
</h3>
<h4 class="branding-title-4 color-grey--800">Lorem ipsum dolor sit amet
</h4>
h1.branding-title-1.color-grey--800.
Lorem ipsum dolor sit amet
h2.branding-title-2.color-grey--800.
Lorem ipsum dolor sit amet
h3.branding-title-3.color-grey--800.
Lorem ipsum dolor sit amet
h4.branding-title-4.color-grey--800.
Lorem ipsum dolor sit amet
<div class="embed-video">
<iframe src="https://www.youtube.com/embed/9YffrCViTVk" title="YouTube video player"></iframe>
</div>
.embed-video
iframe(src='https://www.youtube.com/embed/9YffrCViTVk', title='YouTube video player')
Colors used in the landing page design.
<p class="prismea-color">black text</p>
<p class="prismea-color -color-primary-500">primary-500 text</p>
<p class="prismea-color -color-secondary">secondary text</p>
<p class="prismea-color -color-white">white text</p>
<p class="prismea-color -color-grey-100">grey-100 text</p>
<p class="prismea-color -color-grey-200">grey-200 text</p>
<p class="prismea-color -color-grey-600">grey-600 text</p>
<p class="prismea-color -color-grey-700">grey-700 text</p>
p.prismea-color black text
p.prismea-color.-color-primary-500 primary-500 text
p.prismea-color.-color-secondary secondary text
p.prismea-color.-color-white white text
p.prismea-color.-color-grey-100 grey-100 text
p.prismea-color.-color-grey-200 grey-200 text
p.prismea-color.-color-grey-600 grey-600 text
p.prismea-color.-color-grey-700 grey-700 text
Branding Icons, design system icons extension.
<table style="width: 200px;">
<thead>
<tr>
<th colspan="2">40x40</th>
<th colspan="2">32x32</th>
<th colspan="2">24x24</th>
<th colspan="2">16x16</th>
</tr>
<tr>
<th>Bold</th>
<th>Line</th>
<th>Bold</th>
<th>Line</th>
<th>Bold</th>
<th>Line</th>
<th>Bold</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<svg class="icon-24">
<use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<svg class="icon-32">
<use href="/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32"></use>
</svg>
</td>
<td></td>
<td>
<svg class="icon-24">
<use href="/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<svg class="icon-32">
<use href="/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32"></use>
</svg>
</td>
<td></td>
<td>
<svg class="icon-24">
<use href="/projects/landingpage/svg/24x24/bold/instagram.svg#instagram-bold-24"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<svg class="icon-32">
<use href="/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32"></use>
</svg>
</td>
<td></td>
<td>
<svg class="icon-24">
<use href="/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<svg class="icon-32">
<use href="/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32"></use>
</svg>
</td>
<td></td>
<td>
<svg class="icon-24">
<use href="/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<svg class="icon-16">
<use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
</svg>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<svg class="icon-32">
<use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
</svg>
</td>
</tr>
</tbody>
</table>
table(style='width: 200px;')
thead
tr
th(colspan='2') 40x40
th(colspan='2') 32x32
th(colspan='2') 24x24
th(colspan='2') 16x16
tr
th Bold
th Line
th Bold
th Line
th Bold
th Line
th Bold
th Line
tbody
tr
td
td
td
td
td
svg.icon-24
use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
tr
td
td
td
svg.icon-32
use(href='/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32')
td
td
svg.icon-24
use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
tr
td
td
td
svg.icon-32
use(href='/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32')
td
td
svg.icon-24
use(href='/projects/landingpage/svg/24x24/bold/instagram.svg#instagram-bold-24')
tr
td
td
td
svg.icon-32
use(href='/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32')
td
td
svg.icon-24
use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')
tr
td
td
td
svg.icon-32
use(href='/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32')
td
td
svg.icon-24
use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
tr
td
td
td
td
td
td
td
svg.icon-16
use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
tr
td
td
td
svg.icon-32
use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
You can use the following variants:
-x1
, -x2
, -x3
, -x4
-color-primary-500
, -color-white
-circle
and -primary-500
, -white
, etc.<i class="prismea-icon prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x1 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x2 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x4 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-primary-500"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-secondary"></i>
<div style="background-color: #30aca3;"><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-white"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-white-opacity-70"></i>
</div><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea -color-white -circle -primary-500"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea -color-white -rounded -primary-500"></i>
i.prismea-icon.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x1.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x2.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x4.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-primary-500
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-secondary
div(style='background-color: #30aca3;')
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-white
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-white-opacity-70
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea.-color-white.-circle.-primary-500
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea.-color-white.-rounded.-primary-500
<div class="list">
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
</div>
<ul class="checklist">
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
</ul>
.list
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
ul.checklist
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet
You can use the following variants:
bg-color-${color-name}
max-w-${size}
<div class="separator w-full bg-color-grey--800 my-4"></div>
<div class="separator w-full bg-color-primary--500 my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-10 mx-auto my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-16 mr-auto my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-16 ml-auto my-4"></div>
.separator.w-full.bg-color-grey--800.my-4
.separator.w-full.bg-color-primary--500.my-4
.separator.w-full.bg-color-grey--800.max-w-10.mx-auto.my-4
.separator.w-full.bg-color-grey--800.max-w-16.mr-auto.my-4
.separator.w-full.bg-color-grey--800.max-w-16.ml-auto.my-4
You can use the following variants:
skeleton-shape--circle
skeleton-shape--line
skeleton-shape--title
skeleton-shape--badge
.skeleton-shape-paragraph
to create a paragraph.<div style="width: 300px; height: 200px; margin-bottom: 30px;">
<div class="skeleton-shape"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
<div class="skeleton-shape skeleton-shape--circle"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
<div class="skeleton-shape skeleton-shape--line"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
<div class="skeleton-shape-paragraph">
<div class="skeleton-shape skeleton-shape--line"></div>
<div class="skeleton-shape skeleton-shape--line"></div>
<div class="skeleton-shape skeleton-shape--line"></div>
<div class="skeleton-shape skeleton-shape--line"></div>
<div class="skeleton-shape skeleton-shape--line"></div>
</div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
<div class="skeleton-shape skeleton-shape--title"></div>
</div>
<div style="width: 300px;">
<div class="skeleton-shape skeleton-shape--badge"></div>
</div>
div(style='width: 300px; height: 200px; margin-bottom: 30px;')
.skeleton-shape
div(style='width: 300px; margin-bottom: 30px;')
.skeleton-shape.skeleton-shape--circle
div(style='width: 300px; margin-bottom: 30px;')
.skeleton-shape.skeleton-shape--line
div(style='width: 300px; margin-bottom: 30px;')
.skeleton-shape-paragraph
.skeleton-shape.skeleton-shape--line
.skeleton-shape.skeleton-shape--line
.skeleton-shape.skeleton-shape--line
.skeleton-shape.skeleton-shape--line
.skeleton-shape.skeleton-shape--line
div(style='width: 300px; margin-bottom: 30px;')
.skeleton-shape.skeleton-shape--title
div(style='width: 300px;')
.skeleton-shape.skeleton-shape--badge
<a class="prismea-landingpage-store-link" href="https://play.google.com/store/apps/details?id=com.prismea.android&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://lh3.googleusercontent.com/qF9r3ZjtgG-qyHdmjecArtKiulz1gmwL_xl9R3_fzk6igSeoN0wYbJSKEX5d_fxJRwYZJpHbqcLB3i9atl-9dOfUl9an7U43TfZ9PtQ=s0" alt="Disponible sur Google Play"/></a><a class="prismea-landingpage-store-link" href="https://apps.apple.com/fr/app/prismea/id1471623555?itsct=apps_box&amp;itscg=30200"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/fr-fr?size=250x83&amp;releaseDate=1587168000&h=12208210dfd04a56e78e84f453aaabd5" alt="Disponible sur l'App Store"/></a>
a.prismea-landingpage-store-link(href='https://play.google.com/store/apps/details?id=com.prismea.android&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1')
img(src='https://lh3.googleusercontent.com/qF9r3ZjtgG-qyHdmjecArtKiulz1gmwL_xl9R3_fzk6igSeoN0wYbJSKEX5d_fxJRwYZJpHbqcLB3i9atl-9dOfUl9an7U43TfZ9PtQ=s0', alt='Disponible sur Google Play')
a.prismea-landingpage-store-link(href='https://apps.apple.com/fr/app/prismea/id1471623555?itsct=apps_box&itscg=30200')
img(src='https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/fr-fr?size=250x83&releaseDate=1587168000&h=12208210dfd04a56e78e84f453aaabd5', alt='Disponible sur l\'App Store')
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on -with-label" role="switch" aria-checked="true" aria-label="Switch"><span class="prismea-switch--label -color-light">On</span><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">No</span><i class="prismea-switch--button"></i>
</button>
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
button.prismea-switch.-on.-with-label(role='switch', aria-checked='true', aria-label='Switch')
span.prismea-switch--label.-color-light On
i.prismea-switch--button
button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
span.prismea-switch--label.-color-light No
i.prismea-switch--button
You can use the following variants:
-size-10
, -size-12
, -size-14
, -size-16
, -size-18
, -size-30
, -size-50
, -size-80
-left
, -right
, -center
-text-multiline
-break-text
-line-through
, -underline
-lowercase
, -uppercase
, -capitalize
, -no-transform
-text-lighter
, -text-normal
, -text-medium
, -text-bold
, -text-bolder
<p class="prismea-text">Default Text</p>
<p class="prismea-text -size-12 ">Text size 12px</p>
<p class="prismea-text -size-18 ">Text size 18px</p>
<p class="prismea-text prismea-color -color-primary-500 ">Primary color text</p>
<p class="prismea-text -font-secondary ">Text font family secondary</p>
<p class="prismea-text -right">Right aligned text</p>
<p class="prismea-text -underline">Underlined text</p>
<p class="prismea-text -uppercase">Text in uppercase</p>
<p class="prismea-text -text-bolder">Very bold text</p>
p.prismea-text Default Text
p.prismea-text.-size-12 Text size 12px
p.prismea-text.-size-18 Text size 18px
p.prismea-text.prismea-color.-color-primary-500 Primary color text
p.prismea-text.-font-secondary Text font family secondary
p.prismea-text.-right Right aligned text
p.prismea-text.-underline Underlined text
p.prismea-text.-uppercase Text in uppercase
p.prismea-text.-text-bolder Very bold text
<div class="wysiwyg color-grey--700">
<p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-md color-grey--700 my-4">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-sm color-grey--700 my-4">Lorem ipsum dolor sit amet
</p>
<p class="branding-text color-grey--700 my-4"><strong class="font-weight-medium color-grey--800">Lorem ipsum dolor sit amet</strong>
</p>
<p class="branding-text color-grey--700 my-4"><em class="font-style-italic">Lorem ipsum dolor sit amet</em>
</p>
<p class="branding-text color-primary--500 my-4">Lorem ipsum dolor sit amet
</p>
<p class="branding-text color-grey--600 my-4">Lorem ipsum dolor sit amet
</p>
<p class="branding-text color-grey--700 my-4">Lorem ipsum dolor<a class="branding-link font-weight-normal branding-text"> sit amet consectetur</a> adipisicing elit
</p>
<h2 class="branding-title-2 color-grey--800 mt-8 mb-7">Lorem ipsum dolor sit amet
</h2>
<h3 class="branding-title-3 color-grey--800 mt-8 mb-7">Lorem ipsum dolor sit amet
</h3>
<h4 class="branding-title-4 color-grey--800 mt-7 mb-6">Lorem ipsum dolor sit amet
</h4>
<h5 class="branding-text-xl color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
</h5>
<h6 class="branding-text-lg color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
</h6><img class="max-w-full h-auto mx-auto my-10" src="https://placeimg.com/200/200/animals"/>
<div class="embed-video">
<iframe src="https://www.youtube.com/embed/9YffrCViTVk" title="YouTube video player"></iframe>
</div>
<div class="list my-8">
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
</li>
</div>
<ul class="checklist my-10">
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
<li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
</li>
</ul>
</div>
.wysiwyg.color-grey--700
p.branding-text.color-grey--700.my-4.
Lorem ipsum dolor sit amet
p.branding-text-md.color-grey--700.my-4.
Lorem ipsum dolor sit amet
p.branding-text-sm.color-grey--700.my-4.
Lorem ipsum dolor sit amet
p.branding-text.color-grey--700.my-4
strong.font-weight-medium.color-grey--800 Lorem ipsum dolor sit amet
p.branding-text.color-grey--700.my-4
em.font-style-italic Lorem ipsum dolor sit amet
p.branding-text.color-primary--500.my-4.
Lorem ipsum dolor sit amet
p.branding-text.color-grey--600.my-4.
Lorem ipsum dolor sit amet
p.branding-text.color-grey--700.my-4
| Lorem ipsum dolor
a.branding-link.font-weight-normal.branding-text sit amet consectetur
| adipisicing elit
h2.branding-title-2.color-grey--800.mt-8.mb-7.
Lorem ipsum dolor sit amet
h3.branding-title-3.color-grey--800.mt-8.mb-7.
Lorem ipsum dolor sit amet
h4.branding-title-4.color-grey--800.mt-7.mb-6.
Lorem ipsum dolor sit amet
h5.branding-text-xl.color-grey--800.mt-5.mb-4.
Lorem ipsum dolor sit amet
h6.branding-text-lg.color-grey--800.mt-5.mb-4.
Lorem ipsum dolor sit amet
img.max-w-full.h-auto.mx-auto.my-10(src='https://placeimg.com/200/200/animals')
.embed-video
iframe(src='https://www.youtube.com/embed/9YffrCViTVk', title='YouTube video player')
.list.my-8
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--700.mb-3.
Lorem ipsum dolor sit amet
ul.checklist.my-10
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet
li.branding-text.color-grey--800.font-weight-medium.mb-4.
Lorem ipsum dolor sit amet