Home

<div class="Impact Background--carribean-green">

    <header class="SiteHeader" role="banner">

        <a href="" class="Logo Logo--inverted Logo--plum" title="Home">
            <svg width="152" height="50" viewBox="1 2 152 50">
        <g fill="none" fill-rule="evenodd">
            <path class="Logo-text" fill="#25333A" fill-rule="nonzero" d="M152.5 27.54v5.36h-2.36c-5.52 0-8.55-3.31-8.55-9.31v-6.78h-7.36V32.9h-5.61V16.81h-3.09l-.06-4.65h3.15v-.57c0-6 3-9.31 8.55-9.31h2.36v5.36h-2.36c-2 0-2.95 1.29-2.95 4v.57h7.36v-3.9l5.61-3.55v7.4h4v4.65h-4v6.78c0 2.66 1 4 2.95 4l2.36-.05zM77 11.85h5.61v21H77v-2c-1.677 1.74-4.015 2.686-6.43 2.6-5.66 0-10.09-4.84-10.09-11s4.43-11 10.09-11c2.396-.12 4.73.777 6.43 2.47v-2.07zm0 10.5c0-3.54-2.36-6.11-5.61-6.11-3.25 0-5.56 2.57-5.56 6.11 0 3.54 2.34 6.11 5.56 6.11 3.22 0 5.61-2.51 5.61-6.11zm12.88-8.67v-1.83h-5.37v21h5.6v-9.46c0-4.5.77-6.78 5-6.78h1.5v-5.4h-.23c-2.95 0-5.22.87-6.54 2.47h.04zM98 32.83h5.59V2.44H98v30.39zM17 8.1c3.178.02 6.098 1.75 7.64 4.53l.12.21.2-.13 4.83-3.07.2-.13-.13-.2c-2.834-4.3-7.642-6.88-12.79-6.87-4.122-.062-8.095 1.538-11.025 4.44-2.93 2.9-4.567 6.858-4.545 10.98-.027 4.137 1.612 8.112 4.55 11.026 2.936 2.914 6.923 4.523 11.06 4.464 5.11.06 9.91-2.455 12.77-6.69l.13-.19-5.2-3.47-.13.2c-1.56 2.736-4.46 4.432-7.61 4.45-5.16 0-9.2-4.32-9.2-9.84 0-4.75 3.43-9.71 9.13-9.71zm14.57 24.73h5.59V2.44h-5.59v30.39zm94-10.51c0 .58 0 1.15-.09 1.69v.47h-14.8c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.34-11.12 10.55-11.12 5.88-.09 10.01 4.48 10.03 11.01h.02zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22zm-60.73 2.22c0 .58 0 1.15-.09 1.69v.47H44.34c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.37-11.21 10.54-11.21 5.89 0 10.02 4.57 10.04 11.1zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22z"></path>
            <path class="Logo-streak" fill="#23D8A0" d="M151.8 44c-.083-.487-.365-.918-.78-1.187-.413-.27-.92-.354-1.4-.233-1.067.35-2.204.433-3.31.24-1.39-.18-2.86-.31-4.29-.46-2.39-.26-4.79-.47-7.2-.66-2.63-.2-5.27-.34-7.9-.52-2.48-.17-4.95-.39-7.43-.51-5.24-.253-10.483-.45-15.73-.59-4.37-.15-19.57-.32-23.95-.26-3.07 0-6.13.14-9.19.18-4.06 0-18.94.34-23 .58-4.33.23-8.68.38-13 .68-4 .27-8 .45-11.94.74-.906.02-1.81.115-2.7.28-2.35 0-4.43.22-6.52.33-1.66.09-3.36.13-5 .38v0c-.69 0-1-.4-2.07-.26-1.07.14-2.07.46-2.12 1.06-.55.12 0 .41-.62.52v.47c.43.2.56.41 0 .66v.19c.34-.14.39 0 .56.07v.39c-.4.19-.16.37-.09.54.07.17.5.44.42.71-.086.49.11.984.51 1.28v.23c.11.7 1.05 1.28 1.18 2 .1.55 1 1 2.31.89 1.12-.06 1.51-.53 2.53-.68.19 0 .81-.09 1-.1 4.23-.28 8.46-.59 12.66-1 1.24-.11 2.58-.08 3.72-.3 1.5-.29 3.07-.29 4.59-.5 2.867-.348 5.752-.515 8.64-.5 2.41 0 4.77-.26 7.16-.36 1.33-.06 2.66.06 4-.08.518-.097 1.043-.144 1.57-.14 1.43.09 13.66-.12 15.1-.11 2.79 0 5.58-.14 8.36-.17 3.3-.06 17.36-.17 20.68 0 1.13 0 2.31.21 3.37.15 3.11-.17 6.19.1 9.28.17 2.71.06 5.39.31 8.11.39 2.72.08 5.22.23 7.8.51 1 .11 2.08.25 3.15.35.84.08 1.41-.21 2.21-.11 2 .27 4.11.46 6.21.61 1.088.028 2.173.122 3.25.28 1.56.326 3.14.547 4.73.66l1 .36c.856.423 1.835.526 2.76.29.523-.344.77-.984.61-1.59v-.18c.1-.15.19-.31.09-.48.26-.1.28-.22.21-.37.25-.57.71-1.11.44-1.74-.11-.25-.39-.62.42-.79v-.47c-.39-.05-.43-.19-.51-.32.04-.52.1-1.02.12-1.52zm-73.48 1.26c-.063-.008-.127-.008-.19 0 .063-.008.127-.008.19 0z"></path>
        </g>
    </svg>
        </a>

        <nav class="PrimaryNavigation PrimaryNavigation--inverted PrimaryNavigation--plum" data-component="PrimaryNavigation">
            <button class="PrimaryNavigation-menu" aria-hidden="true">Menu</button>
            <ul class="PrimaryNavigation-list">
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link is-active ">Case Studies</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Team</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Posts</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Events</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Contact</a></li>
            </ul>
        </nav>
    </header>

    <h2>We see you through.</h2>
</div>

<main>

    <div style="
        background-image: url(http://clearleft-v5.s3.amazonaws.com/dots/texture_dots-circle-green.png);
        background-repeat: no-repeat;
        background-position: 50% -220px;
        background-size: 800px;
        ">

        <div class="Home-grid">
            <div class="Home-gridItem">
                <article class="Card Card--home">
                    <div class="Bar" style="color:#00D494"></div>
                    <div class="Card-primary">
                        <header>
                            <h3 class="Card-title">Digital Design</h3>
                        </header>
                        <p class="Card-description">Work closely with the Clearleft team to conceive and create new products and services. Or make purposeful design improvements.</p>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Home-gridItem">
                <article class="Card Card--home">
                    <div class="Bar" style="color:#00D494"></div>
                    <div class="Card-primary">
                        <header>
                            <h3 class="Card-title">Digital strategy.</h3>
                        </header>
                        <p class="Card-description">We're here to help you navigate the complexities of digital innovation. Get a fresh sense of direction.</p>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Home-gridItem">
                <article class="Card Card--home">
                    <div class="Bar" style="color:#00D494"></div>
                    <div class="Card-primary">
                        <header>
                            <h3 class="Card-title">Digital culture.</h3>
                        </header>
                        <p class="Card-description">Develop healthy and consistent digital practices. Upskill your teams, develop your processes and introduce new habits.</p>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>

        <div class="Banner">
            <div class="Banner-content">
                <h2 class="Heading Heading--secondary" style="margin: 0; line-height: 1">Client Stories.</h2>
            </div>
        </div>

        </div>

        <div style="position: relative">
            <div class="Background Background--grey" style="position: absolute; top: 7rem; width: 100%; height: calc(100% - 14rem); z-index:-1"></div>
            <div class="Casestudy-grid">
                <div class="Casestudy-gridItem">
                    <div class="Ch4Project Ch4Project--tall">

                        <div class="Ch4Project-wrapper">

                            <div class="Ch4Project-content">

                                <div class="Ch4Project-question">How do you create a new kind of news service?</div>

                                <a href="#">
                                    <h2 class="Ch4Project-title Heading Heading--secondary Heading--inverted">Focus on the intelligent story.</h2>
                                </a>

                                <img class="Ch4Project-logo" src="/assets/img/work/ch4/ch4-logo.svg" alt="ch4 logo">

                            </div>

                        </div>
                    </div>
                    <!--./Ch4Project-->
                </div>
                <div class="Casestudy-gridItem">
                    <div class="PenguinProject PenguinProject--tall">

                        <div class="PenguinProject-wrapper">

                            <div class="PenguinProject-content">

                                <div class="PenguinProject-question">How do you bring more than 700 brands together into one website?</div>

                                <a href="#">
                                    <h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">Create a new universe.</h2>
                                </a>

                                <img class="PenguinProject-logo" src="/assets/img/work/penguin/penguin-logo.svg" alt="Penguin logo">

                            </div>

                        </div>
                    </div>
                    <!--./PenguinProject-->
                </div>
                <div class="Casestudy-gridItem">
                    <div class="EvoProject EvoProject--tall">

                        <div class="EvoProject-wrapper">

                            <div class="EvoProject-content">

                                <div class="EvoProject-question">How do you reimagine a physical magazine?</div>

                                <a href="#">
                                    <h2 class="EvoProject-title Heading Heading--secondary Heading--inverted">Drive reader engagement.</h2>
                                </a>

                                <img class="EvoProject-logo" src="/assets/img/work/evo/evo-logo.svg" alt="evo logo">

                            </div>

                        </div>
                    </div>
                    <!--./EvoProject-->
                </div>
            </div>
        </div>

        <div class="Banner">
            <div class="Banner-content">
                <div class="Banner-caption">Latest Posts</div>
                <h2 class="Banner-headline Heading Heading--secondary">Clear thinking.</h2>
            </div>
            <!--/.Banner-content-->
        </div>
        <!--/.Banner-->

</main>

<div class="Hello">
    <div class="Hello-container">
        <figure class="Hello-image">
            <img src="https://clearleft-v5.s3.amazonaws.com/uploads/DC.png" alt="Dan Caplin">
            <figcaption>This is Dan</figcaption>
        </figure>
        <div>
            <h3 class="Hello-title Heading Heading--inverted Heading--medium">Open the conversation.</h3>
            <div class="Hello-body">

                <p>Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on +44 (0)845 838 6163 or <a href="#">get in touch</a></p>

            </div>
        </div>
    </div>
</div>
<!--/.Hello-->

<footer class="SiteFooter">
    <div class="SiteFooter-container Cols">
        <div class="Cols-half Cols-item">
            <div class="InputGroup">
                <form action="https://tinyletter.com/clearleft" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--body" for="">Feed your curiosity.</label>
                    <div class="Input InputGroup--combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Get the Clearletter</button>
                    </div>
                    <!--/.InputGroup-->
                </form>
            </div>
            <!--/.InputGroup-->
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-half Cols-item">
            <nav class="SiteFooter-navigation">
                <ul class="SiteFooter-navigationLinks">
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Test Lab</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Accessibility</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Cookies</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Styleguide</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Jobs</a></li>
                </ul>
                <!--/.SiteFooter-navigationLinks-->
                <ul class="SiteFooter-icons">
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-github.svg" alt="Find us on Github"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-linkedin.svg" alt="Find us on LinkedIn"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-medium.svg" alt="Find us on Medium"></a>
                    </li>
                    <li class="SiteFooter-icon">
                        <a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-flickr.svg" alt="Find us on Flickr"></a>
                    </li>
                </ul>
                <!--/.SiteFooter-icons-->
            </nav>
        </div>
        <!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            &copy; 2005‑now Clearleft Ltd. All rights reserved.
        </div>
        <!--/.SiteFooter-small-->
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Impact Background--carribean-green">
    {% include '@site-header' %}

    <h2>We see you through.</h2>
</div>

<main>

        <div style="
        background-image: url(http://clearleft-v5.s3.amazonaws.com/dots/texture_dots-circle-green.png);
        background-repeat: no-repeat;
        background-position: 50% -220px;
        background-size: 800px;
        ">

            <div class="Home-grid">
                <div class="Home-gridItem">
                    {% include '@card' with {
                        cardModifiers: ['--home'],
                        cardBar: true,
                        cardBarColour: '#00D494',
                        cardTitle: "Digital Design",
                        cardDescription: "Work closely with the Clearleft team to conceive and create new products and services. Or make purposeful design improvements."
                    } %}
                </div>
                <div class="Home-gridItem">
                    {% include '@card' with {
                        cardModifiers: ['--home'],
                        cardBar: true,
                        cardBarColour: '#00D494',
                        cardTitle: "Digital strategy.",
                        cardDescription: "We're here to help you navigate the complexities of digital innovation. Get a fresh sense of direction."
                    } %}
                </div>
                <div class="Home-gridItem">
                    {% include '@card' with {
                        cardModifiers: ['--home'],
                        cardBar: true,
                        cardBarColour: '#00D494',
                        cardTitle: "Digital culture.",
                        cardDescription: "Develop healthy and consistent digital practices. Upskill your teams, develop your processes and introduce new habits."
                    } %}
                </div>
            </div>

            <div class="Banner">
                <div class="Banner-content">
                    <h2 class="Heading Heading--secondary" style="margin: 0; line-height: 1">Client Stories.</h2>
                </div>
            </div>

        </div>


    <div style="position: relative">
        <div class="Background Background--grey" style="position: absolute; top: 7rem; width: 100%; height: calc(100% - 14rem); z-index:-1"></div>
        <div class="Casestudy-grid">
            <div class="Casestudy-gridItem">
                {% include '@ch4-project' %}
            </div>
            <div class="Casestudy-gridItem">
                {% include '@penguin-project' %}
            </div>
            <div class="Casestudy-gridItem">
                {% include '@evo-project' %}
            </div>
        </div>
    </div>

    {% include '@banner' with {bannerCaption: 'Latest Posts', bannerHeadline: 'Clear thinking.'} %}

</main>

{% include '@hello' %}

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--inverted",
    "--plum"
  ],
  "logoModifiers": [
    "--inverted",
    "--plum"
  ],
  "ch4Modifier": "--tall",
  "ch4Question": "How do you create a new kind of news service?",
  "ch4Title": "Focus on the intelligent story.",
  "ch4LinkUrl": "#",
  "ch4LogoSrc": "/assets/img/work/ch4/ch4-logo.svg",
  "ch4LogoAlt": "ch4 logo",
  "penguinModifier": "--tall",
  "penguinQuestion": "How do you bring more than 700 brands together into one website?",
  "penguinTitle": "Create a new universe.",
  "penguinLinkUrl": "#",
  "penguinLogoSrc": "/assets/img/work/penguin/penguin-logo.svg",
  "penguinLogoAlt": "Penguin logo",
  "evoModifier": "--tall",
  "evoQuestion": "How do you reimagine a physical magazine?",
  "evoTitle": "Drive reader engagement.",
  "evoLinkUrl": "#",
  "evoLogoSrc": "/assets/img/work/evo/evo-logo.svg",
  "evoLogoAlt": "evo logo",
  "helloImgSrc": "https://clearleft-v5.s3.amazonaws.com/uploads/DC.png",
  "helloImgAlt": "Dan Caplin",
  "helloImgText": "This is Dan",
  "helloHeading": "Open the conversation.",
  "helloBody": "\n            <p>Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on +44 (0)845 838 6163 or <a href=\"#\">get in touch</a></p>\n        ",
  "footerLinks": [
    {
      "title": "Test Lab",
      "url": "#"
    },
    {
      "title": "Accessibility",
      "url": "#"
    },
    {
      "title": "Cookies",
      "url": "#"
    },
    {
      "title": "Styleguide",
      "url": "#"
    },
    {
      "title": "Jobs",
      "url": "#"
    }
  ],
  "socialLinks": [
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-github.svg",
      "alt": "Find us on Github"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-linkedin.svg",
      "alt": "Find us on LinkedIn"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-medium.svg",
      "alt": "Find us on Medium"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-flickr.svg",
      "alt": "Find us on Flickr"
    }
  ],
  "inputGroupLabel": "Feed your curiosity.",
  "inputGroupSubmit": "Get the Clearletter",
  "inputModifier": "--combo",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.