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.
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.
RGB 0 / 177 / 193
CMYK 74 / 7 / 24 / 0
RGB 225 / 88 / 87
CMYK 7 / 80 / 64 / 0
RGB 45 / 62 / 71
CMYK 80 / 63 / 53 / 45
RGB 63 / 81 / 91
CMYK 76 / 58 / 49 / 30
RGB 107 / 120 / 134
CMYK 62 / 47 / 37 / 8
RGB 183 / 194 / 201
CMYK 28 / 17 / 16 / 0
RGB 221 / 230 / 230
CMYK 12 / 4 / 7 / 0
RGB 239 / 244 / 244
CMYK 5 / 1 / 2 / 0
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.
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.
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.
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:
And not like this:
We use video to tell stories. Like our photography, we strive to only show real people. Authenticity trumps Academy Award worthy filmmaking.