ProWoc Design Guidelines

Design 

Guidelines 

Styleguide for Professional Women of Colour Network 

Sondra Duckert Consulting, UX/UI 

Gøngehusvej 274 

2970 Hørsholm 

Denmark 

CVR nr. 39926334 

Phone: +45 31 52 69 64 

E-Mail: sd@sondraduckert.com 

Web: https://sondraduckert.com 

ProWoc - Professional Women of Colour 

Denmark 

E-Mail: prowocboard@prowoc.org 

Web: https://prowoc.org

Style guidelines for ProWoc 

About 

ProWoc 

Style 

This styleguide brochure is a set of recommendations with 

the intent to provide clear instuctions towards good practice 

in design. The guidelines are designed to project the image, 

values and aspirations behind ProWoc’s identity. 

ProWoc’s style guidelines are the cornerstone of all communication 

efforts and must be followed carefully to ensure a 

consistent message and quality of presentation. Every participating 

member is responsible for representing and coordinating 

the use of its identity and image respectfully. 

2

Designed by Sondra Duckert Consulting (SDC) 

Table 

of contents 

01 THE LOGO 

The logo and its usage 6 

Black, white and grayscale 7 

Logo construction and clearspace 8 

Minimum logo sizes and incorrect uses 9 

02 TYPOGRAPHY 

The primary & secondary font 12 

Typography and hierarchy 14 

03 COLOR SYSTEM 

The logo primary color palette 18 

Secondary color palette 19 

04 THE STATIONERY 

The letterhead 22 

The business card and envelope 23 

05 GRID SYSTEMS 

Print grid systems 26 

Web grid systems 28 

Mobile devices 30 

06 EXTRAS 

Logo placement and Office supplies 34 

Checklist 36 

Help or Feedback? 37 

3


The 

logo design 

4


01 

ProWoc’s logo is a symbol of its identity and a valuable 

asset. Here are some style guidelines for its 

proper usage. 

1. The logo and its usage / 2. Black, white and grayscale / 3. Logo construction + clearspace / 4. Mininum logo sizes and incorrect uses 

5


The logo 

The acronym 

The logo 

and usage 

ProWoc’s logo is presented 

through the use of colors, 

shapes and typography. 

The colors are a fresh mixture 

of dark/golden yellow 

with a touch of light yellow 

Galecto 

The icon 

/white gradients. 

ProWoc’s logo combines two elements: 

the logotype font type and its icon as a graphical element. 

These elements should never be changed without the consent 

from ProWoc’s board of directors. 

The name 

The tag line 

Position, size and color, along with the spatial and proportional 

relationships of the ProWoc logo elements are 

predetermined and should not be altered. 

PRESENTATION OF LOGO WHEN PLACED ON 

WHITE OR BRIGHT COLORED BACKGROUND 

Used consistently, they will reinforce public awareness of 

ProWoc’s visual identity. 

Logo when the background is 

of a white color. 

Logo when the background is of a 

bright color. 

6


Logo 100% black 

Black, white 

and grayscale 

Sometimes, often due to production costs, only one color of ink is available 

and the logo must be reproduced using only one color. The recommendation 

would be to use the logo, logotype, or symbol with a light color type on a dark 

background or in a dark color type on a light background. 

Logo 100% grayscale 

The logotype and the symbol must be clearly distinguishable from the background 

color. 

Please repect ProWoc’s Logo palette when possible, using black or white only 

when necessary. 

Logo 100% white 

7


FULL LOGO AND LOGO ICON 

(Business Card Dimensions) 

85.0 mm 

Logo 

construction 

+ clearspace 

w: 62,454 mm 

h: 28,972 mm 

3.0 mm bleed 

3.0 mm bleed 

54.0 mm 

ProWoc logo requires separation from the other elements 

around it. The space required on all sides is roughly equivalent 

to the cap height of the logo type. The logo must always fit 

into the clear space area and can not be obstructed by other 

graphical elements which could hinder visibilty of the brand 

element. 

Whenever you use the logo and icon, it should be 

surrounded with clear space to ensure its visibility. 

Please note that text or pictorial figures which have strong 

impact or impression should not be placed near the logos. It is 

best to keep the isolation area (“white space”) empty. 

Whenever the logo icon is used as a single object, it also 

needs clearspace all around. 

8


MINIMUM LOGO SIZES 

ProWoc’s logo design scale and proportion 

for print items. 

THE LOGO SYMBOL ICON 

For digital uses the minimum size 

for the standard logo is 120 px 

(500 px normal size). 

The smallest size for the ICON 

symbol is 16 px 

For business cards, for example, the size 

of ProWoc’s logo should be set an centered 

at: 

w: 62,454 mm; h: 28,972 mm. 

w: 677,33 mm 

h: 340,99 mm 

w: 4,09 mm 

h: 10,29 mm 

w: 8 px 

h: 21,72 px 

w: 16 px 

h: 39, 88 px 

LOGO: INCORRECT USE 

Please note: The logo should not be 

changed! Although creativity is appreciated 

please do not alter the logo in any way. 

Consent must first be granted by ProWoc 

board of directors. 

Do not rotate 

* only when pre-approved 

Do not add a drop shadow Do not rearrange logo elements Do not stretch the logo 

Do not use ‘not approved’ colors 

Do not outline the logo text 

Do not add or change the 

logo original gradient colors 

Do not use the logo over an image 

* only when pre-approved or for watermarks 

9


The 

typography 

10


02 

Typography is 95% of design – it’s a driving force 

in all forms of communication art. 

1. The primary and secondary font / 2. Typography and hierarchy / 3. Character and paragraph styles 

11


Primary font 

Raleway 

DESIGNER: MATT MCINERNEY 

Raleway is an elegant sans-serif typeface family. Initially designed by 

Matt McInerney as a single thin weight, it was expanded into a 9 weight 

family by Pablo Impallari and Rodrigo Fuenzalida in 2012 and iKerned 

by Igino Marini. 

It is a display face and the download features both old style and lining 

numerals, standard and discretionary ligatures, a pretty complete set 

of diacritics, as well as a stylistic alternate inspired by more geometric 

sans-serif typefaces than its neo-grotesque inspired default character 

set. 

It also has a sister family, Raleway Dots. 

This font should be used in all ProWoc’s communications 

to project a consistent visual and style identity. This 

includes promotional materials, advertising, digital assets, 

and printed materials. 

Raleway 

LIGHT 

REGULAR 

MEDIUM 

SEMIBOLD 

BOLD 

EXTRA BOLD 

HEAVY 

Raleway 

ABCDEFGHIJKLMNOPQRSTUVWXYZ 

abcdefghijklmnopqrstuvwxyz 

1234567890!”§$%&/()=?;,.:-_ 

12


Roboto 

REGULAR 

ITALIC 

BOLD 

BOLD ITALIC 

BLACK 

BLACK ITALIC 

Secondary 

font Roboto 

DESIGNER: CHRISTIAN ROBERTSON 

Roboto has a dual nature. It has a mechanical skeleton and the 

forms are largely geometric. At the same time, the font features 

friendly and open curves. While some grotesks distort their letterforms 

to force a rigid rhythm, Roboto doesn’t compromise, allowing 

letters to be settled into their natural width. This makes for a 

more natural reading rhythm more commonly found in humanist 

and serif types. 

This serif font is available in 10 weights. The most often 

used sizes are the regular, italic and bold versions. 

The subline of the logo uses the regular weight. 

Roboto 



1234567890!”§$%&/()=?;,.:-_ 

Complimentary font Montserrat 



1234567890!”§$%&/()=?;,.:-_ 

13


Typography 

and hierarchy 

Main title: Raleway display 50 pt bold 

Title header 

Heading 1: Raleway display 48 pt regular 

Size is the simplest way to create contrast between different typographic 

elements in your design. With three levels of typography, 

the font size generally starts out largest on top (level one; your most 

important information) and decreases in size as you move down the 

page. 

Layout, for both print and screen, is one of the most important aspects 

of graphic design. Designs that extend across multiple pages 

or screens, whether containing large or small amounts of type, must 

be carefully controlled in a way that is enticing and is easy for all to 

access. 

Here are some of the most common techniques. 

Headline one 

Heading 2: Roboto display 30 pt italic 

Headline two 

Heading 3: Roboto 24 pt italic 

Headline three 

Heading 4: Roboto 14 pt regular, medium 

HEADLINE FOUR 

14


Character & paragraph styles 

BASIC TEXT BOLD UPPERCASE: RALEWAY FONT, 9PT 

Basic text italic : Raleway font, light, 11pt 

Basic text regular charcole gray: Roboto font, regular 

ONSEQUIAE RATAM NOS MOLOREPUDAM ULPA IUR 

MA VOLORATIS ESSIMODIA SI CONECER ROREPELICIA 

ILLUPTIOSAM ANDIGNIANT POS MINIMETUR, QUODICA 

TESEQUATUR, ACCUM RENDAM. EHENITEM SIMOLOR., 

Ciis eumendi gnimos aut labores sequis sunt 

quam fuga. Nequos eum facea vollab ius, odis ad 

moloreh endest, sum il exerio. Ique alit que dolupta 

musantis re que dero et abore. Hitis ipictias 

et, sum, ut aut Soluptas expernatet eos sa ilicae 

nonem acil. 

Antem autem que perum as et la verum dolum doles deliaep 

tatibus voluptatia volecat emporen daernam, vernatur? Quia 

dolorate nonsernat.Obis sam quos est eaturioris magnis 

aperestem illuptur magnihicias ullorit rehenia consequo 

doluptatae. 

Basic text white center: Roboto font regular, 9pt 

Accum niti blamus. Iberro con rem etum accum reperferatem 

esseque nonsenist ulpa ea doluptati ariae acid 

quas de omnihilia dero voluptasped quis cullabo. Ro 

eatibuscia doluptatiae pratecto vitam ulpa doloriorunt 

eius audit evelecae. 

List with bullets: Roboto font, regular and italic, 11pt 

• Ciis eumendi gnimos aut labores etiam tu est 

• Sequis sunt quam fuga. 

• equos eum facea vollab ius, odis ad moloreh 

endest, sum il exerio. 

• Incidus, ipsam as eicillatur, volescit, aut expliquae 

es coria cusam earunt voluptis qui utateturi 

List with numbers: Roboto font, regular, 9pt 

1. Me pero doluptat et pa si utatur re, to quisci ullaborro 

blaut quiaturi officit ianima consequos el eius vent, 

2. Olor sit, untiantiatem explibusda sa cones aut quid ent 

volenisim aces aut faces quis mil evelias eliquia ducim 

3. Lum fugitatum am cus es exerae aut hitiaestiis etur, ut 

4. Diam imilliq uaeperu ptaque qui audiatet molupta eprorenisquo 

doluptio excestrum iur aut utem voluptat. 

15


The 

color system 

16


03 

With 93% of customers influenced by colors 

and visual appearance, selecting the best colors 

and images is essential. 

1. The logo primary color palette / 2. Secondary color palette 

17


100% 

80% 

COLOR CODES 

PRIMARY COLORS 

60% 

CMKY 19 / 39 / 74 / 7 

RGB 202 / 154/ 80 

HEX 

#ca9a50 

40% 

The logo 

color palette 

20% 

100% 

USE OF COLOR FOR PRINTED & DIGITAL LOGO 

The following palette has been selected for use in ProWoc communcations. 

Lighter tints of these colors are also allowed, but the Logotype + 

SECONDARY COLOR 

80% 

60% 

COLOR CODES 

CMKY 10 / 18 / 69 / 1 

RGB 234 / 203 / 101 

background may only be used with a 100% tint. 

HEX 

#eacb65 

40% 

The primary colors includes a combination of light and dark yellows, 

brown, and black each reflecting ProWoc’s identity as a nework for ambitious 

and dynamic women of colour. 

20% 

A comprehensive color palette has been developed to provide 

flexibility while creating a unified, recognizable appearance 

across all communications. 

PRIMARY COLOR 

(can be used as font color) 

100% 

80% 

60% 

COLOR CODES 

CMKY 19 / 39 / 74 / 07 

RGB 203 / 154 / 80 

HEX 

#cb9a50 

40% 

18 

20%


100% 

80% 

COLOR CODES 


60% 

CMKY 25/ 29 / 51 / 8 

RGB 191 / 169 / 128 

40% 

20% 

HEX 

#bfa980 

Secondary 

color palette 

100% 

The palette allows the addition of secondary colors to enrich Pro- 

Woc’s visual identity as a whole. Lighter tints of these colors are 

80% 

COLOR CODES 

also allowed. 


60% 

CMKY 37 / 63 / 71 / 48 

RGB 112 / 71 / 51 

For web design use colors RGB and for print design use colors as 

CMYK. If web files will be used to produce elements for business 

HEX #704733 

cards or brochures, please remember to change the format from 

40% 

RGB to CMYK. 

20% 

Please note that this guide does not include specifications for 

Pantone or HKS colors. 

100% 

These colors are complementary to ProWoc’s official 

colors, but are not recognizable identifiers for communication 

use. Please use secondary colors sparingly. 

80% 

COLOR CODES 


(choice for background) 

60% 

CMKY 14 / 9 / 8 / 70 

RGB 98 / 100 / 101 

HEX #626364 

40% 

20% 

19


The 

stationery 

20


04 

When it comes to developing the stationery, consistency 

is the key for all layouts 

and designs. 

1. The letterhead / 2. Business card and envelope 

21


210 mm 

The 

letterhead 


Professional Women of Colour 

Denmark 

prowocboard@prowoc.org 

The stationery is one of the most widespread forms of contact for 

business and corporate communications. 

Clean and simple, a stationary designed to align with ProWoc’s 

visual identity. The letterhead features the logo and business contact 

information on the top right side. 

*Letterhead layout design subject to change 

297 mm 

Dimensions: 

DIN A4 

(297 x 210 mm) 

Paper: 

100 g/m² offset white 

*It is very important to check paper 

dimensions at all times. 

Especially if printing between North America 

and EU print settings. 

22


BUSINESS CARDS 

The business card will be used for all official 

contact and communication. 

*Layout design subject to change 

Ruby Ann Nielson 

Director 

Dimension: 

85 mm x 54 mm 


Denmark 


Print: 

350 g/m² glossy white paper 

*Double check all size dimensions before printing. 

EU and North America document print setting have 

different dimensions. 

- front- -back- 

ENVELOPES 

The envelope will be used for all official 

contact and communication. 



Denmark 

Dimension: 

standard enevelope size 

Print: 

80g/m² offset white paper 

self-adhesive 

NOTICE: 

The backside of all envelopes 

will be plain. Other 

formats are allowed. 

23


The 

grid system 

24


05 

Using a grid system is one way to achieve a 

level of consistency that would otherwise make 

a design difficult to manage. 

1. Print grid system / 2. Web grid system / 3. Mobile devices 

25


Print 

grid systems 

USE ON DIN A4 AND LETTER FORMAT 

The grid is used as a guide for how to place text, photos and 

advertisements on the page. The selected font size should be 

proportionate to the grid. Using a font that is too large will cause 

odd hyphenation and breaks, which can be difficult to read and 

using a typeface that is too small can cause strain on a reader 

and break the content flow that is being read. 

The 12 column grid is always the basic. For special 

prints, a 6 column grid is also allowed. 

Alternatives - North America Letter paper size (216 x 279 mm 

or 8 1/2 x 11 inches) is used instead of A4. 

Use 2, 3, 4, 6, 8, 10 or 12 columns for the layout 

26


GRID SYSTEMS FOR IMAGES 

(OPTIONAL PLACEMENT OF IMAGES ALLOWED) 

27


GRID SYSTEM WEB LAYOUT 

The layout is based on a 12 columns grid system. 

Web 

grid systems 

Home About Us Activities 

Membership Contact 

USE ON DIFFERENT DEVICES 

Grid systems are used for creating page layouts through a series 

of rows and columns that house your content. Here are some 

examples. 

This grid system has four tiers of classes: md (desktops), and lg 

(larger desktops). 

Please follow the examples to have a consistant visual 

appearance. 

28


$ 

WIRE FRAMES 

General information of the content and layout of each page. (Options to select from) 

4 column grid 6 column grid 

Custom layout Welcome page Pipeline 

Subpages Article left (optional) Blog/News 

(optional page layout) 

Landing page 

(Call to action page) 

Team members 

Contact us today 

29


LOGO PLACEMENT 

ProWoc’s logo is placed on a 6 column grid system. 

Mobile 

devices 

USE ON MOBILE PHONE 

Grid systems are used for creating page layouts through a series 

of rows and columns that house your content. Here are some 

examples. 

The 3 grid system has four tiers of classes: xs (phones), sm 

(tablets). 

Examples are shown to offer a consistant visual appearance. 

See more » 

30

Home About Us Activities Membeship 


TABLET VERTICAL GRID 

The layout is based on a 8 columns grid system. 

Contact 

FONTS 

The fonts Raleway and Roboto 

can also be used on 

the web. Raleway is always 

used for the big headlines, 

Roboto for the basic text 

and smaller headlines. 

COLOR 

The basic background 

color for websites is always 

white. Use light contrast 

of ProWoc’s main colors 

to highlight some articles. 

Colors can be used for 

headlines, underlines or 

icons. 

NAVIGATION 

The navigation is always on 

the top right, with lowercase 

lettering. 

31


The 

extras 

32


06 

Identity is how a company presents itself to others. 

Reputation is what people have heard about your company. 

Branding is what individuals say about your company 

to others. 

1. T-shirts, baseball cap. 2 Office supplies. 

33


Logo 

Placement 

When used on t-shirts, mugs etc. any of the approved logos can be 

used. The logo may also be used with lettering or separately from 

the lettering. 

For the background color: black, golden, dark grey or white are 

often the preferred choices for displaying the logo. 

Please seek approval for personal perference of background color 

choice if different from the for examples presented. This goes for 

t-shirts, coffee mugs or office supplies. 

T-Shirt design on white, golden, dark grey background. 

The logo size is approximately 300 mm x 280 mm. 

T-Shirt designs ”Designed by Freepik” 

34


Office 

Supplies 

More ideas for logo placement is the use of office supplies. 

Always aim to use the same color, no matter what printable object 

you use. 

Mugs or coffee to go cups 

Tote or paper bags 

Pencil or ball pen 

Water bottles 

USB Sticks 

Mobile phone cover 

etc. 

These are some examples of ProWoc’s logo placement. 

35


The 

checklist 

01 THE LOGO 

Only use approved versions of the logo. Please check that you have 

respected the minimum size and exclusion zone requirements. The 

logo should not appear with alternative colors or pattren backgrounds 

without ProWoc Board persmission. 

02 COLOR 

Please make sure that only your approved primary and secondary 

colors are used. 

03 TYPOGRAPHY 

Use the font Raleway for all top headings. For body text and smaller 

headings use font Roboto. Both fonts are free and available for web. 

04 STATIONARY 

The standard paper size or quality designated for stationary is DIN A4. 

Always double check if your printing needs switch between EU and 

North American settings. And select the best option for printing. 

Thank you! 

36


Help or 

feedback? 

SONDRA DUCKERT, MSC. 

Web optimization. Branding. UX Design. 

Media Management Consultant 



Denmark 

If you have any questions or would like to offer some feedback, 

about Professional Women of Colour Network styleguide, 

please contact me at : 

Phone: +45 31 52 69 64 (Dk) 



CVR nr. 39926334 

37

Sondra Duckert Consulting, UX/UI 



Denmark 

CVR nr. 39926334 

Phone: +45 31 52 69 64 





Denmark 

E-Mail: 

Web: 


https://prowoc.org

ProWoc Design Guidelines

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?