# Rahhal's Marsam

> Rahhal's design system: reusable React components, light and dark design tokens, downloadable brand icons, and English/Arabic interface patterns.

If you need the Rahhal icon or logo, start with the first section. Fetch any linked file with a normal HTTP GET; no JavaScript or authentication is required.

## Rahhal icons and brand assets

- [Rahhal icon documentation](https://marsam.rahhal.app/components/icons.md): Direct PNG and SVG downloads, light and dark variants, React examples, and guidance distinguishing brand assets from UI icons.
- [Rahhal icon PNG](https://marsam.rahhal.app/brand/app-icon-light.png): Default light consumer Rahhal app icon, ready to download and use in an image element or React component.
- [Rahhal icon dark PNG](https://marsam.rahhal.app/brand/app-icon-dark.png): Dark consumer Rahhal app icon for dark backgrounds and dark home screens, available as a direct image download.
- [Rahhal icon SVG](https://marsam.rahhal.app/brand/app-icon-light.svg): Light Rahhal icon asset in SVG format for browser favicons and clients accepting SVG files.
- [RahhalIcon renderer](https://marsam.rahhal.app/components/rahhal-icon.md): React renderer for image URLs, emoji, and catalog icon strings; pass the Rahhal asset URL explicitly.

## Documentation

- [Complete reference](https://marsam.rahhal.app/llms-full.txt): All component documentation, design token values, guidelines, frequently asked questions, and brand assets in one text response.
- [Full component inventory](https://marsam.rahhal.app/skill.md): Every catalog entry linked to its Markdown reference, with shared package conventions and cross-platform guidance.
- [Component catalog](https://marsam.rahhal.app/components.md): Browse the complete component list by category with descriptions and links to each component reference.
- [Guidelines](https://marsam.rahhal.app/guidelines.md): Rules for composing interfaces, using theme tokens, supporting Arabic and RTL, and contributing shared components.
- [Why Marsam](https://marsam.rahhal.app/why.md): Explains how shared packages keep Rahhal mini-app interfaces, localization, and authentication behavior consistent across products.
- [Frequently asked questions](https://marsam.rahhal.app/faq.md): Onboarding answers about design tokens, package imports, auth, localization, and finding or contributing a missing component.

## Foundations and common components

- [Colors and radius](https://marsam.rahhal.app/components/colors.md): Complete light and dark color tables with hexadecimal values, HSL channels, CSS variables, Tailwind classes, and radius tokens.
- [Typography](https://marsam.rahhal.app/components/typography.md): Font families for web, iOS, and Android, plus type scales, font weights, and bilingual typography usage.
- [Button](https://marsam.rahhal.app/components/button.md): Button imports, variants, sizes, and composition guidance for consistent actions throughout Rahhal mini-app interfaces.
- [Card](https://marsam.rahhal.app/components/card.md): Shared card surfaces and composition primitives for grouping related interface content using the current theme tokens.
- [Form](https://marsam.rahhal.app/components/form.md): Form field helpers and react-hook-form integration for labels, descriptions, validation messages, and accessible input composition.
- [Embedded mode](https://marsam.rahhal.app/components/embedded-mode.md): Native host integration and shared chrome behavior when a mini-app runs inside Rahhal on mobile or desktop.

## Retrieval guidance

- Download the linked PNG or SVG bytes directly when an image file is requested.
- Read /components/icons.md for React usage and all available brand asset variants.
- Use /llms-full.txt when the task needs the complete catalog in one request.
- Read an individual component Markdown file for focused implementation work.
- Use the HTML page linked in each reference for interactive examples.

## Key Facts

- Marsam is the design-system catalog for Rahhal mini-apps.
- There are 58 catalog entries across reusable components, foundations, and shared patterns.
- UI components come from @rahhal/ui; design tokens come from @rahhal/themes.
- Supported interface languages are English and Arabic, including RTL layout.
- The official icon documentation is /components/icons; RahhalIcon is a separate image and catalog-value renderer.
- Every component has a plain Markdown reference at /components/<slug>.md.
- This catalog has UI-only sign-in demonstrations; they do not authenticate visitors.

## Optional

- [Marsam homepage](https://marsam.rahhal.app/): Overview of Rahhal's design system with live component previews and links to the documentation and brand assets.
- [Sitemap](https://marsam.rahhal.app/sitemap.xml): Canonical public documentation pages for search crawlers, excluding sign-in demos and missing pages from the index.
- [Crawler policy](https://marsam.rahhal.app/robots.txt): Public crawler access rules and the canonical sitemap location used by the Marsam documentation site.