<section class="Global-header">
<div class="Header">
<div class="Header__container constrain">
<a href="/" class="Header__logo focus" title="Home">
<svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 154 54">
<title id="clearleft-logo">Clearleft</title>
<style>
.Logo-streak {
mask-repeat: no-repeat;
stroke-dasharray: 150% 150%;
stroke-dashoffset: 150%;
}
.animateLogo-streak {
animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
}
@keyframes swipe {
from {
stroke-dashoffset: 150%;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<path class="Logo-text" fill="currentColor" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
<clippath id="headerMask">
<path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
</clippath>
<path class="Logo-streak animateLogo-streak" clip-path="url(#headerMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
</svg> </a>
<div class="Header__desktop-nav">
<nav class="PrimaryNav" aria-label="Primary">
<ul class="PrimaryNav__list" role="list">
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Services
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Work
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Thinking
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
About
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div class="Header__mobile-nav">
<button class="Button focus Button--outline Header__toggle" data-a11y-dialog-show="mobile-nav"><span>Menu</span></button>
<!-- dialog markup -->
<div class="Dialog Header__mobile-nav-modal" id="mobile-nav" data-a11y-dialog="mobile-nav" aria-labelledby="mobile-nav-title" aria-hidden="true">
<div role="document" class="Dialog__content Header__mobile-nav-inner constrain">
<h2 class="vh" id="mobile-nav-title">
Primary Navigation
</h2>
<button type="button" data-a11y-dialog-hide aria-label="Close dialog" class="Header__mobile-nav-close">
<span class="vh">Close dialog</span>
</button>
<nav class="PrimaryNav PrimaryNav--mobile" aria-label="Primary">
<ul class="PrimaryNav__list" role="list">
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Services
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Work
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Thinking
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
About
</a>
</li>
<li class="PrimaryNav__listItem">
<a href="#" class="PrimaryNav__link focus ">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<nav class="constrain" aria-label="Breadcrumb">
<a href="#" class="Twi Twi--link eyebrow eyebrow--black text-grey focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left eyebrow eyebrow--black text-grey">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-left"></use>
</svg>
<span>Who we are</span></a>
</nav>
<section class="Page-header">
<div class="constrain">
<div class="Page-header__content grid grid--v-gap-l grid--10/2">
<div class="flow--m">
<header class="flow">
<h1 class="Page-header__header h h-1">
Join us
</h1>
</header>
<div class="flow--m">
<div class="body wysiwyg--with-lead flow text-grey">
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<div class="flow--l">
<header class="flow--3xs">
<h3 class="eyebrow eyebrow--accent eyebrow--black">
We’re currently seeking…
</h3>
</header>
<div class="grid grid--of-three grid--v-gap">
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<ul class="Tags">
<li>£35k – £45k</li>
<li>Remote option</li>
</ul>
<h2 class="h h-4">
Event Manager
</h2>
</header>
<div class="body text-grey">
<p>What and why lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Find out more</span></a>
</div>
</article>
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<ul class="Tags">
<li>£35k – £45k</li>
<li>Remote option</li>
</ul>
<h2 class="h h-4">
Senior Digital Project Manager
</h2>
</header>
<div class="body text-grey">
<p>Tackle big, interesting challenges for diverse clients. Create and monitor budgets, facilitate collaborative group activities and feedback sessions.</p>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Find out more</span></a>
</div>
</article>
<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<ul class="Tags">
<li>£35k – £45k</li>
<li>Remote option</li>
</ul>
<h2 class="h h-4">
Business Relationship Manager
</h2>
</header>
<div class="body text-grey">
<p>Lead on the formulation and implementation of an outbound sales & marketing strategy that showcases to prospective clients the value we can bring to their organisations.</p>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Find out more</span></a>
</div>
</article>
</div>
</div>
<section class="Slat">
<div class="constrain grid grid--v-gap grid--8/4">
<div class="wysiwyg body flow">
<h2>Do the most fulfilling work of your career</h2>
<p>We’re always on the lookout for ragtag misfits and lovable rogues eager to seek out the next frontier. No matter who you work alongside, everyone plays their part. Our promise to each other is to continually challenge accepted norms, provoke change, and ensure we remain free from the typical bureaucratic constraints that exist elsewhere.</p>
<blockquote>Working at Clearleft was one of the best decisions I ever made. 6 years of work that I’m most proud of, amongst some of the finest thinkers I’ve ever met. Should you ever choose to work with, or work for Clearleft, I hope these words will give you some encouragement — it is an exceptional place to be.<cite>Ben Sauer - clearleft alumnus and former Director of Product at Babylon Health</cite></blockquote>
<h2>Make the change you want to see</h2>
<p><a href="https://timeline.clearleft.com/">For as long as we can remember</a>, we’ve been involved in creating products that have helped the wider digital, design & UX community thrive. From the primal mists of 2008 emerged our guerrilla usability testing software Silverback. Soon followed Fontdeck, one of the very first web typography platforms. In 2016, we open-sourced <a href="https://fractal.build/">Fractal</a> to make component libraries and design systems more flexible, and most recently we shared <a href="https://utopia.fyi/">Utopia</a> with our fellow designers and developers to help create beautiful typographic fluidity in responsive design systems.</p>
<h2>Learn and share with your peers</h2>
<p>Our industry moves fast but we continue to play an active role in influencing, evolving and evangelising many of the fundamentals of contemporary design practice; responsive design and the progressive web, <a href="https://clearleft.com/posts/the-history-of-design-systems-at-clearleft">systematic design</a>, and the journey of <a href="https://clearleft.com/posts/design-professional-development-framework">career progression</a> to <a href="https://leadingdesign.com/">design leadership</a>. The web was built by people generously sharing what they’ve learned and we embrace the same mindset in our own in-house design critiques, brown bags and other weekly peer-to-peer forums. Open-source knowledge is such an integral part of our DNA that it extends to our internships, mentoring, <a href="https://clearleft.com/posts">writing</a>, public speaking and <a href="https://clearleft.com/events">community events</a>.<br></p>
<h2 class="arrow-link">Shape our culture as an equal partner</h2>
<p>We encourage every member of the team to express themselves freely in a safe and supportive environment, allowing everyone to bring their own unique backgrounds and experiences with them. Diverse individuals coming together as a team enriches the work we do as well as the culture we've co-created, helping make us greater than the sum of our parts. This is why we’re <a href="https://clearleft.com/posts/meet-the-new-owners-of-clearleft">employee-owned</a>, fiercely sceptical of hierarchy, and fully committed to promoting <a href="https://clearleft.com/equal-opportunities-policy">equal opportunities</a>.<br></p>
</div>
</div>
</section>
<footer class="Site-footer Footer theme--dark">
<div class="grid grid--of-two constrain">
<div class="Footer__content flow--gutter">
<div class="grid grid--of-two">
<ul class="Footer__nav flow" role="list">
</ul>
<nav>
<ul class="Footer__nav flow--xs" role="list">
<li class="body small">
<span class="block">68 Middle Street</span>
<span class="block">Brighton</span>
<span class="block">BN1 1AL</span>
<span class="block">United Kingdom</span>
</li>
<li>
<a class="focus" href="mailto:info@clearleft.com">
info@clearleft.com
</a>
</li>
</ul>
</nav>
</div>
<p class="Footer__copyright body small">
<span class="nowrap">Copyright © 2005-Now Clearleft Ltd.</span>
<span class="nowrap">All Rights Reserved.</span>
</p>
</div>
<div class="flow--gutter">
<nav class="Footer__social">
<ul class="Footer__icons" role="list">
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://twitter.com/clearleft" aria-label="Follow us on twitter">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--twitter Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#twitter"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.instagram.com/weareclearleft/" aria-label="Follow us on instagram">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--instagram Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#instagram"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.linkedin.com/company/clearleft/" aria-label="Follow us on linkedin">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--linkedin Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#linkedin"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://medium.com/clear-left-thinking" aria-label="Follow us on medium">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--medium Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#medium"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.flickr.com/photos/clearleft/" aria-label="Follow us on flickr">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--flickr Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#flickr"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://www.youtube.com/channel/UCnCDHgM8pT51sE7tlcgDsZg" aria-label="Follow us on youtube">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--youtube Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#youtube"></use>
</svg>
</a>
</li>
<li class="Footer__icon">
<a class="Footer__icon-link focus" href="https://vimeo.com/clearleft" aria-label="Follow us on vimeo">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--vimeo Icon--m">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#vimeo"></use>
</svg>
</a>
</li>
</ul>
</nav>
<form class="Footer__form flow--xs" action="https://clearleft.us1.list-manage.com/subscribe?u=262832f6c05900ce22e8b14b6&id=02008ae435&email=value" method="post" target="popupwindow">
<legend class="h h-5">
Sign up to our newsletter
</legend>
<fieldset class="Footer__form-fieldset">
<input type="hidden" name="embed" value="1" />
<div class="Text-input flow--2xs Footer__form-input">
<label class="Text-input__title small vh" for="tle-email">
Email address
</label>
<input placeholder="Email address" class="Input " type="email" id="tle-email" name="MERGE0" value="" />
</div>
<button class="Button focus Button--outline-light" type="submit"><span>Sign up</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Icon--s">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg></button>
</fieldset>
<p class="body small">
Every two weeks we send out a newsletter. It's a round-up of latest
news and handpicked hyperlinks covering design, technology, and culture.
</p>
</form>
</div>
</div>
</footer>
<section class="Global-header">
{% include '@header' with header %}
{% include '@breadcrumb' with breadcrumb %}
{% include '@page-header' with pageheader %}
</section>
{% include '@nutshells' with nutshells %}
{% include '@prose-slat' with prose %}
{% include '@footer' %}
{
"header": {
"match": "",
"links": [
{
"url": "#",
"title": "Services"
},
{
"url": "#",
"title": "Work"
},
{
"url": "#",
"title": "Thinking"
},
{
"url": "#",
"title": "About"
},
{
"url": "#",
"title": "Contact"
}
]
},
"pageheader": {
"title": {
"text": "Join us"
},
"content": {
"standfirst": "<p>We’re a team of makers, thinkers, organisers and digital explorers, actively seeking out new frontiers, challenges and opportunities.</p>"
}
},
"breadcrumb": {
"title": "Who we are",
"link": "#"
},
"nutshells": {
"eyebrow": "We’re currently seeking…",
"columns": "three",
"theme": "light",
"shells": [
{
"title": "Event Manager",
"excerpt": "<p>What and why lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
"tags": [
"£35k – £45k",
"Remote option"
],
"link": {
"text": "Find out more",
"url": "#"
},
"combo": true,
"theme": "dark"
},
{
"title": "Senior Digital Project Manager",
"excerpt": "<p>Tackle big, interesting challenges for diverse clients. Create and monitor budgets, facilitate collaborative group activities and feedback sessions.</p>",
"tags": [
"£35k – £45k",
"Remote option"
],
"link": {
"text": "Find out more",
"url": "#"
},
"combo": true,
"theme": "dark"
},
{
"title": "Business Relationship Manager",
"excerpt": "<p>Lead on the formulation and implementation of an outbound sales & marketing strategy that showcases to prospective clients the value we can bring to their organisations.</p>",
"tags": [
"£35k – £45k",
"Remote option"
],
"link": {
"text": "Find out more",
"url": "#"
},
"combo": true,
"theme": "dark"
}
]
},
"prose": {
"primary": "\n <h2>Do the most fulfilling work of your career</h2>\n<p>We’re always on the lookout for ragtag misfits and lovable rogues eager to seek out the next frontier. No matter who you work alongside, everyone plays their part. Our promise to each other is to continually challenge accepted norms, provoke change, and ensure we remain free from the typical bureaucratic constraints that exist elsewhere.</p>\n<blockquote>Working at Clearleft was one of the best decisions I ever made. 6 years of work that I’m most proud of, amongst some of the finest thinkers I’ve ever met. Should you ever choose to work with, or work for Clearleft, I hope these words will give you some encouragement — it is an exceptional place to be.<cite>Ben Sauer - clearleft alumnus and former Director of Product at Babylon Health</cite></blockquote>\n<h2>Make the change you want to see</h2>\n<p><a href=\"https://timeline.clearleft.com/\">For as long as we can remember</a>, we’ve been involved in creating products that have helped the wider digital, design & UX community thrive. From the primal mists of 2008 emerged our guerrilla usability testing software Silverback. Soon followed Fontdeck, one of the very first web typography platforms. In 2016, we open-sourced <a href=\"https://fractal.build/\">Fractal</a> to make component libraries and design systems more flexible, and most recently we shared <a href=\"https://utopia.fyi/\">Utopia</a> with our fellow designers and developers to help create beautiful typographic fluidity in responsive design systems.</p>\n<h2>Learn and share with your peers</h2>\n<p>Our industry moves fast but we continue to play an active role in influencing, evolving and evangelising many of the fundamentals of contemporary design practice; responsive design and the progressive web, <a href=\"https://clearleft.com/posts/the-history-of-design-systems-at-clearleft\">systematic design</a>, and the journey of <a href=\"https://clearleft.com/posts/design-professional-development-framework\">career progression</a> to <a href=\"https://leadingdesign.com/\">design leadership</a>. The web was built by people generously sharing what they’ve learned and we embrace the same mindset in our own in-house design critiques, brown bags and other weekly peer-to-peer forums. Open-source knowledge is such an integral part of our DNA that it extends to our internships, mentoring, <a href=\"https://clearleft.com/posts\">writing</a>, public speaking and <a href=\"https://clearleft.com/events\">community events</a>.<br></p>\n<h2 class=\"arrow-link\">Shape our culture as an equal partner</h2>\n<p>We encourage every member of the team to express themselves freely in a safe and supportive environment, allowing everyone to bring their own unique backgrounds and experiences with them. Diverse individuals coming together as a team enriches the work we do as well as the culture we've co-created, helping make us greater than the sum of our parts. This is why we’re <a href=\"https://clearleft.com/posts/meet-the-new-owners-of-clearleft\">employee-owned</a>, fiercely sceptical of hierarchy, and fully committed to promoting <a href=\"https://clearleft.com/equal-opportunities-policy\">equal opportunities</a>.<br></p>\n "
}
}
No notes defined.