Identity
The foundational layer. Every visual, verbal, and systemic decision originates here.
| Name | Ayman Elmasry |
| Role | Visionary · AI Orchestrator · Brand Designer · Founder @ AEL Digital Studio |
| Entity (UAE) | Ayman Elmasry LLC |
| Entity (Egypt) | Ayman Elmasry Advertising & Marketing |
| Locations | Dubai · Egypt · Kuwait |
| Brand Name | AEL Digital Studio™ |
| Type | AI-first technology and design company |
| Domain | aymanelmasry.com |
| Secondary | aymanelmasry.me |
| GitHub | github.com/aymanelmasryael |
| ayman@aymanelmasry.me |
Empower creators, developers, designers, and organizations through intelligent visual systems and AI-powered design infrastructure.
Become one of the world's leading companies in AI-driven visual computing, computational creativity, and intelligent design systems.
| Innovation | Advance the frontier of what intelligence can design. |
| Trust | Systems that earn confidence through transparency and reliability. |
| Precision | Every pixel, every token, every decision — intentional. |
| Intelligence | Design informed by data, research, and computational reasoning. |
| Simplicity | Remove until only function remains. |
| Clarity | Ambiguity is a design failure. |
| Scalability | Systems that grow without breaking. |
| Research | Continuous inquiry into visual computing and AI. |
| Engineering Excellence | Code-level rigor applied to visual output. |
| Human-Centered Design | Technology in service of human capability. |
Target Audience
Invisible Design. Every visual element must have a functional purpose. Whitespace is part of the system. Minimal interfaces. Swiss-inspired typography. Grid-based layouts. Strong visual hierarchy. No decorative effects. No unnecessary gradients. No visual noise.
Logo System
The AEL mark is a closed modular system on a 7×7 grid. It is never redrawn, never reinterpreted, never stylized.
Construction
The mark is built from 19 identical 32.4-unit squares placed on a strict 7×7 grid. Every square is the same size. Every position is measured. Nothing is drawn freehand.
The composition is not a picture — it is a closed permutation system. Any single square can be relocated to close any empty cell without breaking the mark. This property makes the logo a solvable grid, related in spirit to the modular logic of Superstudio (1969) and Enzo Mari's Autoprogettazione (1974).
7×7 construction grid · 19 squares · 1 movable module
Reading the Mark
Three letters form the A·L·E monogram — A (Ayman), L (the second letter of Elmasry — E·L·masry), E (Elmasry). The mark reads A·L·E, deliberately avoiding "AE", which is universally recognized as Adobe After Effects.
Three letters emerge from the same grid:
| A | Formed in negative space at the top-left — an arch carved from a solid block, with a square void completing the counter. A = Ayman, the founder. |
| E | Formed on the right columns — upper bar, lower bar, and vertical stem. The middle bar is provided by the movable module when it sits at mid-height. E = Elmasry, the family name. |
| L | The hidden initial from Elmasry (E·L·masry) — formed twice: once as a top strip (Γ shape), once as a lower strip (L shape). |
The Movable Module
The seven-square strip at the bottom is not decoration. It is a functional key. When moved to mid-height, it simultaneously completes the A crossbar and the E middle bar. This is the operating logic of the mark — the logo is not fixed; it is solvable.
Primary Logo
Dark background · Blue background · Light background
Clear Space & Minimum Sizes
Minimum clear space on all four sides = 1 unit.
At 80px logo: minimum clear space = 11.4px.
Print (offset): 14mm height.
Embroidery: 22mm height.
Favicon: 16px — icon-only variant required.
Correct Usage
Color System
A calibrated spectrum. Click any "Copy HEX" to copy the value.
Primary
Secondary
Accent & Semantic
Neutral Scale
Typography
A two-font system engineered for readability, hierarchy, and Swiss precision.
Font Stack
| Role | Font | Fallback |
|---|---|---|
| Heading | Inter | -apple-system, sans-serif |
| Body | Inter | -apple-system, sans-serif |
| Mono | JetBrains Mono | SF Mono, monospace |
Type Scale
Components
Standardized interface primitives.
Buttons
Tags
Imagery
Visual assets governed by precision.
AI-Generated Image Guidelines
Dark environments, geometric compositions, blue/neutral palette, no text, no fantasy. Prompt structure: [subject] · dark environment · minimal composition · blue accent · architectural photography
Voice
The linguistic layer of the brand.
Tone Principles
| Professional | Expert, no casual language. |
| Technical | Precise terminology. |
| Minimal | Short sentences. One idea per sentence. |
| Confident | Direct statements. No hedging. |
Examples
Templates
Standardized output formats.
| Template | Dimensions | Format |
|---|---|---|
| LinkedIn Post | 1080 x 1350 | PNG / JPG |
| Instagram Post | 1080 x 1080 | PNG / JPG |
| Presentation | 1920 x 1080 | PDF / PPTX |
| Open Graph | 1200 x 630 | PNG |
| Favicon | 512 x 512 | SVG / PNG |
Assets
Production-ready files and the complete operating protocol.
Logo Package
| File | Format | Usage |
|---|---|---|
| ael-logo-primary | SVG | Web, digital interfaces |
| ael-logo-white | PNG | Dark backgrounds |
| ael-logo-monochrome-black | SVG | Light backgrounds |
Master Operating Protocol
The complete AEL Master Operating Protocol (v1.0) in raw text format. This is the Single Source of Truth for AI system prompting.
Protocol Summary
Architectural principles distilled from the full AEL Master Operating Protocol.
Core Disciplines
Motion System
Every animation is functional. Motion communicates state, not decoration.
Interactive Preview
Motion Principles
| Purposeful | Every animation must have a functional reason. |
| Subtle | Motion should enhance, not distract. |
| Consistent | Same interaction = same motion across all products. |
| Accessible | Respect prefers-reduced-motion. Always. |
| Fast | No animation longer than 600ms. Ever. |
Easing Curves
| Token | Value | Usage |
|---|---|---|
| ease-out | cubic-bezier(0.4, 0, 0.2, 1) | Entrances, reveals |
| ease-in | cubic-bezier(0.4, 0, 1, 1) | Exits, dismissals |
| ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | State changes |
| linear | linear | Progress bars, spinners |
Iconography
A consistent, minimal icon set built on a strict grid.
Approved Icon Library
Based on Lucide — an open-source, consistent icon set. 24×24 grid, 2px stroke, round caps and joins.
Icon Specifications
| Grid | 24 × 24 px |
| Stroke | 2 px |
| Cap / Join | round / round |
| Fill | none (outline only) |
| Color | currentColor (inherits text) |
Spacing & Layout
An 8px base grid governs every dimension. Consistency is enforced, not optional.
Spacing Scale
Layout Grid — 12 Columns
| Columns | 12 |
| Gap | 24px |
| Max Width | 1280px |
| Margins (Desktop) | 80px |
| Margins (Mobile) | 24px |
Elevation & Shadows
Depth communicates hierarchy. Every shadow has a purpose.
Elevation Scale
Accessibility
AEL products are usable by everyone. Accessibility is a requirement, not a feature.
Standards
Contrast Ratios
| Combination | Ratio | Rating |
|---|---|---|
| White on AEL Blue (#0074FF) | 4.8:1 | AA |
| White on Neutral-900 (#111) | 17.5:1 | AAA |
| Neutral-400 on Neutral-900 | 7.2:1 | AAA |
| Blue on Black | 5.3:1 | AA |
Responsive System
Every AEL product adapts fluidly across screens. Mobile-first, always.
Breakpoints
Brand Variants
Different contexts require different tonal expressions. Same brand, adaptive voice.
Logo Variants
Digital Usage
Production-ready specifications for every digital surface.
Platform Specifications
| Platform | Dimensions | Safe Area | Format |
|---|---|---|---|
| Website Hero | 1920 × 1080px | 15% all sides | JPG · PNG |
| LinkedIn Cover | 1584 × 396px | 200px left + right | PNG |
| Twitter/X Header | 1500 × 500px | Center focus | JPG |
| GitHub Social | 1280 × 640px | 200px bottom | PNG |
| Presentation (16:9) | 1920 × 1080px | 80px all sides | PPTX · PDF |
| Business Card | 89 × 51mm | 4mm all sides | PDF · AI |
Logo Misuse
Common mistakes that dilute the brand. Every one of these is prohibited.
Prohibited Modifications
Data Visualization
Charts, KPIs, and metrics — built with restraint, powered by data.
KPI Cards
Bar Chart
Forms & Inputs
Every field has a purpose. Every validation has a message. Every state has a style.
Input States
States & Feedback
Every system moment is designed — including the empty ones.
Empty States
Localization
Every AEL product supports both LTR and RTL from day one. Arabic is a first-class language.
Side-by-Side Preview
English (LTR)
AEL Digital Studio builds intelligent visual systems that empower creators, developers, and organizations worldwide.
Get Startedالعربية (RTL)
استوديو AEL الرقمي يبني أنظمة بصرية ذكية تُمكّن المبدعين والمطورين والمؤسسات حول العالم.
ابدأ الآنRTL Rules
| Direction | dir="rtl" on html or container |
| Text align | text-align: right (or use logical props) |
| Margins | Use margin-inline-start/end |
| Padding | Use padding-inline-start/end |
| Icons | Mirror directional icons (arrows, chevrons) |
Print Specifications
The brand must hold up on paper. Every print material follows the same discipline.
Print Materials
Business Card — Two Sides
aymanelmasry.com
github.com/aymanelmasryael
Token Architecture
The code-level layer. Every visual decision in this document resolves to a CSS custom property — compliant with Tailwind v4 and shadcn/ui conventions.
One source of truth. AEL tokens are split into three tiers: Primitive (raw palette), Semantic (intent-driven aliases), and Scale (Tailwind v4 compatible scales). Semantic tokens never reference primitives directly — they resolve through the OKLCH color space, allowing automatic gamut mapping and perceptual uniformity across displays. Every OKLCH value ships with a HEX fallback for legacy browsers.
Semantic Token Pairs
Every surface token is paired with its foreground counterpart. This guarantees contrast integrity by design — never by accident.
Structural Tokens
| Token | Value | Role |
|---|---|---|
| --radius | 0.625rem (10px) | Global corner radius for cards, popovers, inputs |
| --border | #EBEBEB · oklch(92.2% 0 0) | Default divider and outline color |
| --input | #EBEBEB · oklch(92.2% 0 0) | Form field border and background baseline |
| --ring | #B3B3B3 · oklch(70.8% 0 0) | Focus ring color for keyboard navigation |
Radius System
Chart Palette
A five-color perceptually balanced sequence for data visualization. Optimized for deuteranopia and protanopia safety.
Sidebar Tokens
Tailwind v4 Typography Scale
Spacing & Container Tokens
| Token | Value | Tailwind Class |
|---|---|---|
| --spacing | 0.25rem | p-1 · m-1 · gap-1 |
| --container-md | 28rem (448px) | max-w-md |
| --container-6xl | 72rem (1152px) | max-w-6xl |
Source Block — Copy Raw Tokens
Token Governance
Changelog
Every meaningful change to the AEL Brand & Operating System — documented, dated, and traceable. This project follows Keep a Changelog and Semantic Versioning.
Versioning Policy
v5.3.2 — Dark Theme & Logo Corrections Current
Released 2026-10-11 · Latest
Changed
| Tokens | Semantic tokens re-aligned to the AEL dark theme — --primary is now #0074FF (brand blue), --background #000000, --foreground #FFFFFF. Surface, sidebar, and ring tokens updated to match. |
Fixed
| Logo System | Corrected logo color variants — Primary Logo: blue background now renders a fully white mark, light background a black arch. Brand Variants: Premium Gold, Monochrome White, and Monochrome Black now use their correct colors. |
v5.3.1 — Monogram Documentation
Released 2026-10-11 · Superseded by v5.3.2
Added
| Logo System | Documented the A·L·E monogram origin — A (Ayman), L (the second letter of Elmasry), E (Elmasry). Added naming rationale: "ALE" avoids the universally-recognized "AE" = Adobe After Effects. |
Fixed
| Logo System | Corrected "Reading the Mark" — L is now documented as the hidden initial from Elmasry (E·L·masry), replacing the incorrect "matching the two initials of the owner's name". |
v5.3.0 — Enterprise Edition
Released 2025 · Superseded by v5.3.1
Added
| Logo System | Logo Variant Switcher — 11 color variants (4 Canonical + 7 Extended preview) with persistent state via sessionStorage |
| Logo System | Classification card — Orthogonal Modular Grid Mark / Closed Permutation System |
| Logo System | Clear Space & Minimum Sizes specifications (28px digital, 14mm print, 22mm embroidery, 16px favicon) |
| Logo System | Full 7×7 construction grid diagram with 19 squares labeled |
| Enterprise | Section 26 — Changelog with SemVer policy |
| Enterprise | Section 27 — Dual license (MIT + CC BY 4.0) |
| Enterprise | Section 28 — Accessibility Statement (WCAG 2.2 AA) |
| Enterprise | Section 29 — Glossary with 20 key terms |
| Enterprise | Section 30 — FAQ with 10 common questions |
| Enterprise | Section 31 — Contributing guidelines with Conventional Commits |
| Enterprise | Section 32 — Related Documents & Contributors |
Changed
| Layout | Content now centers in the space remaining after the sidebar — resolves empty-space regression on wide screens (Mac M4, 4K) |
| Layout | Added progressive max-width scaling: 1120 → 1200 → 1280 → 1360px across breakpoints |
| Tokens | Every OKLCH value now ships with a HEX fallback for legacy browsers (Safari < 15.4) |
| Identity | Owner entity (Egypt) corrected to "Ayman Elmasry Advertising & Marketing" |
Fixed
| Logo System | Description corrected: mark is 19 squares on a 7×7 grid — not 16 squares. Three letters (A, E, L) now properly documented. Movable Module role documented. |
| Logo System | Canvas rendering — colors transition smoothly on variant change |
| Accessibility | Added role="status" and aria-live to variant status bar |
v5.2.1 — Layout Correction
Superseded by v5.3.2
| Fixed | Content centering on wide screens — body uses padding-left instead of margin-left |
| Fixed | Progressive max-width for 1600px, 1920px, 2560px breakpoints |
v5.2.0 — Variant Switcher
Superseded by v5.3.2
| Added | Logo Variant Switcher — 11 variants with Canonical/Extended split |
| Added | Status bar with mode-aware color (green for canonical, amber for preview) |
v5.1.0 — Logo Correction
Superseded by v5.3.2
| Fixed | Section 02 — Logo System rewritten with correct 19-square count, three-letter reading (A · E · L), and Movable Module documentation |
| Added | Classification card — Orthogonal Modular Grid Mark / Closed Permutation System |
| Added | Clear Space and Minimum Sizes specifications |
| Added | 7×7 construction grid diagram |
v5.0.0 — Enterprise Edition Foundation
Previous baseline
| Added | Enterprise features: Ctrl+K search, Light/Dark theme, Back-to-top, Prev/Next nav, Reading progress |
| Added | Export tokens as JSON, Print to PDF, Copy section, Anchor links |
| Added | Skip link, ARIA landmarks, prefers-reduced-motion, focus management |
| Added | Mobile menu, responsive breakpoints, print stylesheet |
v4.1.0 — Token Layer
| Added | Token Architecture section — Tailwind v4 + shadcn/ui compatible |
| Added | Semantic token pairs, chart palette, sidebar tokens, radius system |
| Added | Typography scale, spacing tokens, container tokens |
| Removed | Section 25 — Computational Aesthetics (Live Artifact) — deprecated |
v4.0.0 — Foundation
| Added | Initial 25-section Brand & Operating System |
| Added | Identity, Logo, Color, Typography, Components, Imagery, Voice |
| Added | Templates, Assets, Protocol, Motion, Iconography, Spacing, Elevation |
| Added | Accessibility, Responsive, Brand Variants, Digital Usage, Logo Misuse |
| Added | Data Visualization, Forms, States, Localization (RTL), Print Specifications |
Full History
The complete changelog with every commit, issue, and pull request is maintained on GitHub.
License
Dual-licensed. Code is MIT; brand documentation is CC BY 4.0. This is the same licensing strategy used by GitHub's Primer, Tailwind CSS, and shadcn/ui.
Two Licenses, One System
The HTML, CSS, and JavaScript of this document — including the token architecture, component styles, search implementation, and export logic — are released under the MIT License. You may use, copy, modify, merge, publish, distribute, sublicense, and sell copies with attribution only.
→ Read LICENSE on GitHubThe brand guidelines, design tokens, visual specifications, and written documentation are licensed under Creative Commons Attribution 4.0 International. Share and adapt for any purpose — including commercial — provided you give appropriate credit to Ayman Elmasry / AEL Digital Studio.
→ Read CC BY 4.0Permissions Matrix
| Action | Code (MIT) | Docs (CC BY 4.0) |
|---|---|---|
| Use in commercial projects | ✅ Yes | ✅ Yes |
| Modify and redistribute | ✅ Yes | ✅ Yes |
| Sublicense | ✅ Yes | ✅ Yes |
| Require attribution | ⚠ Required | ⚠ Required |
| Use AEL logo commercially | ❌ Not permitted | ❌ Not permitted |
| Claim as own brand | ❌ Not permitted | ❌ Not permitted |
| Warranty | ❌ None | ❌ None |
What You Can Do
Attribution Format
When reusing this system, include the following attribution in your project's README or footer:
Commercial Use of the AEL Brand
If you wish to use the AEL name, logo, or brand assets in a commercial context — including but not limited to co-branding, partnership materials, or derivative products — please contact us in writing first.
Accessibility Statement
AEL Digital Studio is committed to digital accessibility for everyone. This document is a working example of that commitment.
Conformance Status
This document conforms to WCAG 2.2 Level AA. Where practical, we exceed to Level AAA. We test continuously with automated tools (axe-core, Lighthouse, WAVE) and manually with screen readers (NVDA on Windows, VoiceOver on macOS and iOS).
Measures Taken
Known Limitations
| Area | Limitation | Workaround |
|---|---|---|
| Search modal | Focus trap is manual, not native dialog | Escape key closes; Tab cycles within modal |
| Motion demo | Uses transform on hover | Disabled under prefers-reduced-motion |
| JSON export | Downloads directly to file | Uses Blob API; no screen reader announcement beyond toast |
Feedback
We welcome your feedback on the accessibility of this document. If you encounter barriers, please contact us — we aim to respond within 5 business days.
Glossary
Definitions of key terms used throughout this document. Copy any term for quick reference.
Design Tokens
--blue: #0074FF) with no semantic meaning. Never used directly in components.--primary) mapping a primitive to a functional role.--primary / --primary-foreground) to guarantee contrast.Color Science
#FFFFFF) declared before a modern value (e.g., oklch(100% 0 0)) for browser support.Accessibility
role, aria-label, aria-live that improve screen reader support.Localization
margin-inline-start that adapt automatically to text direction.Web & Infrastructure
Versioning & Process
Design System Terms
Frequently Asked Questions
Common questions about the AEL Brand & Operating System. If your question is not answered here, open an issue on GitHub.
About the System
What is the AEL Brand & Operating System?
Who is this system for?
Why publish this publicly?
Is the AEL logo available for reuse?
Usage & Licensing
Can I use the token architecture in my own project?
Can I use this as a template for my own brand system?
What is the difference between MIT and CC BY 4.0?
Technical Details
Is the system compatible with Tailwind and shadcn/ui?
--background, --foreground, --primary, etc.), and the scale tokens match Tailwind v4's --text-* and --spacing conventions. You can drop the :root block directly into any Tailwind v4 project.Why use OKLCH instead of HEX or HSL?
Does it support Arabic / RTL layouts?
dir="rtl" and dir="ltr". All margins and paddings use logical properties where relevant.How do I export tokens for Figma or Style Dictionary?
Contributing & Roadmap
How can I contribute?
Is there an npm package?
@ael/tokens is on the Q3 2025 roadmap. Watch the repository for updates or subscribe to the RSS feed.How often is the system updated?
Contributing
How to help improve the AEL Brand & Operating System. We welcome contributions from designers, developers, writers, and translators.
Ways to Contribute
Development Setup
This is a single-file HTML document with no build step. To contribute:
Commit Convention
We follow Conventional Commits. Every commit message must use one of the following prefixes:
| Prefix | Purpose | Example |
|---|---|---|
| feat | New feature | feat(logo): add dark mode variant |
| fix | Bug fix | fix(nav): correct scroll offset |
| docs | Documentation | docs(readme): clarify installation |
| style | Formatting | style(tokens): normalize spacing |
| refactor | Restructure | refactor(css): extract variables |
| perf | Performance | perf(images): convert to WebP |
| test | Testing | test(a11y): add axe checks |
| chore | Maintenance | chore(deps): bump actions |
Pull Request Checklist
| Code style | Follows existing conventions — 2-space indent, semantic tokens, ARIA labels |
| CHANGELOG | Updated under the [Unreleased] section in Section 26 |
| Documentation | Updated if behavior, tokens, or structure changed |
| Accessibility | WCAG 2.2 AA maintained or improved — test with keyboard + screen reader |
| Testing | Verified on Chrome, Firefox, Safari, and mobile (iOS or Android) |
| Links | All links tested and working |
| Screenshots | Include before/after screenshots for visual changes |
| Commits | Squashed and follow Conventional Commits format |
Code of Conduct
We are committed to a welcoming, inclusive community. Be respectful. Assume good intent. Disagree on ideas, not on people. Full policy in the linked CODE_OF_CONDUCT.md.
Recognition
All contributors are credited in the "Contributors" section on GitHub and in the release notes of the version they helped shape. Significant contributions are mentioned in the Changelog under "Thanks to".
Related Documents
Other repositories, documents, and resources from AEL Digital Studio. Every file below is public and maintained.
Repository Files
AEL Product Line
External Resources
Contributors
Every person and system that shaped this document.
License & Attribution
This document is dual-licensed: MIT for code, CC BY 4.0 for documentation. See Section 27 — License for full details.