Design Guidelines

Koru is direct, bold, and positive, and the visual styles used on our website reflect those traits. Our interface is clean, simple, easy to use, and adheres to ‘Almost Flat Design’ principles. The visual design of our site and digital products should delight the user and let them know they’re in good hands, but never interfere with functionality.

Color

We use a neutral color pallette with cool undertones and coral and turquoise accent colors. Our accent colors are bold and bright, appear neither feminine nor masculine, and are used sparingly. We generally save our splashes of bright color for links, headlines, buttons, and alerts.

  • SASS $blue
    Hex #00b1c1
    RGB 0 / 177 / 193
    CMYK 74 / 7 / 24 / 0
    PMS 7466

  • SASS $coral
    Hex #e15857
    RGB 225 / 88 / 87
    CMYK 7 / 80 / 64 / 0
    PMS 1795

  • SASS $gray-dark-dark
    Hex #2d3e47
    RGB 45 / 62 / 71
    CMYK 80 / 63 / 53 / 45

  • SASS $gray-dark
    Hex #3f515b
    RGB 63 / 81 / 91
    CMYK 76 / 58 / 49 / 30

  • SASS $gray
    Hex #6b7886
    RGB 107 / 120 / 134
    CMYK 62 / 47 / 37 / 8

  • SASS $gray-light
    Hex #b7c2c9
    RGB 183 / 194 / 201
    CMYK 28 / 17 / 16 / 0

  • SASS $gray-light-light
    Hex #dde6e6
    RGB 221 / 230 / 230
    CMYK 12 / 4 / 7 / 0

  • SASS $gray-light-light-light
    Hex #eff4f4
    RGB 239 / 244 / 244
    CMYK 5 / 1 / 2 / 0

Typography

Heading 1 is Montserrat Light, 50px, 36px on mobile.

Hero sub-text is Merriweather Light Italic, 24px, 18px on mobile.

Heading 2 is Montserrat Light, 32px.

Heading 3 is Montserrat Light, 24 px.

HEADING 4 IS MONTSERRAT REGULAR, 18 PX, UPPERCASE.

HEADING 5 IS MONTSERRAT REGULAR, 15PX, UPPERCASE, AND $GRAY.
HEADING 6 IS MONTSERRAT REGULAR, 13PX, UPPERCASE, AND $GRAY.

Testimonials are Journal, 1px letter spacing, size varies by viewport.

Alternate testimonials are Merriweather, size 21px.

Regular body copy is Lato, 15px.

.small text is Lato, 13px.

.gray text is $gray.

Large body copy is Lato Light, 20px

Bold or italic font is used sparingly for emphasis.

Primary links are $blue and underline on hover.

Secondary links are underlined, 75% opacity, and darken on hover.

We use Lato mostly for body copy. It’s well-proportioned and easy to read. Also, it’s strong structure lends authority while subtle rounded features make it more friendly and human.

We use Montserrat for headlines. It’s geometric features are direct, bold, and lend authority, yet it still feels informal which we like.

Journal is a brush script typeface that brings a human element to our interface. We only use this font for testimonials.

Spacing and Layout

We use the Bootstrap3 grid system with fixed-width columns. For optimal legibility, sections with copy don’t exceed 10 columns on the largest viewport (1200px +).

We always have a clear hierarchy of information. This is achieved through harmonious layouts, generous use of negative space, and appropriate variation in color, typography, and imagery.

Horizontal spacing between elements is the default Bootstrap value of 30px. To create balanced vertical rhythm, there should be 15px, 30px, 45px, or 60px in between elements. When in doubt, use more space.

Occasionally we use a layout that combines an image set to 50% of the screen width with a section of text also set to 50%. This is usually for testimonials. We also use a layout that has a solid colored background and fills the screen width 100%. This is usually for a quote or declarative statement.

Buttons

Our buttons are geometric in shape and never appear with rounded corners. For button text, we use Montserrat, all uppercase. There is 20px padding on all sides of the text. On hover, the color has a 10% shade. Disabled buttons have a 30% tint.

Depending on the color pallette of surrounding elements (photos, colored backgrounds, etc.), either a blue or coral button can be used for a primary call-to-action. A blue and coral button never appear side by side. For a secondary call-to-action, we use a white button.

Our buttons always contain actions like “Join Now,” “Get Started,” and “Learn More.” Our language here is short and straightforward.


Small Button

There is occaisionally a use for a small button, such as the “Apply” button in the header. This button is 40px tall, 12px uppercase Montserrat, and has 1px letter spacing. There is 15px padding on the left and right of the text.

Large Button

Large buttons are used in hero images only. They are 60px tall, 16px uppercase Montserrat, and have 1px letter spacing.
There is 25px padding on the left and right of the text.

Icons

We use icons to call attention to an important feature on a page or add visual interest. They adhere to flat design principles and have a 2px gray outline. Avoid heavy fills. Icons are saved as 110 x 110px transparent PNGs, and then scaled down to 50% for retina display.

icon-computericon-lightbulbicon-coachicon-coffeeicon-pizza

Interactive Elements

We strive to use smooth transitions whenever possible. For example, the button hover state fades from one color to another instead of abruptly changing. If we use an anchor tag, the page should scroll smoothly to the linked section on the page, and not jump to it. Dropdown menus slide open instead of abruptly appearing.

Photography

We avoid stock photography as much as we can. Our brand is made of up real people telling real stories. Photos do not need to be perfect, nor should they appear staged. We strive for authenticity above all.

Use photos like this:

  • img-example1
  • img-example2
  • img-example3

And not like this:

  • img-example4
  • img-example5

Video

We use video to tell stories. Like our photography, we strive to only show real people. Authenticity trumps Academy Award worthy filmmaking.