STYLE GUIDE - TAFE NSW

1 TAFE NSW DIGITAL BRAND STYLE GUIDE | BETA BUILD 0.0.1 SEPTEMBER 2017

TAFE NSW

STYLE GUIDE

BETA BUILD 0.0 .1 | SEPTEMBER 2017


INTRODUCTION 3

PART 1 OUR LOGO

1.1 OUR LOGO 4 1.2 WEB VERSIONS 5 1.3 LOGO RULES 6

PART 2 OUR VISUAL ONLINE IDENTIY

2.0 COLOUR PALETTE 9 2.1 BANNERS 11 2.2 IMAGES 13 2.3 CORNER DEVICE 15 2.4 TYPOGRAPHY 16 2.5 MENU 26 2.6 FORMS 29 2.7 NOTIFICATIONS 30 2.8 TABLES 31 2.9 ACCORDIAN 32 2.10 SEARCH AND PAGINATION 33 2.11 BUTTONS 34 2.12 BREADCRUMB 35 2.13 SLIDERS 36 2.14 CAROUSEL 37 2.15 PANEL/CARD 38 2.16 THUMBNAILS 39 2.17 MODAL POP UPS 40

CONTENTS


INTRODUCTION

1.0 OUR LOGO


The combined logo format of the NSW Government logo and TAFE NSW logo must be applied to marketing and communication material designed to represent TAFE NSW on a state-wide, national and international basis. This logo is used for corporate materials directed at:

� Business � Government � International � Internal (staff)

This logo is not used for customer-facing collateral and campaigns.

1.1 TAFE NSW LOGO

The TAFE NSW corporate logo

The TAFE NSW logo no longer features the NSW Government logo when used on customer-facing marketing collateral, campaigns and learning materials.

This logo is used for customer materials directed at current and prospective students. This is not used for international marketing materials.

The TAFE NSW customer-facing logo

1.0 OUR LOGO


The following logo versions may be used on TAFE NSW websites.

Reversed white logoThis logo should be used when the background is dark in colour.

Black logoThis logo should be used when the background is light in colour.

1.2 TAFE NSW LOGO WEB VERSIONS

Black Black

Reverse Reverse

TAFE NSW CORPORATE LOGO TAFE NSW CUSTOMER-FACING LOGOUSED FOR CAMPAIGN MATERIAL, LEARNING MATERIAL AND EXTERNAL COMMUNICATIONS.

USED FOR BUSINESS, GOVERNMENT, INTERNATIONAL AND INTERNAL (STAFF) COMMUNICATIONS.

1.0 OUR LOGO


1.3.1 Clear space

Clear space

Clear space is the minimum surface area surrounding the outside of the logo that must remain free of any other graphic elements or text.

Clear space is designed to assist in maintaining the clarity and integrity of TAFE NSW logos. Wherever possible, maintain more clear space around the logo than the minimum specification.

The minimum clear space around the logo is half the height of the ‘A’ in TAFE.

1.3 TAFE NSW LOGO RULES

Clear space Clear space

TAFE NSW CORPORATE LOGO TAFE NSW CUSTOMER-FACING LOGO

1.0 OUR LOGO


1.3.2 Minimum and maximum size

Minimum sizeThe minimum size for web reproduction of the Corporate TAFE NSW logo is 40 pixels of the total vertical height. For the customer-facing TAFE NSW logo, the minimum is 26 pixels of the total vertical height.

The above sizes are recommended to be used on mobile layouts.

Maximum sizeThe maximum size for web reproduction of the Corporate TAFE NSW logo is 40 pixels of the total vertical height. For the customer-facing TAFE NSW logo, the maximum is 40 pixels of the total vertical height.

The above sizes are recommended to be used on desktop layouts.


TAFE NSW CORPORATE LOGO TAFE NSW CUSTOMER-FACING LOGO

Minimum size

Maximum size

Minimum size

Maximum size

40 pixels

50 pixels

25 pixels

40 pixels

1.0 OUR LOGO


1.3.3 Web logo usage

Customer-facing logoTo always be used in the top left of navigation, except for the below instances.

Corporate LogoTo be displayed in the footer only. Can be displayed in the top left of the navigation bar for business, government, international and internal (staff) sites.


TAFE NSW CUSTOMER-FACING LOGO

TAFE NSW CORPORATE LOGO

B2C logo top left of page

B2B logo bottom right of page

For more information on TAFE NSW logo rules, refer to the latest version of the brand book, or email [email protected]

2.0 OUR VISUAL ONLINE IDENTITY


2.0 Colours

Our pastel colour palette is bright and fresh. Although the colours are fun, it’s important to remain sophisticated with their use.

The base of our palette is monochrome.

Each colour set consists of two tones, and have been designated to each course area. For any course-specific material, please use the assigned colour set.

For general collateral, any colour set may be used. However, to avoid multi-coloured collateral, it is recommended that only one colour set is used per layout in conjunction with the base colours.

Tints of the lighter tones may also be used to create greater contrast if required.

Darker tones have been created to meet with WCAG 2.0 AA accessibility standards.

When possible, print with Pantone Colour Matching System – and be sure to use the RGB values for everything distributed electronically.

2.0 COLOUR PALETTE

DEEP AQUA PMS 3262C CMYK 88/0/40/0 RGB 0/174/173 #00AEAD

MAUVE PMS 2577C CMYK 42/55/0/0 RGB 170/123/201 #AA7BC9

AA MAUVE PMS 2577C CMYK 42/55/0/0 RGB 170/123/201 #AA7BC9

BUBBLEGUM PMS 245C CMYK 15/58/0/0 RGB 208/130/183 #D082B7

RIPE PEACH PMS 1635C CMYK 0/56/56/0 RGB 245/139/109 #F58B6D

MINTY GREEN PMS 353C CMYK 48/0/47/0 RGB 135/204/162 # 87CCA2

AA GREEN PMS 354C CMYK 82/5/95/0 RGB 6/169/81 #06A951

AA AQUA PMS 7473C CMYK 78/15/45/0 RGB 25/162/155 #19A29B

AA PINK PMS 674C CMYK 14/82/3/0 RGB 210/82/153 #D25299

DARK TEALPMS 3395C CMYK 85/0/65/0 RGB 48/184/137 #30B889

USED FOR TEXT COLOUR

DESIGN, ARTS, MEDIA, ENTERTAINMENT, LANGUAGE, COMMUNICATIONS, FOUNDATION SKILLS

PRIMARY INDUSTRIES, ANIMAL CARE

CHILDCARE, HEALTHCARE, COMMUNITY SERVICES

IT, ENGINEERING, MANUFACTURING BUSINESS, FINANCE

TOURISM, HOSPITALITY, EVENTS HAIR, BEAUTY BUILDING, CONSTRUCTION, AUTOMOTIVE, TRANSPORT

FASHION, TEXTILES, FURNISHING SPORT, RECREATION

BLACK PMS BLACK RGB 0/0/0 CMYK 0/0/0/100 #000000

CHARCOAL PMS GREY 11C RGB 55/55/55 CMYK 0/0/0/90 #373737

GREY 1 PMS COOL GREY 9C RGB 77/77/77 CMYK 0/0/0/80 #4D4D4D

GREY 2 PMS COOL GREY 6C RGB 129/129/133 CMYK 0/0/0/60 #818185

GREY 3 PMS COOL GREY 4 RGB 167/169/172 CMYK 0/0/0/40 #A7A9AC

GREY 4 PMS COOL GREY 2 RGB 209/210/212 CMYK 0/0/0/20 #D1D2D4

GREY 5 PMS COOL GREY 1C RGB 231/231/232 CMYK 0/0/0/10 #E7E7E8

LAVENDER PMS 2715C CMYK 50/50/0/0 RGB 140/132/214 #8C84D6

DENIM BLUE PMS 292C CMYK 55/15/0/0 RGB 90/179/232 #5AB3E8

FRESH PEACH PMS 1632C CMYK 0/44/52/0 RGB 248/161/122 #F8A17A

LEMONADE YELLOW PMS 100C CMYK 5/0/75/0 RGB 248/237/82 #F8ED52

TEALPMS 3385C CMYK 60/0/45/0 RGB 63/213/174 #3FD5AE

AA AZURE BLUE PMS 7688C CMYK 70/30/5/0 RGB 69/150/202 #4596CA

AZURE BLUE PMS 7688C CMYK 70/30/5/0 RGB 69/150/202 #4596CA

AA DARK LAVENDER PMS 272C CMYK 60/55/0/0 RGB 116/114/192 #7472C0

DARK LAVENDER PMS 272C CMYK 60/55/0/0 RGB 116/114/192 #7472C0

AA DARK TEAL PMS GREEN C CMYK 80/10/70/0 RGB 0/168/135 #00A887

AA DARK PEACH PMS 7578C CMYK 5/70/85/0 RGB 232/109/61 #E86D3D

SUNSHINE YELLOW PMS 106C CMYK 5/5/85/0 RGB 247/228/66 #F7E442

**

*

*

*

**

FLAMINGO PMS 237C CMYK 6/56/0/0 RGB 241/133/207 #F185CF

AQUA PMS 3252C CMYK 65/0/30/0 RGB 28/207/201 #1CCFC9

POWDER MAUVE PMS 2572C CMYK 24/50/0/0 RGB 205/139/218 #CD8BDA

APRICOT PMS 135C CMYK 0/25/75/0 RGB 254/195/90 #FEC35A

SPEARMINT PMS 7479C CMYK 69/0/72/0 RGB 36/205/121 #24CD79

GOLDIE PMS 7409C CMYK 5/30/95/0 RGB 246/178/32 #F6B220

* *

*

**

LIGHT TONES

LIGHT TONES

70% TINT OF LIGHT TONES

70% TINT OF LIGHT TONES

DARK TONES (A A COMPLIANT)

MID TONES

DARK TONES (A A COMPLIANT)

MID TONES

BASE COLOURS

PRIMARY COLOUR SETS

* ONLY THESE COLOURS MAY BE USED AS 16PT WHITE OR COLOURED TEXT, OR 14PT BOLD WHITE OR COLOURED TEXT

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt

14pt 18pt



2.1 Call-To-Action colours for web

The following colours comply with the WCAG 2.0 AA accessibility standards and may be used for Call-To-Action (CTA) buttons online.

These should only be used for CTA buttons if a darker colour is required, and they should always be used in conjunction with our colour palette outlined on the previous page.

CALL-TO-ACTION BUTTON COLOURS

BG #D25299 TEXT #FFFFFF

BG #D64541 TEXT #FFFFFF

BG #4768D6 TEXT #FFFFFF

BG #663399 TEXT #FFFFFF

BG #B11030 TEXT #FFFFFF

BG #1E988A TEXT #FFFFFF

2.0 COLOUR PALETTE



2.1 BANNERS

2.1 Landing page banner

Dimensions: 400px high, full width

Slider: Optional

Image use: Only hero images may be used in Level 1 banners. However, hero images may be used elsewhere on the page.

For more information on image usage, refer to the latest version of the brand book, or email [email protected]



2.1 BANNERS

2.1.2 Second level/course page banner

Dimensions: 250px high, full width. Can be 400 pixels high for campaign purposes.

Slider: Not to be used

Image use: Only hero images may be used in Level 1 banners. Hero and generic images may be used elsewhere on the page.

Secondary navigation changes colour to reflect course area colour.




2.2 IMAGES

2.2.1 Hero and generic/course area images

Image - HeroUsage: Only hero images may be used in Level 1 and 2 banners. However hero images may be used elsewhere on the page.

Image - Generic/course areaUsage: As outlined in the brand book. May not be used in Level 1 and 2 banners but may be used elsewhere on the page. Usually enclosed by thought bubble visual device.


Hero image standalone example Generic/course area example



2.2.2 Thought bubble

Bleed: In Hero context, can breakout. If generic then enclosed only

Scale: Relative to parent

Background colour: Transparent

Colour: Transparent 20% white. Can also be a solid colour if no person/speech bubble

Layers: Always background + 1 (behind most other page elements)

Images: Can be used with hero or generic

Keyline: Possible, but not recommended

Tail scale: Scale square, width and height relative to whole image; minimum 5% or 14 pixels

Tail position: Position is always at the bottom on left or right, as defined opposite to the device

2.2 IMAGES

Example hero image in thought bubble Example no hero image thought bubble



2.3CORNER DEVICE

Style: Base style

Usage: Only full width or full height versions to be used. Refer to brand book for more usage examples.

Border thickness: 1 pixel

Border colour: Black or white depending on page colour

For more information on the corner device, refer to the latest version of the brand book, or email [email protected]

COPY GOES HERE

COPY GOES HERE

THREE LINES OF COPY GO HERE

COPY GOES HERE



2.4 TYPOGRAPHY

2.4.1 Primary font

Our primary font is the Korolev family. It’s important that this font is used on all external communication.

KOROLEV Bold KOROLEV Medium KOROLEV Light



2.4 TYPOGRAPHY

2.4.2 Base style

Typeface - Base Style (Para)

NameVarianceFont sizeFont stack

Link style or colourAlignmentHyphenationWeightColourCaseLine heightSpacing/kerningMargin bottomBullet characterIndentation

: Korolev: None: 12: Helvetica Narrow, Arial Narrow (If no access to type kit then use Roboto Condensed): Underlined by default no hover, colour #4768D6 (CTA blue): Left: NA: Default: #373737: NA: 18 Point: None: 12 Point: None: None

Digital Brand Style Guide Beta V.0.1 - September 2017



2.4 TYPOGRAPHY

2.4.3 H1 style

h1

THE WISE MAN THEREFORE ALWAYS HOLDS INTHESE MATTERS TO THIS PRINCIPLE OF SELECTION

Typeface: KorolevSize: 28 pointWeight: BoldCase: UppercaseLine height: 30 pointSpace Kerning: 1 pixelMargin Bottom: 28 point




2.4 TYPOGRAPHY

2.4.4 H2 style

2.4.5 H3 style

H2

THE WISE MAN THEREFORE ALWAYS HOLDS IN THESE MATTERS

Typeface: KorolevSize: 22 pointWeight: LightCase: UppercaseLine height: 24 pointSpace Kerning: 1 pixelMargin Bottom: 22 point

The wise man therefore always holds in these

H3

Typeface: KorolevSize: 18 pointWeight: Light, Medium or BoldCase: Sentence CaseLine height: 20 pointSpace Kerning: 1 pixelMargin Bottom: 18 point

The wise man thereforealways holds in these

The wise man thereforealways holds in these




2.4 TYPOGRAPHY

2.4.6 H4 style

2.4.7 H5 style

2.4.8 H6 style


H4




The wise man therefore always holds in these matters

H5





H6

Typeface: KorolevSize: 12 pointWeight: MediumCase: Sentence CaseLine height: 18 pointSpace Kerning: 1 pixelMargin Bottom: 12 point




2.4 TYPOGRAPHY

2.4.9 Hero style

hero text

The wise man therefore always holds in these matters to this principle

Typeface: KorolevSize: 32 pointWeight: LightCase: Sentence CaseLine height: 36 pointSpace Kerning: 1 pixelMargin Bottom: 12 point

Light

The wise man therefore always holds in these matters to this principle

Typeface: KorolevSize: 32 pointWeight: MediumCase: Sentence CaseLine height: 36 pointSpace Kerning: 1 pixelMargin Bottom: 12 point

Medium




2.4 TYPOGRAPHY

2.4.10 CTA text

Size: As needed

Colour: As needed

Case: Uppercase

Line height: As needed or 125% of font size

Margin: As needed at bottom

2.4.11 CaptionVariance: Italic (optional)

Size: 10 point

Colour: #767676, or minimum accessibility selection

Case: Sentence or title

Usage: Should not extend beyond the border of the image it is attached to

BEAMBITIOUS

ENROLTODAY

ENROLTODAY

BEAMBITIOUS

I’ve got a brand new combine harvester caption.



2.4 TYPOGRAPHY

2.4.12 Links and lists

Bullet ListsStyle: Base font

Margin bottom: 24 point

Bullet character: Square

Indentation: 24 points (inherited from body copy). Text starts at 12 points after number

LinksStyle: Base font

Appearance: Underlined, on hover underline disappears

Colour: CTA Blue #4768D6

Numbered ListsStyle: Base font

Margin bottom: 24 point

Bullet character: Numeric

Indentation: 24 points (inherited from body copy). Text starts at 12 points after number

BULLET LIST

NUMBERED LIST

LINK



2.4 TYPOGRAPHY

2.4.13 Quotes, testimonials and colophon

QuotesStyle: Base font

Variant: Italics

Usage: Hanging punctuation

Citation: 10 point

Padding: 24 point all sides

ColophonStyle: Base font

Size: 10 point

Weight: Medium

Colour: White

Background colour: #373737

“This is an example of a quote with hanging punctuation.”

Joe Blow Diploma of Fashion (Tutu Making)

“This is an example of a testimonial with hanging punctuation. Dam, quunto omnia simus dit dem volupta

tiatissunt eost el inis rehenimo berfernatur rersper natus. Ique parum iuntemquae natem. Occupta tquissit odis.”

Carly Rogowski General Manager, Communications and Marketing

TestimonialStyle: Base style

Indentation: 24 point left

Padding: As per panel default

Usage: Testimonial to have hanging quotation and to wrap around avatar

AvatarDimenisions: 64 x 64 pixels

Margins: 24 point to right and bottom

Border: 100%

Position: Top left-hand corner

Testimonial nameStyle: Base style

Weight: Bold

Testimonial titleStyle: Base style

Colour: #767676

Quote

Colophon

Testimonial



2.4 TYPOGRAPHY

2.4.14 Hint text and footer

Hint textStyle: Base font

Size: 10 point

Alignment: Left

Colour: White

Padding: 6 point on all sides

Backgorund colour: #000000

FooterStyle: Base font

Size: 10 point

Weight: Medium

Colour: White


HINT TEXT

FOOTER



2.5 MENU

2.5.1 Menu level 1

Position: Horizontal top

Display: Open by default in full screen


Text colour: White

Hover colour: Reversed

Active colour: Reversed

Height: 70 pixels (for desktop), 50 pixels (for mobile)

Behaviour: Sticky on scroll, exact behaviour TBC.

LEVEL 1 MENU - CUSTOMER-FACING LOGO



LEVEL 2 SUB-NAV CLOSEDLEVEL 2 SUB-NAV CLOSED

LEVEL 3 SUB-NAV

LEVEL 2 SUB-NAV OPEN

2.5 MENU

2.5.2 Menu level 2

Position: Right

Display: Opens via icon or L1

Background colour: #E7E7E8. For course areas, backgrounds can be set as a percentage of career area colour.

Text colour: Black

Hover colour: White

Active colour: White

Background colour selected active, and hover: #767676

Behaviour: Not sticky

2.5.3 Menu level 3

Position: Nested under L2, if required.

Background colour: #E7E7E8

Text colour: Black

Behaviour: Not sticky



2.5 MENU

2.5.4 Mega menu

Position: Horizontal top

Background colour: White

Text colour: #373737

Hover colour: Black

Active colour: Black

Usage notes: Only if no L1 pages to display, and sufficient content in at least one area to require it.

Behaviour: Sticky on scroll, exact behaviour TBC.

Width: Maximum 3 columns

Border colour: #373737

Border bottom width: 10 pixels

Border side width: 1 pixel

MEGA MENU WITH TEASER IMAGE



2.6FORMS

LabelUsage: Requires asterisk and explanation, asterisk required for each mandatory field. Asterisk coloured #D64541. Asterisk to appear at end of label with one space. Explanation text to appear top of form, text to read “* Required field”

Form elementUsage: Must be stacked

Padding: 12 point top and bottom, 18 point left and right

Maximum size: as needed

Border: 1 pixel if on white background

Border colour: #CCCCCC

Shape: None

Error messgaeFont size: 10 point

Colour: White

Case: Sentence

Padding: 12 point top and bottom, 18 point left and right

Background colour: #D64541

LABELFORM ELEMENT

ERROR MESSAGE



2.7NOTIFICATIONS

Style: H4 for headers, base style for body copy

Header text colour: Red to be used for error reporting or notifications, green for success notifications and grey for other or general notifications

Background colours: #FFB5AB for error, #D2EAE8 for success, #E7E7E7 for general

ERROR REPORTING/NOTIFICATION

SUCCESS NOTIFICATION

GENERAL NOTIFICATION



2.8 TABLES

Table headingSize: 14 point

Weight: Bold

Colour: White

Background colour: #4768D6

Borders: Internal only


Border radius: 0

Border colour: White

Table cellStyle: Base style

Usage: Zebra striping to be used only when required

Background colour: #F7F7F8

Borders: Internal only


Border radius: 0




2.9ACCORDION

Usage: Refer to L2 style, accordion headers inherit most style elements from the L2 navigation. Note that the padding is greater. Show/Hide icon top of each panel. Optional snippet preview to minimum 2, maximum 4 lines – concatenated. Panels to stay open until closed by user. Open all and Close all text link controls shown top right of accordion, to open and close all sections.

Device: Chevron right-hand side of each panel. Closed panels display right chevron, Open panels display Up chevron.

Padding: 12 top and bottom, 18 point left and right

Border: bottom and top of entire control only





2.10SEARCH AND PAGINATION2.10.1 Search control

Usage: Textbox control with looking glass search icon on the right. Standard location top right in masthead.

Animation: Search control/textbox pops out on click of search button.

2.10.2 Search result

Usage: Each result inside a panel. Heading first set at H3, followed by description set at Body copy. Course code set to bold text. ‘Read more’ with chevron at end of descrption, in link style. Two links per result, one on the H3 heading and one on the read more link. Any additional hyperlinks should appear under ‘Read more’.

2.10.3 Pagination control

Usage: To use default Bootstrap square boarder radius pagination controls.

SEARCH DROPDOWN

PAGINATION



2.11 BUTTONS

2.11.1 Button – Primary

Alignment: Text aligned to centre of button

Usage notes: Font size to mirror content surrounding button, and default to body copy size. Not more than one background colour to be used for primary buttons on a single page. Buttons should be placed bottom left of content block. If using the primary purple then ensure there is sufficient contrast against the background image.

Background colour: One of the six primary colours, depending on page content.

Minimum size: 120 pixels width

Hover behaviour: Two pixel border of the primary colour selected, with the background colour changing to white and text changes to the primary colour.

2.11.2 Button – Other

Alignment: Text aligned to centre of button

Usage notes: Font size should mirror the content surrounding the button, and default to the body copy size. Buttons should be placed bottom left of content block but to the right of primary button.

Background colour: #D1D2D4

Minimum size: 120 pixels width

Hover behaviour: Background colour switches to #A7A9AC

CLICK ME CLICK ME

HOVER OVER ME HOVER OVER ME



2.12BREADCRUMB

Breadcrumb - PreviousFont size: 10 point

Link style: Underscore on hover

Weight: Meduim

Margin: 24 point bottom

Usage notes: Chevrons should be used to separate each component of the trail. The distance between the link and chevron should be 12 point on each side. Breadcrumbs should be displayed at the top of the page, underneath the banner/masthead.

Breadcrumb - CurrentFont size: 10 point

Link style: None

Weight: Light

Colour: #373737

Margin: 24 point bottom

BREADCRUMB



2.13SLIDERS

Dimensions: Full width of page

Usage: Limited to landing page only, if appropriate. Controls should overlay the content, standard chevron used for navigation, left and right of image.



2.14CAROUSEL

CTA ButtonsUsage: Required for each panel

Colour: #4768D6

ControlsUsage: Controls at the bottom, standard chevron control in blue CTA colour #4768D6. pause button, bottom middle.

Colour: #4768D6

LayoutMaximum size: 3 columns

Alignment: Left aligned

Usage: Images can be clickable

TextStyle: H4 for explanatory text, if required



2.15 PANEL/CARD

Margins: 18 point bottom and right

Background colour: As per page colour

Corner shape: 0



2.16 THUMBNAILS

2.16.1 Square thumbnailDimenisions: 120 x 120 pixels


Usage: Used in search results, and possibly in lists with images (news articles, etc.). Headings as per page hierarchy. Text to be used with the image is Annotation text style.

2.16.2 4:3 ThumbnailDimenisions: 4:3 ratio

Minumum size: 120 x 120 pixels

Maximum size: 50% page width

Alignment: Left or right


2.16.3 16:9 Thumbnail card headingDimenisions: 16:9 ratio


Overlay: No text over image

Student receives prestigious Korolev Medium 18

120px x 120pxKorolev Medium 12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.Read More >


120px x 120px

Korolev Medium 12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.Read More >


120px x 120pxKorolev Medium 12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna lum dolore eu feugiat nulla facilisis.Read More >

Thumbnail 1:1

Korolev Medium 12 Lorem ipsum dolor sit amet, consec-tetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci conse-quat, vel illum dolore eu feugiat nulla facilisis.Read More >




Thumbnail 4:3

4:3 ratio4:3 ratio

Thumbnail 16:9

16:9 ratio



Thumbnail 16:9

16:9 ratio





2.17MODAL POP UPS

Alignment: Centre of window

Usage notes: Headers are optional, as per content. If a CTA is to be included, then use a keyline separator, 1 pixel #D1D2D4

Device: Close icon top right

Padding: Small pop up 12 point, medium 18 point, large 24 point

Overlay behaviour: Transparent charcoal over page, opacity 70% of pure black.

Border radius: 0

Corner shape: Sqaure

Animation effect: Use fade and slide down on display, and fade & slide up on hide.

STYLE GUIDE - TAFE NSW

Documents