Dealer’s Diary Style Guide Version 1.0
Dealer’s Diary Style Guide November 2023 Created by Jordan Proceviat
Page 2 | Dealer’s Diary Style Guide
Publication History 11/16/23 – Version 1.0 created.
Page 3 | Publication History
Table of Contents Dealer’s Diary Style Guide
2
Publication History
3
Table of Contents
4
About this Document
6
Audience
6
Scope of the Document
6
Additional Resources
6
Design Conventions
7
Site Elements
7
Navigation Bar
7
Footer
7
Margins
7
Bullets
7
Numbers
8
Images & Videos
8
Labels
8
Buttons
8
Grid System
9
Logos
10
Logo
10
Logo Usage
10
Typography
11
Colour
12
Content Management Systems
13
Homepage
13
Page 4 | Table of Contents
Game Pages
14
Writing Conventions
15
References
15
Spelling
15
Voice, Mood, and Tense
15
Capitalization
16
Punctuation
16
Acronyms and Shortform
17
Contractions
17
Grammar
17
Logistics
18
Distribution
18
Version History & Publication
18
Page 5 | Table of Contents
About this Document This style guide was created by a second year Bachelor of Communications in Information Design program. The purpose of this document is to provide guidelines and standards on styles used in their website Dealer’s Diary.
Audience The users of this document are any content developers tasked with creating, further developing, and editing Dealer’s Diary.
Scope of the Document This style guide provides the fundamentals for materials, writing conventions, design conventions and logistics. By following the specifications, users will be able to produce and maintain a consistent style throughout the website. Sharing a universal manner of writing ensures the consistency of all written materials throughout the website. This style guide serves as the first reference for any content for Dealer’s Diary.
Additional Resources If you are unable to find an answer, have questions or suggestions for this Style Guide, please contact info@dealersdiary.com.
Page 6 | About this Document
Design Conventions Site Elements This section will discuss each of the elements that go into a standard webpage of the Dealer’s Diary website.
Navigation Bar The navigation bar within the website should be 100% wide and 1.5REM tall and contain the primary logo aligned to the left margin. The dimensions of the logo are 158px tall and 64px wide. For logo specifics see logos.
Footer The footer on the website is 100% wide and 1.5REM tall and contain the contact information for Dealer’s Diary, info@dealersdiary.com, and the tertiary logo. The dimensions of the logo are 0.5FR wide by 1FR tall. For logo specifics see logos.
Margins Resolution 1194 pixels Vertical 127 pixels each side
Bullets Bullets are to be used for lists where an explicit order does not need to be followed and should be used with discretion, only when necessary. Bullets are to be used in the respective order, alternating each time. Bullets are indented 0.5 inches from the left, font: paragraph. © Bullet 1 – the heart § Bullet 2 – the club ¨ Bullet 3 – the diamond ª Bullet 4 – the spade
Page 7 | Design Conventions
Numbers Numbers are to be used for lists where an explicit order must be followed to complete the task, and should be used with discretion, only when necessary. 1.
Numbers are indented 0.5 inches from the left, font: paragraph.
Images & Videos All images, graphics and videos within the website must follow these guidelines. All figures must maintain a 5:7, 7:5, or 1:1 aspect ratio. Figure Width Portrait orientation between 250px - 500px wide. Figure Height Portrait orientation between 350px - 700px tall. Position Style Top aligned with text, aligned to right page margin. Figure Border No border around figures.
Labels Labels provide hierarchy and easy scanability of the website. To ensure they are easy to read and scan, the labels should be no more than one line and use the appropriate style. Style parameters are under typography. Title of Page The overarching title that describes what is on the page. Title of Section The header of specific parts of information of the page. Topic The single idea discussed in the following text. Body Text The text to be used when providing the page information.
Buttons Dealer’s Diary will have two button styles, a rectangle button, and a text button. Every button must have a directing word in it. Rectangle buttons can be solid red with white text or outlined red, black, or white with matching coloured text. Text buttons must be light grey.
Button 1
Button 2
Page 8 | Design Conventions
Button 3 >
Grid System The grid used for Dealer’s Diary will remain consistent throughout the entire website and must follow these guidelines. Columns 12 columns. Rows 14 to fill screen, unlimited to accommodate page content. Gutters 20px gutters. Margins 36px margins. Header 2 rows tall, will always remain at the top of the page. Footer 2 rows tall, will appear when bottom of page is reached.
Page 9 | Design Conventions
Logos Logo Dealer’s Diary has three logos. All logos contain two elements, the text, and the graphic. The spacing between and colours of these elements must never be altered. Primary Logo Company Name Card Graphic
Secondary Logo Card Graphic
Company initials
Tertiary Logo Card Graphic
Company Name
Logo Usage All three logos must be placed with sufficient white space surrounding to ensure legibility. The minimum amount of space required is equivalent to the size of the logo’s graphic when placed horizontally.
Page 10 | Design Conventions
Typography Each style uses a different set of parameters to work effectively, if no value is available the default is paragraph. See colours, for specific hue details. Page Titles
Poppins Black Size: 3REM
Alignment: left/center
Colour: Cardinal
Headers
Poppins Extra Bold Size: 2.8REM
Alignment: left
Colour: Mine Shaft
Sub-Headers
Poppins Bold Size: 2.3REM
Alignment: left
Colour: Cardinal
Paragraph
Poppins Regular Size: 1REM
Alignment: left
Colour: Mine Shaft
Hyperlinks
Poppins Regular Size: 1REM
Alignment: left
Colour: Cardinal
Navigation Bar & Footer
Poppins Extra Bold Size: 1REM
Alignment: left
Page 11 | Design Conventions
Colour: Mine Shaft
Colour Only colours provided here can be used for the Dealer’s Diary website. Colours provide users with easy recognition of items in the hierarchy. For specific usage in type, see typography. Primary Colours Cardinal
Use:
HEX: #C52127
Page Titles
RBG: 197, 33, 39
Sub-Headers
CMYK: 16, 100, 100, 6
Hyperlinks
Mine Shaft
Use:
HEX: #2B2B2B
Headers
RBG: 43, 43, 43
Paragraph
CMYK: 70, 64, 63, 65
Navigation & Footer
Athens Grey
Use:
HEX: #F4F4F5
Graphics
RBG: 244, 244, 245
Logo
Secondary Colours
CMYK: 3, 2, 2, 0
Dark Fern
Use:
HEX: #12510B
Graphics
RBG: 18, 81, 11 CMYK: 83, 41, 100, 43
Page 12 | Design Conventions
Content Management Systems The management system for the Dealer’s Diary website content.
Homepage Navigation bar © Dealer’s Diary logo § page links - Blackjack, Pai Gow, UTH, Roulette Topic 1 ¨ Graphic ª Body text – introduction © Body text – description/purpose Topic 2 § Header ¨ Games x4 -
Graphic
-
Page title
-
Body text - brief page description
-
Button linking to individual game page
Footer § Contact us - Dealer’s Diary email ¨ Dealer’s Diary logo ª Copywrite and legal
Page 13 | Content Management Systems
Game Pages Navigation bar © Dealer’s Diary logo § page links - Blackjack, Pai Gow, UTH, Roulette Topic 1 ¨ Header – game name ª Body text – description © Graphic Topic 2 § Header ¨ Body text – explanation ª Graphic Topic 3 © Header § Body text – instructions and steps ¨ Graphics carousel Topic 4 ª Header © Body text – explanation § Graphics carousel Topic 5 ¨ Header ª Body text – description © Graphics carousel Footer § Contact us - Dealer’s Diary email ¨ Dealer’s Diary logo ª Copywrite and legal
Page 14 | Content Management Systems
Writing Conventions Writing conventions are to be kept consistent across all pages of the Dealer’s Diary website. Consistency in language, spelling, grammar, punctuation, and formatting must be maintained to achieve a unified style and simple navigation.
References For questions about spelling, grammar, and punctuation, refer to these documents. Dictionary Canadian Press Caps and Spelling, Nineteenth Edition Grammar The Canadian Oxford Dictionary, Second Edition Punctuation The Canadian Oxford Dictionary, Second Edition
Spelling All content in the Dealer’s Diary website must be in Canadian English and follow its spelling rules. All writing must be reviewed and to ensure all words are spelt correctly. Correct
Colour
Personalize
Travelling
Incorrect
Color
Personalise
Traveling
Voice, Mood, and Tense Voice All content in the Dealer’s Diary is to be written using an active voice. It makes it clear who is performing actions, is more engaging, direct, and simple, supporting the learning process, and allows readers to visualize the games, helping them grasp the concepts more effectively. Mood All content in the Dealer’s Diary must be written in an indicative mood. Dealer’s Diary describes step-by-step processes, so an indicative mood is best as directly provides instructions and information about how games to play without expressing emotions. Tense To maintain consistency and enhance the learning experience in Dealer’s Diary, all content must be written in present tense. Because this is a teaching website, present tense it allows learners to follow along with the steps seamlessly and provides them with an understanding what the dealer will do when playing. Page 15 | Writing Conventions
Capitalization The proper use of capitalization throughout the website is vital to its legibility and correctness. Capital letters must not be used anywhere unless specified below. Page Titles The first letter of each word in all text must be capitalized. Section Titles The first letter of each word in all text must be capitalized. Topics The first letter of each word in all text must be capitalized. Body Text Body text should follow basic capitalization and sentence case guidelines. Game Names The first letter of every word in each games name must be capitalized. Full capitalization and sentence case (no capitalization) must not be used anywhere throughout the website. Conjunctions and prepositions such as and, or, and is must not be capitalized.
Punctuation The proper use of punctuation throughout the website is vital to its legibility and understanding of the content. Punctuation is to be used as specified below. Period Each sentence must end with a period. This includes in paragraphs, bullet points and numbered lists. Comma Commas must be used to separate adjectives, items in a list, introductory phrases, and independent clauses. Apostrophe Apostrophes must be used for singular nouns and personal names. Uses to show possession by adding prior to an s. Colon Colons must be used to introduce following information that will be in bullet points and numbered lists. Semicolon Semicolons are to be used in between complete sentences that are too closely related to be separate sentences. Ampersands must only be used in titles, in place of any ‘and’. Ampersands, quotation marks, the @ symbol and hyphens should not be used anywhere throughout paragraph text.
Page 16 | Writing Conventions
Acronyms and Shortform Throughout the Dealer’s Diary there are a few acronyms and shortforms that will be used. Upon first reference, for short form, write the full name, and for acronyms, write out the name followed by the acronym in brackets. Following, each time the words are used its short form version or acronym or is only necessary. Acronyms Ultimate Texas Hold’em (UTH) Shortform Face Up Pai Gow Poker (Pai Gow)
Contractions Contractions may be used accurately and effectively throughout the website but with discretion. They must not be used everywhere possible but can be used wherever they sound natural. Dealer’s Diary is not intended to be overly serious, and rather more conversational and inviting to users, so the use of contractions is reasonable.
Grammar The proper use of grammar throughout the website supports users’ abilities to understand the content. Grammar rules should be followed as per The Canadian Oxford Dictionary, Second Edition. For any questions about rules and usage, refer to the recommended text. Sentence Structure All sentences throughout the website should be complete and full while also kept to a reasonable length. Because this is a teaching website, short sentences are best way to provide users with quick and easy to understand information and steps. If some content requires detailed explanations, longer sentences are encouraged.
Page 17 | Writing Conventions
Logistics Distribution This style guide is only to be shared with creators and editors of the Dealer’s Diary. It is not public domain and must not be available to anyone. If someone requires access to the document, only Dealer’s Diary creators have the authority to provide it to them.
Version History & Publication Modification Once the Dealer’s Diary is finalized and published this version of the style guide cannot be modified. If new games or content is added to the site but the styles and design remain the same this document does not need to be updated. Creators and editors of the site can continue to refer to this version for all stylizations. If the styles and or design of the site is modified a new version of this document must be updated. All modifications must be added, and all new versions must be retitled 2.0, 3.0, and so on. Access All versions of this style guide must be available to all creators and editors of Dealer’s Diary, and it must be communicated as to which version is the most current and to be used for all site updates.
Page 18 | Logistics
Page 19 |