This Design

symbolises stability, trust, wisdom, confidence, intelligence and truth. That is why we highlight C&S logo in blue — #08F0FD.

Here blue accentuates the most important things: firstly, our logo. Secondly, hover states — if you are preparing to click something, it is the most important thing for you on the page.

Blue color sample

Green color sample


is for everything clickable. It is reminiscent of a green colour from the flat UI designs, except #63FFBD is a real color, sampled from a drawn highlighter line (and physically scanned on my Canon Lide 210).

Some boxes on the front page can have green as a background color and bullets are colored green too.


is the classical highlighter colour. Here at C&S we are going to emphasize things in #FFFF65. For example, yellow roundel at the top of each page is highlighted in yellow.

In a header, yellow roundel balances the blue and distracts the attention from logo’s strong all-caps.

Hint: try highlighting some text on this website.

Yellow color sample

The Black

Typically, the black text on the web is either pure black or very dark grey (#333 for example). It rarely has a hue. On paper, however, the black ink does have a slight tone — often navy blue or violet — that becomes very apparent when ink fades. I am going to mix up blue tint black at 10% brightness — #14161a.

10% black is too black for a text surrounded by white background, so we are going to brighten it up by another 10%. Result is even more blueish #282b32.

P.S. The background image is gradient-mapped to 10% C&S black.

We COLOURlovers community. Check out Code and Send™ theme there.
I’ll keep things symmetrical.
Ships are female. Websites are probably female. This website is definitely female. She wants to be pretty and is a huge attention seeker. Of course, she has to be symmetrical! From header to footer. Symmetry in page
I’ll make her truly fluid.
I use rem’s using CSS: html { font-size: 62.5%; }. Convert all px values: 1px => 0.1rem. It’s easy, no math needed (unlike in em’s) and perfectly fluid. Try zooming in this website to extreme and you’ll see what I mean.
I will not waste any screen space.
I will stick the page to the window edges. The larger your screen, the more content will be shown. One exception — single page articles, where we are going to limit the width of the content to 680px. Content fills any width
Front page is different.
Front page needs a large logo to show off. This is at expense of vertical space, so on all other pages, header and navigation bar go to the side of the screen. Different layouts
I will put anchor links on each heading, so you can link directly to the exact paragraph when citing. I will populate the top right sidebar with links to all H2 headings, and if there is space left, to all H3’s as well. Primary and secondary navs
We don’t need “go up” anchor links at the bottom of the page.
On article pages, anchor, leading to the top of the page, is the first link on the top right. Anchor to the top of the page
Practical Feng Shui for Design.
You know, when building’s corner is pointed at other building at 45°? That is called a death arrow, and the same can happen on a website: Death arrow

When the footer and sticky header do not fit vertically both at once, I move the footer right, under content. Under certain scroll and window size combination, the footer’s top left corner can be sharply directed right into the logo. Solution — re-colour the footer to be white.

P.S. Notice that I didn’t put C&S logo under arrow even on illustration. Never ever.

No ease on mouse-on, but ease on mouse-off.
Every link will have a fade-out. For example, try hovering the mouse over any of the navigation links at the top of this very page.
The buttons.

My plan is to put a twist on widely popular flat design buttons — I’ll keep them flat, but not square. Each button will look like a highlighted text link. This means no 3D effects or shadows for buttons — only background color change on hover.

Ceci est un bouton

Horizontal separator lines.
The plan is simple. If a line separates major content parts (footer, author’s signature, two boxes with different articles) — it’s solid. We allude to separate pieces of paper. If a line separates two siblings — for example, nav bar items or “the most read” list items, it’s dotted. Here we allude to those perforated edges of the ticket sheets. Perforations analogy
I want to keep things as simple as possible. 404 page is just a background image (our visitors are tech-savvy, it’s fine). Login page — the same — it’s just a background image and a form, nothing else (sorry I won't tell you where it is).
The Theme

I should have explained this first, but I wanted to start and to end with highlighter stripes.

You probably got it already. The theme of this website is paper and highlighters. I chose it simply because I like stationery a lot. I'm probably old school, but I think that loved websites, like custom bikes, should be themed. I like custom, special things, and this website is one of them.