Define color set for Suru templates

[kwm14]

Current strips

Currently, in Vanilla, we have 3 color variations:

• Light
• Dark
• Accent

[kwm14]

Templates to create colorways for:

Home page suru hero template

Content page suru topped template

[kwm14]

First exploration

As discussed in last week's design review @marcushas mentioned moving away from Ubuntu Orange, so as Vanilla's accent color is #333333 I thought I'd explore that avenue.

Be good to get your thoughts? @marcushas @anasereijo @waynecrosby

001

Palette - Vanilla 3-color-gradient - #666666 | #333333 | #000000

Homepage

Content page

002

Palette - Vanilla 3-color-gradient - #333333 | #111111 | #000000

Homepage

Content page

003

Palette - Vanilla x Canonical 3-color-gradient - #333333 | #111111 | #2C001E

Homepage

Content page

[waynecrosby]

@kwm14 I think 001 is the most successful although I think the 'content page' top might need a bit of work. Also, did you try a version with a bit of orange going into grey?

[anasereijo]

Hi @kwm14

Not sure if I shared with you, but we have a dark grey gradient that we developed to use on takeovers and landing pages. Maybe you could use the same gradient instead of creating a new one? See screenshot below and find the file is here.

Personally I don't like 003 version. I don't think it works using aubergine and black/grey.

[kwm14]

@kwm14 I think 001 is the most successful although I think the 'content page' top might need a bit of work. Also, did you try a version with a bit of orange going into grey?

@waynecrosby Nice one, this was my preferred version too. I wanted to avoid going too dark otherwise it will look very similar to https://maas.io/ styling.

Haven't tried with Ubuntu Orange as all I could visualize is Halloween, but will give it ago and explore 👍and will relook at the gradient anchors for 'content page' top 😉

[kwm14]

Not sure if I shared with you, but we have a dark grey gradient that we developed to use on takeovers and landing pages. Maybe you could use the same gradient instead of creating a new one? See screenshot below and find the file is here.

@anasereijo Nope, but I will take a look at your file. Thanks for sharing 👍

Personally I don't like 003 version. I don't think it works using aubergine and black/grey.

Agree, wanted to explore using Canonical brand colors to tie in with Canonical Web team 😉

[kwm14]

Updated exploration

Updated gradient color-ways based on feedback. Ready for another look when you are @anasereijo @waynecrosby 😃

004

Palette - Dark Grey Suru assets by @anasereijo 3-color-gradient - #111111 | #333333 | #E4E4E4

Homepage

Content page

005

Palette - Vanilla x Ubuntu 🎃 suggestion by @waynecrosby 3-color-gradient - #333333 | #111111 | #E95420

Homepage

Content page

006

Palette - Vanilla inspired by preferred 001 using Dark Grey Suru but flipped 3-color-gradient - #4E4E4D | #333333 | #111111

Homepage

Content page

[waynecrosby]

@kwm14 Ana & I prefer version 006 ;)

[kwm14]

@kwm14 Ana & I prefer version 006 ;)

Nice one! 👍

[kwm14]

Templates and colorways added to build issue, with gradient and fold CSS values 👍