Azemmur is an open-source component distribution built to provide developers with easy-to-use, customizable, adaptable, and accessible UI components. Each component is crafted to be beautiful by default, flexible by design, and ready to integrate into any modern React project.

Azemmur is not a traditional npm library. Instead, it offers a source-first distribution of components that developers can copy, extend, and shape to fit their own design systems. This approach keeps everything transparent, familiar, and fully in your control.

Built with React, Tailwind CSS, Motion, and shadcn registry, and inspired by modern UI craft, Azemmur aims to provide developers with a solid foundation for creating thoughtful, accessible, and polished interfaces.

Source-first, fully editable React components, built with Tailwind, Motion, and shadcn.

Brand Essence

Azemmur is a living, evolving collection — inspired by the olive tree, rooted in thoughtful design, and built to grow alongside its community, through contribution and iteration. It’s a space to build, refine, and share UI components that embody accessibility, beauty, and developer's freedom.

Name & Origin

The name Azemmur originates from the Chaoui word for "Olive Tree" a tree that has thrived across North Africa — and the world — for centuries. The olive tree is a quiet witness to time: enduring harsh seasons, offering fruit and shade, and connecting generations through its deep roots.

Symbolism

The olive tree’s qualities inspire Azemmur’s core principles, linking its origins to the way the library is built:

• Resilient and reliable, like deeply rooted branches, Azemmur components are stable, consistent, and dependable across projects.
• Steadily growing over time, the library is adaptable and easy to expand, allowing developers to customize and evolve components as their needs change.
• Generous in its offering, Azemmur is open-source and designed for sharing, enabling collaboration and learning across the developer community.
• Deeply connected to its roots, the library prioritizes accessible and thoughtful design, serving all users inclusively.
• Reaches outward naturally, providing flexible, modular components that integrate smoothly into diverse projects and design systems.
• Balanced and harmonious, Azemmur combines aesthetics, usability, and performance, ensuring components feel polished and intentional.

Mission

Building on these principles, Azemmur brings its mission to life through a component collection that:

• Adapts effortlessly, shaping itself to fit a wide range of projects and design needs.
• Moves with intention, offering interactions that feel alive but remain comfortable and clear.
• Balances form and function, delivering components that are elegant, usable, and coherent.
• Invites collaboration, giving developers the freedom to explore, modify, and contribute.
• Empowers every user, built to be intuitive, inclusive, and reliable.
• Evolves gracefully, remaining flexible, maintainable, and open to growth over time.

Visual Identity

A symbol of seeded foundations and organic growth — reflecting Azemmur’s open, adaptable approach to UI components.

Logo Symbolism

Azemmur’s symbol is built around the idea of growth through openness.

The outer form is a single organic silhouette — soft, asymmetrical, and intentionally unresolved. It subtly echoes both an olive leaf and the letter “a”, grounding the mark in its name while avoiding literal representation. The form feels grown rather than constructed, reflecting a system designed to evolve through use.

At the center sits a contained structure inspired by an olive seed — not as an object, but as a concept: a complete system in its simplest state. Within it, a tree emerges, symbolizing components growing from shared foundations — consistent, reusable, and shaped by context.

This relationship between outer and inner forms expresses Azemmur’s core approach:

• Source-first — everything is visible, editable, and in your control
• Flexible by design — structure without rigidity
• Crafted defaults — beauty that doesn’t dictate outcomes

Rather than prescribing a single meaning, the symbol allows multiple readings to coexist — much like the components themselves. It represents a foundation that supports growth, adaptation, and personal expression within a shared system.

Combined Interpretation

Together, the leaf, the seed, and the tree branching pattern form a symbol that communicates:

• A living system, like an olive tree
• A modular architecture, like a component library
• A protected core, like a seed inside its fruit
• A cultural root, grounded in Chaoui/North African heritage

The symbol reflects Azemmur’s purpose:

to grow, share, and evolve — through components built to be accessible, adaptable, and beautifully crafted.

Logo Variations

Azemmur uses a structured logo system designed to adapt across layouts while preserving a single, consistent identity.
Each variation serves a clear spatial or contextual purpose.

Primary Logo

• Symbol and wordmark arranged horizontally
• Default and most recognizable form of the Azemmur logo
• Use in headers, navigation bars, landing pages, and wide layouts
• Preferred whenever horizontal space is available

Secondary Logo

• Stacked version of the symbol and wordmark
• Use in centered layouts, covers, posters, and square or vertical spaces
• Ideal when horizontal space is limited but full brand presence is required

Brand Mark

• Symbol-only version of the logo
• Use when the brand is already established or space is constrained
• Suitable for navigation elements, component previews, social avatars, and UI accents
• Should not replace the primary or secondary logo in first-impression contexts

Submark

• Simplified or framed version of the symbol
• Designed for small-scale or supporting uses
• Use for favicons, app icons, stamps, badges, or system-level identifiers
• Must remain legible at very small sizes

Logo Usage

To maintain consistency and protect Azemmur’s brand identity, follow these usage rules:

Clear Space

• Maintain a minimum clear space around the logo equal to the height of the symbol.
• No text, icons, or graphics should encroach on this space.

Minimum Size

• Symbol + Wordmark: 40px height (digital) / 1 inch (print)
• Symbol-only: 24px height (digital) / 0.6 inch (print)

Color Variations

• Use the primary logo on light backgrounds.
• Use the inverted logo on dark backgrounds.
• Monochrome versions may be used when color printing is limited.

Do’s

• ✅ Keep proportions consistent
• ✅ Use the logo on a solid or lightly textured background
• ✅ Maintain legibility across sizes

Don’ts

• ❌ Do not stretch, distort, or rotate the logo
• ❌ Do not change colors outside the approved palette
• ❌ Do not overlay the logo on busy imagery without a protective background

Logo Decision Matrix

Color Palette

Azemmur’s palette is drawn from olive leaves, wood, and North African landscapes — calm tones designed to support focus, clarity, and longevity.

Together, these colors create an identity that is:

• calm and focused
• earthy and grounded
• minimal and modern
• distinctive without being loud

They support Azemmur’s mission: building UI that feels crafted, natural, and timeless.

Downloadables

• Logo files
  • Primary
  • Secondary
  • Brand Mark
  • Submark