joplin/Assets/WebsiteAssets/templates/brand.mustache

<!-- 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>