We use cookies to ensure you get the best experience on our website. Learn more

CMC Start - Style guide v1.0

Heading 1 - Desktop


    .title-1 {
        font-size: 64px;
        line-height: 90px;
    }

Heading 2 - Desktop


    h2 {
        font-size: 36px;
        line-height: 50px;
    }

Heading 3 - Desktop


    h3 {
        font-size: 28px;
        line-height: 39px;
    }

Heading 4 - Desktop


    h4 {
        font-size: 20px;
        line-height: 28px;
    }

Heading 5 - Desktop


    h4 {
        font-size: 16px;
        line-height: 22px;
    }

Heading 1 - Mobile


    h1 {
        font-size: 32px;
        line-height: 44px;
    }

Heading 2 - Mobile


    h2 {
        font-size: 24px;
        line-height: 34px;
    }

Heading 3 - Mobile


    h3 {
        font-size: 20px;
        line-height: 28px;
    }

Heading 4 - Mobile


    h4 {
        font-size: 16px;
        line-height: 22px;
    }

Heading 5 - Mobile


    h4 {
        font-size: 14px;
        line-height: 20px;
    }

Normal paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    p {
        font-size: 16px;
        line-height: 24px;
    }

Small intro


    <p class="intro-small">
    .intro-small {
        font-size: 16px;
        line-height: 22px;
    }

Medium intro


    <p class="intro-medium">
    .intro-medium {
        font-size: 18px;
        line-height: 25px;

        @media (min-width: $media-tablet) {
            font-size: 20px;
            line-height: 28px;      
        }
    }

Large intro


    <p class="intro-large">
    .intro-large {
        font-size: 20px;
        line-height: 28px;

        @media (min-width: $media-tablet) {
            font-size: 24px;
            line-height: 33px;      
        }
    }

Bold text

Also can be used as text wrapped in <strong> tag, example: Me Wrapped


    <p class="bold">
    <p>Normal text<strong>Bold text</strong></p>
    
p.bold, strong { font-family: $font-latoLatinRegular; font-weight: 900; }

Small paragraph class

Extra small paragraph class


    <p class="para-xsmall">
    .para {
        font-size: 11px;

        &-xsmall {
            font-size: 11px;
            line-height: 16px;
        }

        &-small {
            font-size: 14px;
            line-height: 20px;
        }
    }

Fonts


$font-default: "Helvetica", Arial, sans-serif;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


$font-latoLatinLight: latoLatinLight, BlinkMacSystemFont, -apple-system, "Helvetica Neue", 
Arial, sans-serif;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam


$font-latoLatinRegular: latoLatinRegular, BlinkMacSystemFont, -apple-system, 'Helvetica Neue', 
Arial, sans-serif;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lists

Custom ordered list

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel venenatis ex, et dapibus mauris. Aenean rutrum convallis risus, et vehicula dui efficitur et. Cras efficitur laoreet turpis pulvinar eleifend.
  4. Lorem ipsum dolor sit amet

Custom bullet list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel venenatis ex, et dapibus mauris. Aenean rutrum convallis risus, et vehicula dui efficitur et. Cras efficitur laoreet turpis pulvinar eleifend.
  • Lorem ipsum dolor sit amet

Default list

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel venenatis ex, et dapibus mauris. Aenean rutrum convallis risus, et vehicula dui efficitur et. Cras efficitur laoreet turpis pulvinar eleifend.
  • Lorem ipsum dolor sit amet

Colours from design

$c-white
#fefefe

$c-blue-1
#0a264d

$c-blue-2
#3b5171

$c-blue-3
#001531

$c-blue-4
#00c5e8

$c-blue-5
#7fe2f3

$c-blue-6
#06b3d2

$c-blue-7
#3e86fb

$c-blue-8
#9ec2fd

$c-blue-9
#1b59be

$c-red-1
#ff4f37

$c-red-2
#ff9587

$c-red-3
#ff1f00

$c-green-1
#28dc8e

$c-green-2
#7eeabb

$c-green-3
#0fc878

$c-orange-1
#ffd400

$c-orange-2
#ffee99

$c-orange-3
#ffb200

$c-grey-1
#fefefe

$c-grey-2
#fcfcfc

$c-grey-3
#f8f8f8

$c-grey-4
#f0f0f0

$c-grey-5
#ececec

$c-grey-6
#dddddd

$c-grey-7
#b9b9b9

$c-grey-8
#979797

$c-grey-9
#696969

$c-grey-10
#464646

$c-grey-11
#2f2f2f

$c-grey-12
#181818

Layout


section {
    background: $c-grey-3;
}

.content {
    padding: 100px 32px;
}

@media (min-width: $media-mobile-landscape) {
  .content {
    max-width: $media-mobile-landscape;
    margin: 0 auto;
  }
}

@media (min-width: $media-tablet) {
  .content {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

Breakpoints/Media queries


$media-mobile: 320px;
$media-mobile-landscape: 480px;
$media-tablet: 768px;

Background colours on sections


.bg-dark-blue {
  background: $c-blue-3;
  h1, h2, h3, p {
    color: $c-white;
  }
}

 

.bg-dark-grey {
  background: $c-grey-11;
  h3, p {
    color: $c-white;
  }
}
 

.bg-dark-blue-gradient {
  position: relative;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,0b2447+45,0b2447+45,1c6687+84,32b6d1+100 */
  background: #000000; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #000000 0%, #0b2447 45%, #0b2447 45%, #1c6687 73%, #32b6d1 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #000000 0%,#0b2447 45%,#0b2447 45%,#1c6687 73%,#32b6d1 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #000000 0%,#0b2447 45%,#0b2447 45%,#1c6687 73%,#32b6d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#32b6d1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

 

Buttons/Links

Learn more


&-primary {
    background: none;
    border: 1px solid $c-white;
    width: calc(100% - 48px);
    padding: 16px 24px;
}

Download on the App StoreGET IT ON Google Play


<p class="download">
    <a href="https://app.adjust.com/27xrjq" class="btn btn-app apple-btn">Download on the
        <span>App Store</span></a>
    <a href="https://app.adjust.com/zdsea5" class="btn btn-app android-btn">GET IT ON
        <span>Google Play</span></a>
</p>

Google


<section class="bg-dark-blue-gradient cmcW-hero">
    <div class="parallelogram-1"></div>
    <div class="parallelogram-2"></div>
    <div class="parallelogram-3"></div>
    <div class="content">
    

Start your trading journey

CMC Start is a mobile trading app brought to you by the UK’s best-rated online trading company*. Perfect for those new to trading, it’s designed to support and educate aspiring traders.

Get set up in minutes and practise trading with virtual money on our free demo CFD account.

iPhone

Samsung

Download on the App StoreGET IT ON Google Play


<section class="bg-dark-blue-gradient">
    <div class="content cmcW-why-cmc-start">
    

Why CMC Start?

 

Instant access

Trade the most popular financial instruments on the go so that you never miss an opportunity. Popular instruments include EUR/USD, UK 100, Oil, Gold, Apple and Facebook shares.

Unrivalled trading

CMC Start is a limited risk account which means your balance can never go below zero. With us you also get low, transparent fees, including competitive spreads and no commissions to pay. We also provide a range of tools, like stop-loss orders, to help you manage your risk.

Learn and develop

Practise trading on our free demo account. In-app videos and educational materials will help you to develop your trading skills. When you feel ready, set up a live account to trade with real money.

World-class support

Our award-winning Customer Services team* are ready and able to support you whenever the markets are open, from Sunday evenings through to Friday evenings.


<section>
    <div class="content app-features">      

App Features

  • Video tutorials

    Continue to develop your understanding with the help of in-app videos, including platform tours and trading strategies.

  • Easy-to-use charts

    Our intuitive charts help you track price movements in the markets. Plus use our chart forum to discuss, share and copy chart analysis.

  • Smart security

    Touch ID authentication ensures that you always have quick, easy access to the app, with the reassurance that your account is secure.

  • News and insights

    Access written and video content from our market analysts to give you daily trading ideas, and stay up to date with the latest news from Reuters.

  • Trading ideas

    Gain an understanding of other clients’ expectations via our client sentiment tool, and stay ahead of the curve with real-time notifications.


<section class="cmcW-sign-up bg-dark-blue">
    <div class="content">     

Help us build the trading service you want to use

Join the CMC Start community and help shape the future of online trading.


<section class="cmcW-what-to-trade bg-dark-blue-gradient line">
    <div class="content">      
     

<section class="cmcW-need-help">
    <div class="content">      
     

<section class="cmcW-testimonials bg-dark-blue-gradient">
    <div class="content">      
     

Don't just take our word for it

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017

  • TraderJoe83

    Every day I fall in love with it more, such an elegant trading tool @cmcstart

    Dec 12, 2017


<section class="cmcW-download-app bg-dark-blue-gradient">
    <div class="content">      
     

Download the app and start learning

Download on the App StoreGET IT ON Google Play


<section class="cmcW-sign-up">
    <div class="content">      
     

Help us build the trading service you want to use

Join the CMC Start community and help shape the future of online trading.


<footer>
    <div class="content">

Grids

Basic structure example


<section>
    <div class="content">
        Section works as a row, you can add background full size
        content is wrapper for inside
        Current example would give one column full width
    </div>
</section>

Same size 2 column grid with flexbox


    <div class="content">
        <div class="colStyle-even">
            <div class="col">
                Columns are build with flex.
                It is one column layout up to 768px.
                You can add multiple columns

                This is first column
            </div>
            <div class="col">
                This is second column
            </div>
        </div>
    </div>

// - - - - Same width col, any amount
.colStyle-even {
  @media (min-width: $media-tablet) {
    display: flex;
    margin-top: 16px;

    .col {
      flex-grow: 1;
      flex-basis: 0;
    }

    .col:not(:last-child) {
      margin-right: 16px;
    }
  }
}

This is left column

This is right column

This is left column

This is right column

Added one more column

Two column grid done with css-grid property

From 0 - 768px is one column, after 2 column layout


    <div class="cmc-2col grid">
        <div>
            <p>Column 1</p>
        </div>
        <div>
            <p>Column 2</p>
        </div>
    </div>

    .cmc-2col.grid > div {
  min-height: 48px;
  margin-bottom: 8px;
  width: 100%
}

@supports (display: grid) {
  /* - - -
  // code for newer browsers
  // including overrides of the code above, if needed
  */

  @media (min-width: $media-tablet) {
    .cmc-2col.grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;

      grid-template-areas: "col1 col2";
      grid-column-gap: 16px;
      grid-row-gap: 16px;

      > div {
        min-height: 200px;
        margin-bottom: 0;
      }

      > div:nth-child(1) {
        grid-area: col1;
      }

      > div:nth-child(2) {
        grid-area: col2;
      }

    }
  }
}

Column 1

Column 2