Welcome to the official branding guide for Al Qalam Typing, located at www.alqalam.ae. This page provides a comprehensive overview of our visual identity, including logos, color palettes, typography, and interactive elements. Our aim is to ensure consistent and effective brand representation across all platforms.
Step 1: Our Story – About Al Qalam Typing
About Us
Al Qalam Typing is dedicated to providing efficient and reliable typing and documentation services. With a commitment to accuracy and customer satisfaction, we assist individuals and businesses with various governmental and private sector documentation needs in the UAE. Our expertise ensures a smooth and hassle-free experience for all our clients.
We pride ourselves on our attention to detail, quick turnaround times, and professional service. Our team is well-versed in the latest regulations and requirements, making us your trusted partner for all typing and documentation services.
Step 2: Our Visual Identity – Logos in Action
Below are the various versions of the Al Qalam Typing logo, designed for different applications, from primary website use to small app icons and favicons. Each is presented with its intended purpose.
Step 3: Our Color Palette – Your Theme & Extensions
Current Blocksy Palette (Existing)
These are the core colors currently defined in your Blocksy theme, forming the foundation of your website’s visual appeal.
New Suggested Shades & Backgrounds
These additional shades provide more versatility, allowing for richer designs and better visual hierarchy throughout your site.
New Logo Accent Colors
These colors are extracted directly from your provided Al Qalam Typing logos, offering additional accent shades for specific design elements, ensuring brand consistency across all visual assets.
Step 4: Element Previews – Applying Your Theme
This section demonstrates how standard content elements are styled with your theme’s colors and fonts, ensuring a consistent look across your site’s textual content and interactive components.
Section with Subtle Background (--theme-palette-color-13)
This is an example paragraph using --theme-text-color on a background of --theme-palette-color-13. The subtle off-white gives a slight visual separation without being distracting. You can add links here.
Section with Light Blue Tint Background (--theme-palette-color-14)
Here, we use --theme-text-color on a background of --theme-palette-color-14. This light blue tint can be effective for drawing attention to specific content blocks or testimonials. More example links.
Section with Primary Blue Background (--theme-palette-color-1)
This section uses your primary blue as a background. Text and links should use --theme-palette-color-8 (white) for sufficient contrast. This could be used for call-to-action areas or headers. Even lighter primary links work here.
Section with Dark Heading Color Background (--theme-palette-color-4)
This uses your dark heading color as a background for a bold statement. Notice the text color uses --theme-palette-color-7 for contrast, with links in a lighter primary shade.
Section with Lighter Primary Blue Background (--theme-palette-color-9)
This lighter primary blue can be used for softer hero sections, alerts, or subtle calls to action. Text in --theme-palette-color-4 (dark heading) or --theme-palette-color-3 (main text) provides good contrast. Here’s a link in darker secondary blue.
Section with Darker Primary Blue Background (--theme-palette-color-10)
A strong, intense blue for impactful sections. Use white text (--theme-palette-color-8) for readability. This can be great for headers or important announcements. Learn more with this lighter primary link.
Section with Lighter Secondary Blue Background (--theme-palette-color-11)
This soft, desaturated secondary blue is excellent for testimonials, info boxes, or as a background for form sections. It provides a calm, inviting feel. Here’s a useful link.
Section with Darker Secondary Blue Background (--theme-palette-color-12)
For powerful call-to-action banners or footer sections, this deep secondary blue is very effective. Use very light text (--theme-palette-color-7 or --theme-palette-color-8) for contrast. Find out more here.
Core WordPress/Post Element Styles (Utilizing New & Existing Palette)
This section demonstrates how standard content elements are styled with your theme’s colors and fonts, ensuring a consistent look across your site’s textual content.
Heading 3 Example (--theme-headings-color on --theme-palette-color-8)
This is a standard paragraph of text, using --theme-text-color. 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. This is an example link within the paragraph.
Heading 4 Example (--theme-palette-color-3 on --theme-palette-color-8)
Heading 5 Example (--theme-palette-color-2 on --theme-palette-color-8)
Heading 6 Example (--theme-palette-color-4 on --theme-palette-color-8)
Another paragraph, explicitly using --theme-palette-color-3 for its text color. This ensures consistency with your established main text color.
This is a blockquote. It typically stands out from the main text. By default, it’s styled with
--theme-palette-color-14background and--theme-palette-color-1border.
Unordered List Example
- List item one.
- List item two.
- List item three with a themed link.
Ordered List Example
- First item.
- Second item.
- Third item.
List with Icons
Table Example
| Service | Description | Status |
|---|---|---|
| Visa Application Typing | Assistance with all visa-related forms. | Available |
| Emirates ID Renewal | Fast and accurate ID renewal services. | High Demand |
| Attestation Services | Document attestation for various purposes. | By Appointment |
Section with Logo Background (--theme-logo-bg-circle)
This section utilizes one of your new logo’s neutral background colors. The text is in a dark gray from the logo palette, and a link is styled with a logo accent red.
You can still use your primary theme text color, --theme-palette-color-3, on this background for a softer look. A standard theme link will also look good.
Section with Logo Red Accent Background (--theme-logo-red-light)
This vibrant section uses a lighter red from your logo palette. Text in –theme-palette-color-8 (white) stands out strongly. Ideal for warnings, highlights, or call-to-action sections related to specific content.
- Important notice.
- Hot topic!
Section with Logo Green Accent Background (--theme-logo-green-primary)
A bold green from your logo palette, suitable for success messages, positive affirmations, or sections indicating “go” or “confirm.” White text provides the best contrast here. Example primary blue link on green.