[New docs assets] Masthead SVGs

[RobTobias123]

Outcome

Set of stylised masthead illustrations for every page in the new Docs to give a visual differentiator and indication of content/component.

Scope

Bassed on latest design iterations and feedback from team:

• [x] Create the 1st 5 or so SVGs to prove concept works and define template.

• Creation of all remaining illustrations: PR: https://github.com/centrica-engineering/nucleus-docs/pull/318

• [x] Default/fallback

Components:

• [x] ns-accordion
• [x] ns-action-link
• [x] ns-alert
• [x] ns-appointment-picker
• [x] ns-article
• [x] ns-calendar
• [x] ns-card
• [x] ns-caveat
• [x] ns-column
• [x] ns-content
• [x] ns-cta
• [x] ns-datepicker
• [x] ns-date-time
• [x] ns-download
• [x] ns-editorial
• [x] ns-expander
• [x] ns-fieldset
• [x] ns-footer
• [x] ns-form
• [x] ns-form-group
• [x] ns-header
• [x] ns-highlighter
• [x] ns-icon
• [x] ns-illustration
• [x] ns-image
• [x] ns-inputter
• [x] ns-landmark
• [x] ns-live
• [x] ns-lockup
• [x] ns-panel
• [x] ns-password
• [x] ns-pill
• [x] ns-price
• [x] ns-product-card
• [x] ns-progress
• [x] ns-selector
• [x] ns-skeleton
• [x] ns-skyline
• [x] ns-standout
• [x] ns-tab
• [x] ns-table
• [x] ns-tabs
• [x] ns-testimonial
• [x] ns-timeline
• [x] ns-timeline-event
• [x] ns-video

Experiences:

• [x] nsx-address-selector
• [x] nsx-footer
• [x] nsx-header
• [x] nsx-markting-consent
• [x] nsx-product-card-overview

Guidelines:

• [x] Colours
• [x] Typography

Patterns:

• [x] Asking for information
• [x] Experiences
• [x] Journeys
• [x] Messaging
• [x] Telephone number

Page types:

• [x] Page type (one for all)

• [x] Save the template for future inclusions.

[RobTobias123]

Figma working file: https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=49%3A5221&mode=design&t=odlZbnFlnA1mYFm9-1

[RobTobias123]

Mastheads are to look simpler like the top one in this example (easier to implement too) - solid colour, no gradient, no watermark, black and white illustrations with varying opacities in a uniform square.

[RobTobias123]

Simplified look of what we're aiming for:

[RobTobias123]

I have created the initial set of SVGs for POC which are 130px sq with varied opacities and responsive... If these prove to work ok then we can proceed to create the rest in the same way.

287 - masthead SVGs.zip

[RobTobias123]

Updated fonts to display Menlo on the namespace...

[RobTobias123]

Suggested Masthead colour mapping (Type/colourname/Hex/HSL):

Components = Teal: 315B73 = 202/40/32 Experiences (nsx) = Indigo: 33487F = 223/43/35 Guidelines = Purple: 5D337F = 273/43//35 Patterns = Green: 337F5A = 151/43/35 Page Types = Blue: 203374 = 226/57/29

[RobTobias123]

Masthead SVGs POC has been acknowledged. Continuation of designs now being worked on with priority given to Accordion, Alert, Card, Inputter, Landmark and the Figa template for creation.

[RobTobias123]

Here's the initial set of Masthead illustration SVGs for use with the smaller height Masthead as described earlier today. There's the main set Accordion, Alert, Card, Inputter Landmark and the already designed Typography, Colours, Header included. Happy to help make the SVG code into the right format, if you can show me the one that's working... then I can add them all in as they get done.

Link to the template in Figma below. Basic rules are created from percentages of black or white simple geometric parts using 4px radii to fill the 84px square. 2px minimum gaps, relevance topic, simplistic and balanced with set....

https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=143%3A13419&mode=design&t=acMMaVmetOW8FtSm-1

84px sq - initial set.zip

[RobTobias123]

Appointment-picker SVG Appointment-picker.svg.zip

[RobTobias123]

Calendar.svg.zip

[RobTobias123]

Column.svg.zip

[RobTobias123]

CTA.svg.zip

[RobTobias123]

Highlighter.svg.zip

[RobTobias123]

Continually adding these to the directory on PR https://github.com/centrica-engineering/nucleus-docs/pull/318

[RobTobias123]

Visual ref. of latest additions:

[RobTobias123]

Latest additions today, fieldset, expander, form-group, action-link and illustration:

[RobTobias123]

Priority now marked as Low for this task as we currently have all the SVGs we need to showcase the docs next week.

[RobTobias123]

Note on ns-live: See that the 'refresh' gradient is rendering correctly as 'Angular' gradients are not supported in SVGs and so this has been created using 2 carefully aligned linear gradients instead to achieve the same effect.

`

`

[RobTobias123]

The file corruption issue with ns-testimonial is now resolved by re-creating.

[RobTobias123]

Latest additions: ns-live, ns-price, ns-testimonial:

[RobTobias123]

Added default/fallback SVG for when there is not a specific one - based on the Nucleus logo in style of the other SVGs. Shown alongside here for reference:

[RobTobias123]

Masthead colours defined and specified in #359

[RobTobias123]

ns-form, ns-footer, ns-caveat, ns-panel and ns-password SVGs created and added:

[RobTobias123]

Added: ns-skyline, skeleton, pill, lockup, progress, ask for info, standout, video and table...

[RobTobias123]

Added ns-tabs, tab, date-time, timeline, timeline-event...

[RobTobias123]

All component SVGs completed. A couple of experiences and patterns (and page-type) remaining. Note the Fallback default.svg (Nucleus logo circle element) is in the components folder for now unless it becomes preferred elsewhere.

[RobTobias123]

All experience (NSX) SVGs cpmpleted.

[RobTobias123]

All patterns SVGs completed.

[RobTobias123]

Page type SVG complete

[RobTobias123]

PR for review/approval/merge: https://github.com/centrica-engineering/nucleus-docs/pull/318

[RobTobias123]

SVGs checked in situ - a few minor renames, location change and adding a couple. All missing items seem to be appearing for each page now.