mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
396 lines
11 KiB
Plaintext
396 lines
11 KiB
Plaintext
<!-- Logos Section -->
|
|
<section class="joplin__logos">
|
|
<div class="container">
|
|
<h1 class="main-logo">Joplin brand guidelines</h1>
|
|
<h2 class="main-logo">Logos</h2>
|
|
<p class="joplin__para">
|
|
All the variations of Joplin logo are all front facing. <br />
|
|
To ensure a clarity and legibility of design, the logo should always
|
|
be surrounded by a clear space.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-tablet-end gy-5 p-row">
|
|
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
|
<div class="box">
|
|
<h3 class="joplin__tagline1">Lockup logo</h3>
|
|
<p class="joplin__para">
|
|
Joplin lockup is the main logo. It is used for
|
|
products and marketing communications. To ensure
|
|
sufficient contrast and readability, two following versions of
|
|
the lockup are provided.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
|
<div class="box box2">
|
|
<p class="joplin__para para-1">
|
|
<span class="blue-text">Blue text</span> version to be used on
|
|
bright background.
|
|
</p>
|
|
<div class="logo-wrapper">
|
|
<img src="{{imageBaseUrl}}/brand/Vector.png" alt="" />
|
|
<h4 class="blue-header">Joplin</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
|
<div class="colored-box">
|
|
<p class="joplin__para">
|
|
White text version to be used <br />
|
|
on dark background.
|
|
</p>
|
|
<div class="logo-wrapper">
|
|
<img src="{{imageBaseUrl}}/brand/Vector2.png" alt="" />
|
|
<h4 class="white-header">Joplin</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper wrapper-2">
|
|
<div class="container">
|
|
<div class="pipeline"></div>
|
|
<div class="row align-items-center gy-5 p-row justify-between">
|
|
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
|
<div class="box">
|
|
<h3 class="joplin__tagline1">Brandmark logo</h3>
|
|
<div class="box-wrapper">
|
|
<img
|
|
src="{{imageBaseUrl}}/brand/J logo transparent background 1.png"
|
|
alt=""
|
|
/>
|
|
<p class="joplin__para">
|
|
The classic brandmark icon is often used on a bright
|
|
background to help increase the contrast. It is a reduced
|
|
version of a logo which should be used in limited spacing or
|
|
when using a full name is not necessary.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
|
<div class="box special-box">
|
|
<h3 class="joplin__tagline1">Joplin tagline</h3>
|
|
<img src="{{imageBaseUrl}}/brand/tagline 1.png" alt="" />
|
|
<p class="joplin__para our-para">
|
|
Our tagline is an invitation to capture your thoughts and
|
|
securely access them from any device.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="joplin__colours">
|
|
<div class="container">
|
|
<h2>Colours</h2>
|
|
<p class="joplin__para">
|
|
Two core colour palettes can be used while representing the brand. The
|
|
accent colours are used to highlight <br />
|
|
important elements and support the colours of the core palettes.
|
|
</p>
|
|
<div class="custom-row gy-4">
|
|
<div
|
|
class="chartjs-wrapper"
|
|
>
|
|
<canvas id="chart1" ></canvas>
|
|
</div>
|
|
<div
|
|
class="chartjs-wrapper"
|
|
>
|
|
<canvas id="chart2" ></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Colours Section -->
|
|
<!-- Pallet Section -->
|
|
<section class="joplin__pallet">
|
|
<div class="container">
|
|
<div class="row gy-5">
|
|
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
|
<h3>Primary colours</h3>
|
|
<div class="sigma-wrapper">
|
|
<div class="circle-wrapper">
|
|
<div class="circle dark-blue"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Dark blue</p>
|
|
<p class="joplin__para">HEX - 043873</p>
|
|
</div>
|
|
</div>
|
|
<div class="circle-wrapper">
|
|
<div class="circle white"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">White</p>
|
|
<p class="joplin__para">HEX - FFFFFF</p>
|
|
</div>
|
|
</div>
|
|
<div class="circle-wrapper">
|
|
<div class="circle dark-gray"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Dark gray</p>
|
|
<p class="joplin__para">HEX - 32363F</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-xxl-5 col-xl-5 col-lg-12 col-md-12 col-sm-12">
|
|
<h3>Accent colours</h3>
|
|
<div class="sigma-wrapper">
|
|
<div class="circle-wrapper">
|
|
<div class="circle light-blue"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Light blue</p>
|
|
<p class="joplin__para">HEX - 4F9CF9</p>
|
|
</div>
|
|
</div>
|
|
<div class="circle-wrapper">
|
|
<div class="circle yellow"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Yellow</p>
|
|
<p class="joplin__para">HEX - FFE492</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-space">
|
|
<div></div>
|
|
</div>
|
|
<div class="row gy-5">
|
|
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
|
<h3>
|
|
Allowed variations of <br />
|
|
primary colours
|
|
</h3>
|
|
<div class="sigma-wrapper">
|
|
<div class="circle-wrapper">
|
|
<div class="circle variant-dark"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Variant dark</p>
|
|
<p class="joplin__para">HEX - 072445</p>
|
|
</div>
|
|
</div>
|
|
<div class="circle-wrapper">
|
|
<div class="circle variant-white"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Variant white</p>
|
|
<p class="joplin__para">HEX - F8F9FA</p>
|
|
</div>
|
|
</div>
|
|
<div class="circle-wrapper">
|
|
<div class="circle variant-dark-gray"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Variant dark gray</p>
|
|
<p class="joplin__para">HEX - 212529</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-xxl-5 col-xl-5 col-lg-12 col-md-12 col-sm-12">
|
|
<h3>
|
|
Allowed variations of <br />
|
|
accent colours
|
|
</h3>
|
|
<div class="sigma-wrapper">
|
|
<div class="circle-wrapper">
|
|
<div class="circle variant-light-blue"></div>
|
|
<div class="info">
|
|
<p class="joplin__para">Variant light blue</p>
|
|
<p class="joplin__para">HEX - F7FBFF</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Pallet Section -->
|
|
<!-- State Section -->
|
|
<section class="joplin__state">
|
|
<div class="container">
|
|
<div class="wrapper row justify-content-between gy-5">
|
|
<div class="col-12 col-lg-5">
|
|
<div class="box pb-3">
|
|
<h2>Typography</h2>
|
|
<p class="joplin__para">
|
|
<b>Font-family: Montserrat</b> <br />
|
|
Montserrat is a typeface chosen for its great readability. It is
|
|
used as a default font. Sans-serif font should be used when
|
|
Montserrat is not available.
|
|
</p>
|
|
</div>
|
|
<div class="box">
|
|
<h2>Connector element</h2>
|
|
<p class="joplin__para">
|
|
The graphic element that represents the connection between the
|
|
components, files and data. It's Joplin's signature element
|
|
present in application's website as well as in marketing
|
|
communications.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-5">
|
|
<div class="box">
|
|
<h2>Imagery</h2>
|
|
<p class="joplin__para">
|
|
We uses vector art illustration . It ensures high
|
|
quality images in any scale, large or small. All the
|
|
illustrations come from storyset.com and are personalised to
|
|
match the Joplin's colours.
|
|
</p>
|
|
</div>
|
|
<div class="box">
|
|
<img src="{{imageBaseUrl}}/brand/customise-it-img 1.png" alt="" class="image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="joplin__highlighter">
|
|
<div class="container">
|
|
<h2>Highlighter</h2>
|
|
<p class="joplin__para">
|
|
It is a reference to process of note taking on paper. It is used to
|
|
emphasize words in the titles. There are two <br />
|
|
variations of the element:
|
|
</p>
|
|
<div class="wrapper">
|
|
<div class="yellow">
|
|
<h4>Yellow version under dark text</h4>
|
|
<img src="{{imageBaseUrl}}/brand/frame-yellow 1.png" alt="" />
|
|
</div>
|
|
<div class="blue">
|
|
<h4>Light blue version under white text</h4>
|
|
<img src="{{imageBaseUrl}}/brand/frame-blue 1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="joplin__voice">
|
|
<div class="container">
|
|
<h2>Tone of voice</h2>
|
|
<div class="wrapper">
|
|
<div class="box">
|
|
<div>
|
|
<h3>
|
|
Professional, <br />
|
|
Friendly, <br />
|
|
Welcoming, <br />
|
|
Trustworthy, <br />
|
|
Open-minded, <br />
|
|
Genuine
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
<p class="joplin__para">
|
|
We believe that transparency is key to honest and successful
|
|
communication. We remain <b>trustworthy</b> and
|
|
<b>genuine</b> in engaging with our users and Joplin community.
|
|
</p>
|
|
<p class="joplin__para">
|
|
As an open-source project we stay
|
|
<b>open-minded</b> and <b>enthusiastic</b> about new ideas and
|
|
solutions. At the same time we continue to be
|
|
<b>professional</b> to honour the trust the users place in us.
|
|
</p>
|
|
<p class="joplin__para">
|
|
We appreciate the value the users bring to our product and
|
|
therefore we keep our tone <b>friendly</b> and <b>welcoming</b>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- State Section -->
|
|
<!-- Chart.Js Lib -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
|
<script>
|
|
const ctx = document.getElementById("chart1");
|
|
const myChart = new Chart(ctx, {
|
|
type: "pie",
|
|
data: {
|
|
labels: ["Dark blue 40%", "Gray 20%", "White 20%", "Light blue 10%", "Yellow 7%", "Dark gray 3%"],
|
|
datasets: [
|
|
{
|
|
label: "# of Votes",
|
|
data: [40, 20, 20, 10, 7, 3],
|
|
backgroundColor: [
|
|
"#043873",
|
|
"#f7fbff",
|
|
"#ffffff",
|
|
"#4f9cf9",
|
|
"#ffe492",
|
|
"#212529",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
layout: {},
|
|
elements: {
|
|
arc: {
|
|
borderColor: '#cccccc',
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: "Blue colour palette",
|
|
font: {
|
|
size: 21,
|
|
align: "left",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
const ctx2 = document.getElementById("chart2");
|
|
const myChart2 = new Chart(ctx2, {
|
|
type: "pie",
|
|
data: {
|
|
labels: ["White 40%", "Gray 20%", "Dark blue 20%", "Light blue 10%", "Dark gray 7%", "Yellow 3%"],
|
|
datasets: [
|
|
{
|
|
label: "# of Votes",
|
|
data: [40, 20, 20, 10, 7, 3],
|
|
backgroundColor: [
|
|
"#ffffff",
|
|
"#f7fbff",
|
|
"#043873",
|
|
"#4f9cf9",
|
|
"#212529",
|
|
"#ffe492",
|
|
],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
layout: {},
|
|
elements: {
|
|
arc: {
|
|
borderColor: '#cccccc',
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: "White colour palette",
|
|
font: {
|
|
size: 21,
|
|
align: "left",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
</script> |