midnight-blue
#0C333D
Primary · Pantone 547 C
AlCaz Media · Brand system 2026
Style guide
The AlCaz Media brand reference: official August 2026 logos and colors, plus the approved website typography and components.
Brand identity
Official AlCaz Media logo artwork from the August 2026 brand assets. Use the horizontal logo as the primary signature and the vertical logo where a stacked format is needed.
Primary · light background
Midnight Blue wordmark with Bright Ember accents.
Primary · dark background
Sand Beige wordmark with Bright Ember accents.
Secondary · vertical
Official stacked lockup; preserve its proportions.
Keep the supplied artwork intact. Preserve clear space and proportions; do not crop, stretch, recolor, add effects, or recreate the wordmark.
Desktop — Services and Industries open
The two dropdowns are stacked here for reference. On the website, they open one at a time. On narrow screens, scroll the desktop preview sideways.
Mobile — menu and all dropdowns open
This is the menu used on iPad and mobile, expanded here so every link is visible.
AlCaz Brand — Color
Five main brand colors, supported by shades, tints, white, and Warm Charcoal for body copy.
bright-ember
#F68C1F
Primary · Pantone 715 C
muted-teal
#336D76
Primary · Pantone 7699 C
warm-red
#E95C43
Primary · Pantone 7416 C
sand-beige
#F8F7F5
Primary · warm white
white
#FFFFFF
Supporting · white tint
midnight-blue-dark
#09262E
Shade
midnight-blue-light
#134352
Tint
bright-ember-dark
#B86917
Shade
bright-ember-light
#FABA79
Tint
muted-teal-dark
#265259
Shade
muted-teal-light
#85A7AD
Tint
warm-red-dark
#AF4532
Shade
warm-red-light
#F29D8E
Tint
sand-beige-dark
#DAD5CB
Shade
warm-charcoal
#262322
Neutral · body copy
Use Midnight Blue and Sand Beige as the foundation. Bright Ember provides emphasis and action; Muted Teal and Warm Red provide supporting surfaces.
Warm Charcoal is reserved for body copy. On a light surface, use Ember Dark for small orange text. White or Sand Beige text belongs on Midnight Blue and Muted Teal.
Website typography
Playfair Display and DM Sans are the AlCaz typefaces. These specimens follow the approved Figma website design. Listed sizes are nominal Figma reference values in the order 1920 / 1440 / 1280 / 991 / 767 / 478; desktop text scales with browser width, while tablet and mobile use pixel settings.
Growth, answered
Growth, Answered
Growth, answered
Growth, answered
Growth, answered
We stand out by excelling in three focus pillars
AlCaz Media is a full-service digital marketing agency in Dubai delivering media buying, social media management, and social video production.
Source: Baymard, 2025
THE CHECKOUT LEAK
Work email (required)
73%
Source: Baymard, 2025
Pipeline you can forecast
+4.5X
Rules that travel with the type
Use italic for emphasis in Playfair Display, never bold. DM Sans emphasis uses weight 600. Keep one emphasized phrase per field.
Write “and” in Playfair text. Keep body copy left aligned at 60–75 characters per line. A statistic, its sign, and its unit stay in a single text run at the same size.
Spacing and radius
Fixed scales keep rhythm and corners consistent across the site.
Spacing scale
4px
Icon to label
8px
Minimum gap between tap targets
12px
Chips, tags, stacked mobile buttons
16px
Heading to paragraph; input padding
24px
Related elements; mobile gutters
32px
Desktop card padding; grid gap
48px
Groups; desktop margins
64px
Compact sections
80px
Tablet section spacing
96px
Desktop section spacing
Corner radius
2px
Scale step
4px
Scale step
6px
Scale step
8px
Inputs
12px
Scale step
16px
Cards · default
20px
Scale step
24px
Feature tiles
32px
Scale step
Pill
Buttons, tags, chips
The nesting rule: inner = outer − padding
A 32px outer corner with 16px padding contains a 16px inner corner. Another 8px inset uses an 8px corner. Keep the minimum corner at 2px. A 48px pill button uses 32px horizontal padding.
Grid and section rhythm
Responsive grids and spacing follow Figma’s current Layout Scale. Desktop dimensions use em; tablet and smaller use px.
XXL · 1920
12 columns · 48px margins · 32px gutters
Section padding: 64px tight / 96px default / 128px generous
XL · 1440
12 columns · 48px margins · 32px gutters
Section padding: 64px tight / 96px default / 128px generous
Main · 1280
12 columns · 48px margins · 32px gutters
Section padding: 64px tight / 96px default / 128px generous
Tablet · 991
8 columns · 32px margins · 24px gutters
Section padding: 48px tight / 80px default / 96px generous
Landscape · 767
4 columns · 24px margins · 24px gutters
Section padding: 48px tight / 64px default / 80px generous
Mobile · 478
4 columns · 16px margins · 16px gutters
Section padding: 32px tight / 48px default / 64px generous
Keep long content within a 90em (1440px at a 16px base) container. Background surfaces can extend wider. Header-to-body spacing is 48px on desktop, 32px on tablet, and 24px on mobile.
Tight
A strip that supports the section above.
Default
Every ordinary section sits here.
Generous
The hero opens the page.
Surfaces
Five complete section recipes. Start with a defined pairing so headings, copy, actions, and focus states work together.
Light · the default
THE CHECKOUT LEAK
Growth, answered
Paid, SEO, content, social, and CRM run as one system toward a single revenue goal.
Sand Beige background. Midnight headings and Warm Charcoal body copy. Use ember for filled buttons; use Midnight or Ember Dark for readable text.
Midnight blue
THE CHECKOUT LEAK
Growth, answered
Paid, SEO, content, social, and CRM run as one system toward a single revenue goal.
Sand Beige text with Ember accents. Cards use Midnight Blue Light; use Ember Light for the focus outline.
Bright ember
THE CHECKOUT LEAK
Growth, answered
Paid, SEO, content, social, and CRM run as one system toward a single revenue goal.
Midnight Blue type at full opacity. Use one dominant Ember moment per viewport.
Muted teal
THE CHECKOUT LEAK
Growth, answered
Paid, SEO, content, social, and CRM run as one system toward a single revenue goal.
Sand Beige text and outlined buttons. Use Muted Teal Dark for texture; avoid Ember and Midnight body text on this surface.
Warm red
Growth, answered
Use for large display headings. Put small text on a darker panel or a different surface.
Components in context
Reusable treatments for statistics, flat cards, and form fields, shown on their intended surfaces.
On Midnight Blue
THE CHECKOUT LEAK
73%
of carts abandoned before payment.
Source: Baymard, 2025
PAID MEDIA
Pipeline you can forecast
Budget moves to the channels that convert, and the report says why.
On Sand Beige
THE CHECKOUT LEAK
73%
of carts abandoned before payment.
Source: Baymard, 2025
PAID MEDIA
Pipeline you can forecast
Budget moves to the channels that convert, and the report says why.
Form fields · default, focus, error
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.