Our New Expression.
It all starts here. Use this guide as a high-level overview of how the selfpublishing.com brand comes to life.
BRAND BOOK
To ensure our brand is strong, it’s necessary to maintain consistency in the visual identity, which requires some guidelines.With this material, we guarantee that everyone is aligned with the same principles when building the brand’s visual part. It guides us in all the actions we perform.
LOGO
The stacked version is our primary logo and is the most commonly used version. Always use the color version on white background and white version on color background. selfpublishing.com should always be written in lowercase. The font for “selfpublishing” is Montserrat Extra Bold, and for “.com” is Montserrat Regular.
Isolation Area
The isolation area ensures the logo remains visible and recognizable, free from interference by other graphic elements. It is a clear buffer around the logo, to be kept free from text, images, or graphics. We apply the “x/3” rule, where the width and height of the isolation area equals one-third of the logo’s height, denoted as “x.”
Use on Backgrounds
Ensure the logo is always clear, visible, and consistent across backgrounds by emphasizing contrast. Preferably, use the logo on white backgrounds with “publishing” in Tealure (#008672) and the remainder in black. For minimalistic or black and white needs, a fully black logo is an alternative on light backgrounds, ensuring a minimum 4.00 contrast ratio. On dark backgrounds, display the logo in Blankpage (#F7F6F0). Choose background colors from the brand’s primary palette, favoring Evergreen.
Don’ts:
- Don’t use the logo in any other color, even if it’s from our institutional palette.
- Don’t apply Evergreen to every type.
- Don’t rotate the logo.
- Don’t use the logo with gradients.
- Don’t separate the elements or alter its original design.
- Don’t apply effects to the logo.
- Don’t insert images into the logo.
- Don’t place the logo on complex backgrounds.
COLORS
Brand Colors
Our color palette merges innovation with tradition, where deep teals represent the guidance we offer in publishing. Parchment honors the timeless craft of writing. Blankpage evokes the concept of a new beginning.
Evergreen, our standout color, reflects the steadfast support we provide within the publishing realm. Embodying the resilience of the evergreen tree, it signifies growth, renewal, and endurance. We strategically deploy evergreen in key elements to elevate user experience and influence brand perception. Tealure is chosen for the colored version of our logo and for icons on a white background, introducing a vibrant yet refined aspect to our visual identity.
Tealure: #008672 | RGB 0, 134, 114 | CMYK 100, 0, 15, 47
Evergreen: #004A3F | RGB 0, 74, 63 | CMYK 100, 0, 15, 71
Midnight: #003028 | RGB 0, 48, 40 | CMYK 100, 0, 17, 81
Inkwell: #061415 | RGB 6, 20, 21 | CMYK 71, 5, 0, 92
Parchment: #F2D9BB | RGB 242, 217, 187 | CMYK 0, 10, 23, 5
Blankpage: #F7F6F0 | RGB 247, 246, 240 | CMYK 0, 0, 3, 3
Gradients
We use gradients only in background screens, specifically two gradients: from evergreen to inkwell and from evergreen to midnight. The gradient is subtle, adding a touch of modernity to our website and social media, always applied judiciously and in specific locations, in 0 or 90º angle.
Accent Colors
Our accent colors accentuate crucial features with precision. Copperpen enlivens call-to-action buttons, and editorial red highlights urgent messages. Sage and sunbeam enhance backgrounds needing versatility, carefully guiding focus in our visual design. These hues are meticulously applied to adorn our visuals and steer attention to where it matters most.
Sage: #E3F5F0 | RGB 227, 245, 240 | CMYK 7, 0, 2, 4
Sunbeam: #F5A81B | RGB 245, 168, 27 | CMYK 0, 31, 89, 4
Copperpen: #FD7D4B | RGB 253, 125, 75 | CMYK 0, 51, 70, 1
Editorial Red: #E52713 | RGB 229, 39, 19 | CMYK 0, 83, 92, 10
TYPOGRAPHY
Our typography is, first and foremost, easy to read. It also reinforces our brand as being authoritative while also remaining accessible to our authors.
01. Montserrat
Montserrat serves as the primary title font in the visual identity. Its modern, geometric design is exceptionally versatile, ideal for headings, logos, and any text that requires emphasis. This sans-serif font’s clean and contemporary style ensures that main headings stand out with a distinct flair.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
abcdefghijklmnopqrstuvwxyz.
1234567890.
!@#$%^&*()<>?
02. Poppins
Poppins, as the secondary body font, complements Montserrat beautifully. This sans-serif font is characterized by its readability and modern touch. It’s perfectly suited for subheadings, secondary text, captions, and other less prominent web text elements, providing a harmonious balance with the primary font.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
abcdefghijklmnopqrstuvwxyz.
1234567890.
!@#$%^&*()<>?
03. Playfair Display
Playfair Display adds an elegant touch, acting as the tertiary title font. With its high contrast and distinctive style, this serif font is perfect for special headings and quotes. It brings a sense of elegance and formality, ideal for moments where personality and sophistication are key.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
abcdefghijklmnopqrstuvwxyz.
1234567890.
!@#$%^&*()<>?
04. Gloria Hallejujah
Montserrat serves as the primary title font in the visual identity. Its modern, geometric design is exceptionally versatile, ideal for headings, logos, and any text that requires emphasis. This sans-serif font’s clean and contemporary style ensures that main headings stand out with a distinct flair.
ABCDEFGHIJKLMNOPQRSTUVWXYZ.
abcdefghijklmnopqrstuvwxyz.
1234567890.
!@#$%^&*()<>?
This is a Header.
Font: Playfair Display | Size: 65px | Weight: 800 – Extra Bold
H2
This is a Header.
Font: Montserrat | Size: 45px | Weight: 800 – Extra Bold
This is a Header.
Font: Montserrat | Size: 34px | Weight: 800 – Extra Bold
This is a Header.
Font: Poppins | Size: 26px | Weight: 800 – Extra Bold
This is a Header.
Font: Poppins | Size: 21px | Weight: 800 – Extra Bold
This is a Header.
Font: Poppins | Size: 15px | Weight: 800 – Extra Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font: Poppins | Size: 19px | Weight: 400 – Normal
PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font: Poppins | Size: 15px | Weight: 400 – Normal
SAMLL PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font: Poppins | Size: 13px | Weight: 400 – Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font: Playfair Display | Size: 20px | Weight: 600 – Semi Bold
LIST
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Font: Poppins | Size: 15px | Weight: 400 – Normal
FIGURE WITH CAPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Font: Poppins | Size: 13px | Weight: 400 – Normal
IMAGE BANK
The different text sizes used throughout our site and landing pages.
GRAPHICS & ICONS
Icons
The icon set is clean and simple and can be used on the website, landing pages, graphics, and in print. The minimalist style makes it possible to make the icons very small, without losing any details. This iconography is a growing library that expands to meet our evolving needs. They are always used with their outlines only, never filled, ideally in white or Blankpage for dark backgrounds and Evergreen or black for light backgrounds.
Money
Pencil
Microphone
Book
Strenght
Writing
Time
Grow
Idea
Rocket
Medal
Promotion
Red Graphics
Our red graphics draw inspiration from annotations made with a red pen, mirroring the meticulous process of book editing. These serve as a vivid and playful expression of our services. To maintain visual clarity and prevent overcrowding, they should be used sparingly such as in this brand book.
Patterns
Our brand pattern is inspired by the geometric simplicity of rectangular book covers. This repetitive design complements our aesthetic and ensures our brand’s essence is communicated effectively. Use it with moderation to prevent visual clutter and foster the right emotional connection with our clients.
APPLICATIONS
