The AppMecca
identity.
Our visual language, how it works, and how to use it. Everything you need to represent AppMecca accurately and consistently.
AppMecca vs. appmecca
The brand name is written differently depending on context.
In prose
When writing about the brand in sentences, headings, documentation, or any running text, use AppMecca with a capital A and capital M. This is the brand name.
In the logo
The rendered wordmark is always lowercase: appmecca. No capitals. This applies to all logo lockups, the navigation bar, the favicon context, and anywhere the logotype is rendered visually.
Quick reference
"AppMecca deploys your app in seconds." — correct in a sentence.
appmecca — correct in a logo.
"appmecca deploys your app" — incorrect in prose. "APPMECCA" — never.
Logo variations
The mark and wordmark work together or independently. Use the variation that fits the context.
Horizontal lockup
Vertical lockup
Mark only
Wordmark only
Size reference
The mark scales proportionally. Cell size, gap, and border-radius all adjust together. Here are the three standard sizes used across the product.
How the mark works
The 4x4 grid
The AppMecca mark is a 4x4 grid of colored cells. Each cell is assigned a color from the seven-color brand palette in sequence (Red, Blue, Green, Purple, Amber, Cyan, Pink — then repeating). This means some colors appear twice in the 15 visible cells, creating a natural rhythm.
Diamond opacity
Opacity follows a diamond gradient — cells at the center of the grid are fully opaque, fading toward the edges. This gives the mark depth and the appearance of light emanating from its center. The exact opacity values are:
The missing corner
The top-right cell is always hidden. This breaks the perfect square symmetry and gives the mark its distinctive silhouette. The bottom-right cell is present. Never fill in the missing corner or remove additional cells.
Color precomposition
On dark backgrounds, cell colors are precomposed against the base dark color (#0C0C14) at their opacity value. This means the mark renders without CSS opacity — each cell is a solid color that appears as if it were transparent over the background. This ensures crisp rendering at all sizes.
Scaling rules
When scaling, adjust cellSize, gap, and border-radius proportionally. The gap should be roughly 15–20% of the cell size. Border-radius should match the gap or be slightly larger. At very small sizes (3px cells), radius and gap can both be 1px.
Animation
The mark supports a pop-in entrance animation. Cells scale from zero with a 45-degree rotation, staggered from center outward. Refresh the page (Cmd + R) to see the animated vertical lockup above. The animation plays once on load — it must never loop or repeat.
The wordmark
Plus Jakarta Sans at weight 800 (Extra Bold), always lowercase in the rendered logo. "app" is white on dark backgrounds or black (#111) on light backgrounds. "mecca" is always brand red (#FF3D5A). This color split is non-negotiable — never render the wordmark in a single color.
Letter-spacing scales with size: -1.5px at 36px (large), -1px at 20px (medium/nav), -0.5px at 13px (small).
Seven colors. One system.
Every color has a specific role. Red is the primary accent — used for CTAs, active states, and the wordmark. The remaining six provide range without chaos.
Brand colors
Surfaces
Click any swatch to copy its hex value. The mark only appears on these four surfaces — never on gray (#9CA3AF) or arbitrary background colors.
Two typefaces. Clear hierarchy.
Do's and don'ts
Do
- Use the mark on the four approved surfaces (Dark, Dark 2, Light, Light 2)
- Keep clear space of at least 1x the mark width on all sides
- Scale cellSize, gap, and radius proportionally
- Use the animated version for hero sections and loading states
- Always split the wordmark: white/black "app" + red "mecca"
- Write "AppMecca" (capital A, capital M) in prose
- Use brand red (#FF3D5A) for primary CTAs and active states
- Pair Plus Jakarta Sans headings with Manrope body text
- Use the mark and wordmark together or independently
Don't
- Fill in the missing top-right corner cell
- Remove the bottom-right corner cell (it must be present)
- Recolor the mark cells — always use the brand palette sequence
- Stretch, rotate, or skew the mark or wordmark
- Render the wordmark in a single color
- Capitalize the wordmark in the logo ("AppMecca" is for prose only)
- Place the mark on gray, patterned, or non-approved backgrounds
- Modify the opacity diamond gradient
- Loop or repeat the pop-in animation
- Use brand red for body text or large surface areas
- Write "appmecca" or "APPMECCA" in prose
Downloads
Brand Pack (SVG)
- AppMecca mark — dark & light variants
- Wordmark — dark & light variants
- Horizontal lockup — dark & light
- Vertical lockup — dark & light
Need something specific or a different format? Contact us at info@appmecca.com.