mandara

Mandara artwork

Mandara’s logo is a phoenix rising from a Mediterranean wave, in violet, cyan and silver. Mandara Studio’s app icon is the phoenix too. Login’s app mark keeps the Pharos Current shoreline, its beacon turned into a dawn keyhole.

App icons

Preview	Files	Notes
	1024 PNG master · 512 PNG · 256 PNG · 128 PNG	A phoenix rising from a Mediterranean wave, in violet, cyan and silver
	Mandara Studio SVG (installed as `org.mandara.studio`)	The phoenix: the scalable icon wraps the 512 PNG
	Mandara Login SVG · 512 PNG · 256 PNG · 128 PNG	Montaza Twilight with a dawn keyhole
	Dark-theme banner · Light-theme banner (2560×800, transparent)	The README header: the phoenix in a soft bloom beside the Alexandria wordmark; GitHub shows the one matching the reader’s theme
	Symbolic SVG	The phoenix in one colour (`currentColor`), transparent: panels and the login screen

The Pages site uses the existing 128 px phoenix as its favicon. Its page colours follow the same light or dark preference as the transparent banner, including the image background. The homepage styles and script draw the homepage in the shell’s Material You language and palettes, set in Alexandria and JetBrains Mono, self-hosted WOFF2 subsets under the SIL Open Font License. Its pictures are light and dark pairs of the demo screenshots in docs/screenshots/, and its footer draws the sea at El-Mandara in the page’s own palette. The site uses no outside images or fonts. The banner source renders at 1280×400 CSS pixels with a scale factor of two and a transparent background. Export it in each colour scheme after the fonts and logo have loaded; keep the output lossless so small lettering stays clean.

Plugins

The 82 plugins below include 81 built-ins and the Moon phase example. Each SVG has a 512-unit viewBox; each icon PNG is 256×256. Covers are 1600×900. Screenshot covers retain the supplied panel content and proportions; the other covers are illustrations.

Preview	Files	Notes
	Session · SVG · 256 PNG · Cover	Corniche · illustration
	Launcher · SVG · 256 PNG · Cover	Corniche · illustration
	Workspaces · SVG · 256 PNG · Cover	Corniche · illustration
	Active window · SVG · 256 PNG · Cover	Corniche · illustration
	Clock · SVG · 256 PNG · Cover	Twilight · illustration
	Keyboard layout · SVG · 256 PNG · Cover	Corniche · illustration
	Language · SVG · 256 PNG · Cover	Corniche · real panel
	Media · SVG · 256 PNG · Cover	Twilight · real panel
	Prayer times · SVG · 256 PNG · Cover	Twilight · real panel
	Resources · SVG · 256 PNG · Cover	Obsidian · real panel
	Process hunter · SVG · 256 PNG · Cover	Obsidian · real panel
	Network · SVG · 256 PNG · Cover	Corniche · illustration
	Bluetooth · SVG · 256 PNG · Cover	Corniche · real panel
	Audio · SVG · 256 PNG · Cover	Twilight · real panel
	Quick settings · SVG · 256 PNG · Cover	Obsidian · illustration
	Screenshot · SVG · 256 PNG · Cover	Corniche · illustration
	Clipboard · SVG · 256 PNG · Cover	Obsidian · illustration
	Main menu · SVG · 256 PNG · Cover	Corniche · illustration
	Notifications · SVG · 256 PNG · Cover	Twilight · real panel
	To-do · SVG · 256 PNG · Cover	Obsidian · illustration
	Notes · SVG · 256 PNG · Cover	Twilight · illustration
	Pomodoro · SVG · 256 PNG · Cover	Twilight · real panel
	Weather · SVG · 256 PNG · Cover	Corniche · real panel
	Wallpaper · SVG · 256 PNG · Cover	Corniche · illustration
	Moon phase · SVG · 256 PNG · Cover	Twilight · illustration
	Color picker · SVG · 256 PNG · Cover	Twilight · real panel
	Soundscapes · SVG · 256 PNG · Cover	Twilight · real panel (paused)
	Radio · SVG · 256 PNG · Cover	Twilight · illustration
	World clock · SVG · 256 PNG · Cover	Twilight · real panel
	Network speed · SVG · 256 PNG · Cover	Corniche · real panel (IP addresses blurred)
	Authenticator · SVG · 256 PNG · Cover	Obsidian · real panel (demo accounts)
	Drives · SVG · 256 PNG · Cover	Obsidian · real panel
	Containers · SVG · 256 PNG · Cover	Obsidian · real panel (summary only)
	Services · SVG · 256 PNG · Cover	Obsidian · real panel
	Power · SVG · 256 PNG · Cover	Obsidian · real panel
	Updates · SVG · 256 PNG · Cover	Corniche · real panel
	Privacy · SVG · 256 PNG · Cover	Obsidian · eye and pupil · illustration
	System tray · SVG · 256 PNG · Cover	Corniche · status lozenges · illustration
	Dock · SVG · 256 PNG · Cover	Corniche · raised app tiles and shelf · real dock capture
	App installer · SVG · 256 PNG · Cover	Obsidian · open package and download arrow · illustration
	Screen time · SVG · 256 PNG · Cover	Twilight · hourglass and warm sand · illustration
	Mini stats · SVG · 256 PNG · Cover	Obsidian · compact gauges · illustration
	Wallpaper generator · SVG · 256 PNG · Cover	Corniche · sea-glass paintbrush and gold paint drop · illustration; art prepared ahead of plugin registration
	Wallpaper depth · SVG · 256 PNG · Cover	Corniche · a clock tucked behind a rocky coast · painted scene
	Wallhaven · SVG · 256 PNG · Cover	Twilight · cream cloud with a gold download arrow · illustration
	Cursor themes · SVG · 256 PNG · Cover	Obsidian · cream pointer with a gold click dot · illustration
	Desktop clocks · SVG · 256 PNG · Cover	Twilight · glass numerals and a dial on the sea · painted scene
	System monitor · SVG · 256 PNG · Cover	Obsidian · glowing gauge rings · painted scene
	Desktop decorations · SVG · 256 PNG · Cover	Twilight · a glass disc and ribbons over the water · painted scene
	Desktop visualizers · SVG · 256 PNG · Cover	Twilight · light bars rising from the sea · painted scene
	Now playing card · SVG · 256 PNG · Cover	Twilight · a record sliding from its sleeve · painted scene
	Calendar card · SVG · 256 PNG · Cover	Corniche · a glass calendar page on the shore · painted scene
	Desktop weather · SVG · 256 PNG · Cover	Corniche · sun breaking through clouds over the bay · painted scene
	Desktop world clock · SVG · 256 PNG · Cover	Obsidian · a night globe ringed in light · painted scene
	Countdown · SVG · 256 PNG · Cover	Twilight · an hourglass in a ring of light · painted scene
	Desktop productivity · SVG · 256 PNG · Cover	Corniche · a checklist and a sticky note in the shallows · painted scene
	Desktop sky · SVG · 256 PNG · Cover	Twilight · the sun on its arc and a crescent moon · painted scene
	Desktop shortcuts and you · SVG · 256 PNG · Cover	Obsidian · a profile and glass tiles · painted scene
	Desktop fun · SVG · 256 PNG · Cover	Corniche · bubbles and a polaroid on the beach · painted scene
	Desktop info · SVG · 256 PNG · Cover	Twilight · glass info cards on the water · painted scene
	Listening ports · SVG · 256 PNG · Cover	Obsidian · illustration
	Git repositories · SVG · 256 PNG · Cover	Obsidian · illustration
	CI status · SVG · 256 PNG · Cover	Corniche · illustration
	Crash reports · SVG · 256 PNG · Cover	Obsidian · illustration
	Tailscale · SVG · 256 PNG · Cover	Corniche · illustration
	Uptime monitor · SVG · 256 PNG · Cover	Corniche · illustration
	Local AI · SVG · 256 PNG · Cover	Twilight · illustration
	Share to phone · SVG · 256 PNG · Cover	Twilight · illustration
	Shortcuts cheatsheet · SVG · 256 PNG · Cover	Corniche · illustration
	Task progress · SVG · 256 PNG · Cover	Obsidian · illustration
	Eye breaks · SVG · 256 PNG · Cover	Twilight · illustration
	Presentation mode · SVG · 256 PNG · Cover	Twilight · illustration
	Jannah · SVG · 256 PNG · Cover	Twilight · pointed arch and gold eight-pointed star · illustration
	Qur’an · SVG · 256 PNG · Cover	Twilight · open book on a gold rahle with an eight-pointed star · illustration
	Hadith · SVG · 256 PNG · Cover	Corniche · bound manuscript with a gold cover medallion and page edge · illustration
	Translator · SVG · 256 PNG · Cover	Twilight · illustration
	Phone Connect · SVG · 256 PNG · Cover	Corniche · illustration
	Feeds · SVG · 256 PNG · Cover	Obsidian · illustration
	Reddit · SVG · 256 PNG · Cover	Corniche · threaded conversation with a gold upvote arrow · illustration
	Home Assistant · SVG · 256 PNG · Cover	Corniche · illustration
	Sudoku · SVG · 256 PNG · Cover	Obsidian · cream puzzle lattice and gold selected cell · illustration
	2048 · SVG · 256 PNG · Cover	Twilight · sliding tiles and a gold merged tile · illustration

Launcher alternatives

Studio → Launcher → Button icon includes thirteen colour SVG alternatives. They keep their original gradients, render at the display scale and decode only when drawn.

Icon	Source
Amethyst medallion	SVG
Blue whorl	SVG
Coral knot	SVG
Golden rosette	SVG
Golden sunwheel	SVG
Leaf pinwheel	SVG
Lilac lattice	SVG
Pink rosette	SVG
Scarlet quatrefoil	SVG
Teal hourglass	SVG
Turquoise weave	SVG
Violet clover	SVG
Violet woven diamond	SVG

Palette and grid

Palette	sRGB anchors	Equivalent OKLCH anchors (L C h)
Mandara Corniche	Blue `#103C63` · sea glass `#40C8BD` · limestone `#FFE4AB`	`0.348 0.083 249.4` · `0.758 0.116 187.2` · `0.928 0.079 85.5`
Montaza Twilight	Indigo `#30265E` · violet `#7063B5` · coral `#EE9182`	`0.313 0.096 287.7` · `0.549 0.125 288.9` · `0.750 0.116 29.9`
Mandara Obsidian	Onyx `#101C23` · emerald `#185D54` · gold `#D9B774`	`0.219 0.022 234.7` · `0.434 0.068 182.5` · `0.794 0.094 83.5`

SVGs store sRGB values for desktop renderer compatibility. Use the OKLCH anchors when extending the palette. Keep glyph contrast high and reserve warm sand for functional accents.

Plugin category	Tile gradient	Plugins
Navigation	`#103C63` → `#286B91`	Session, Launcher, Workspaces, Active window, Keyboard layout, Language, Main menu, System tray, Dock, CI status, Shortcuts cheatsheet
System	`#124D4B` → `#268878`	Resources, Process hunter, Quick settings, Drives, Power, Privacy, Mini stats, Task progress
Connections	`#125477` → `#329DA7`	Network, Bluetooth, Network speed, Tailscale, Uptime monitor
Media	`#40316F` → `#8666AA`	Media, Audio, Radio, Screenshot, Color picker, Local AI, Share to phone
Productivity	`#843D58` → `#C47268`	Clipboard, Notifications, To-do, Notes, Pomodoro, Authenticator, Screen time
Time	`#765323` → `#B78D47`	Clock, World clock
Sky	`#30265E` → `#7063B5`	Prayer times, Weather, Wallpaper, Moon phase, Soundscapes, Eye breaks, Presentation mode, Jannah
Reading	Qur’an: `#30265E` → `#7063B5`; Hadith: `#103C63` → `#286B91`	Qur’an, Hadith
Creation	`#185D54` → `#40C8BD`	Wallpaper generator
Games	Sudoku: `#19483E` → `#101C23`; 2048: `#543675` → `#25244A`	Sudoku, 2048
Maintenance	`#14303A` → `#2F6C70`	Updates, Services, Containers, App installer, Listening ports, Git repositories, Crash reports

App tiles: 1024-unit square; tile inset 32, radius 216, primary shoreline stroke 88, rim 8. The main mark was checked at 16 px. Symbolic artwork fills its own 704-unit viewBox.
Plugin tiles: 512-unit square; tile inset 16, radius 108, primary stroke 28. Use rounded caps and joins, a centered glyph around 112–400, cream #FFF2D5, and sand #FFD58A.
Glass: one quiet diagonal gradient, a top-left highlight, a thin inner rim, and a translucent lower shoreline. Keep the glyph dominant. Language cards use simple letter-shaped paths; puzzle tiles use path-drawn numerals. Icons contain no text elements or borrowed project marks; Bluetooth uses two wireless peers.
Covers: name at the upper left in Inter; a large icon; restrained thematic linework; a floating real panel where supplied. Preserve panel proportions and use a soft shadow. UI appears only in the 21 real captures linked through the catalog; captures never show private data (demo accounts, blurred addresses, or a crop to non-identifying parts). The dock retains its full transparent capture and source corner shape, with no desktop background. The other new covers use illustrations because no suitable isolated capture is available. The desktop widget plugins and Wallpaper depth have painted scenes of their own (assets/artwork/scenes/, the catalog’s scene) behind the name and icon; screenshots of the widgets themselves are in docs/desktop.md.
The added cover motifs are watch (eye contours), shelf (dock rails), package (open carton), hourglass, aurora (flowing contours), lattice (a tilted puzzle box) and slide (spaced tiles and a merge arrow). System tray and Mini stats reuse peers and bars respectively. Mini stats is visible in Studio’s uncategorized store group; the internal Compositor commands are hidden and have no marketplace art.
Listening ports, Git repositories, CI status, Crash reports, Tailscale, Uptime monitor, Local AI, Share to phone, Shortcuts cheatsheet, Task progress, Eye breaks and Presentation mode reuse the existing motifs and palette backgrounds. Their covers are illustrations with no panel capture. Their glyph and motif notes are in artwork/prompts.json.
Sudoku pairs the Obsidian background with the lattice motif and a deep emerald-to-onyx tile. Its cream puzzle box holds a path-drawn 9 and a gold selected cell. 2048 pairs the Twilight background with the slide motif and a dusk violet-to-indigo tile: three cream tiles lead into a larger gold tile with an indigo 8. Both covers are illustrations with no panel capture; glyph notes are in artwork/prompts.json.
Jannah uses the Twilight background and existing dawn motif. Its cream pointed doorway frames a gold eight-pointed star and a soft glow, suggesting a gate opening onto light. The cover is an illustration with no panel capture; the glyph note is in artwork/prompts.json.
Qur’an uses the Twilight background and existing paper motif: a cream open book rests on a gold X-shaped rahle beneath a small eight-pointed star. Hadith uses the Corniche background and existing tiles motif: a closed manuscript has a gold cover medallion and page edge. Both use broad contours that remain readable at 32 px, with no text, calligraphy or figures. Their covers are illustrations with no panel capture; glyph notes are in artwork/prompts.json.

The homepage hero’s film (index.html, .film), 40 s at 1920×1080 and 60 fps, looping.

Preview	File	Notes
	WebM	AV1 (SVT-AV1, 10-bit, CRF 28) with Opus 112 kbit/s; the page tries it first
—	MP4	H.264 High (CRF 22) with AAC 128 kbit/s, `+faststart`; the fallback
—	Poster frame	The film’s first frame, so a poster swap is seamless

How it is made, so it can be remade for a release:

Recording. Only the headless sandbox, never a real session: MANDARA_SANDBOX_RUNTIME=/tmp/mdr-promo WLR_RENDER_DRM_DEVICE=/dev/dri/renderD128 SANDBOX_TZ=Asia/Tokyo cargo xtask sandbox up --bin <release build> --size 2880x1620 --scale 2 --studio-size 1240x700, then sandbox audio play for the fictional tracks. Render on the discrete GPU (the integrated one drops frames at this size), and add cursor_hide_timeout=1 to the sandbox’s config/mango/config.conf (then msg compositor dispatch reload_config) so the pointer only shows while it moves. Each scene is recorded on its own with wl-screenrec --no-cursor --low-power=off -b "24 MB" --codec hevc on the sandbox’s Wayland socket (damage-driven, so frames come at the display’s 60 Hz while something moves), driven by timed mandara msg commands, wtype for typing (wait 200 ms after it starts: the first key after its keymap upload is lost) and sandbox pointer for Studio’s click.
Scenes. Wallpapers come from msg wallgen generate (liquid, low-poly and glass styles, seeds 0x41–0x55). Looks (look apply qaitbay-forest, anfushi-wave, night-frame, each with its own wallpaper); the four bar styles; the launcher’s beacon look with music and =12*24+7 typed; panel open media, panel open clock, sidebar toggle; desktop widgets with the System monitor’s GPU gauges (MANDARA_RESOURCES_DEMO readings) and desktop widgets press … media:next; Studio’s Themes page switched to light, then to two themes with theme set; the Material You lock (lock.design, lock --demo) unlocked by typing. Run look restore and bar style none between scenes. No notifications, no personal data, no faith content.
Edit. Every scene is cut to whole beats of a 120 BPM grid, framed (a gentle crop or push on the 2880×1620 frames), given an Alexandria caption pill and followed by an end card rendered frame by frame from HTML with headless Chromium. The last 0.3 s fade into the first frame, so the loop has no seam.
Music. Original and fully synthesised: 20 bars of 120 BPM in D major (Bm–G–D–A), with a four-on-the-floor kick, claps, hats, a side-chained supersaw pad, a sub bass, a plucked arpeggio, a short lead hook, a riser into the end card and a swish on each cut, all built from oscillators and noise with no samples, then mixed to about −15 LUFS. The reverb tail wraps to the start so the music loops too.

Sources and checks

Preview	File	Notes
	Corniche background	Original generated sea-glass ribbons; RGB source
	Twilight background	Original generated dusk arc and warm horizon; RGB source
	Obsidian background	Original generated emerald glass and gold caustic; RGB source
—	Generation prompts and art notes	Three original background prompts; glyph, motif and panel notes for the added plugins
—	Cover catalog	Names, palettes, motifs, angles, original panel paths and crop bounds
—	Cover compositor	`cargo xtask art --compose`: deterministic composition; NeuQuant 256-color PNG with Floyd–Steinberg dithering
—	Artwork checks	`cargo xtask art --check` (also `cargo test -p xtask`): brand and icon sources and exports, cover dimensions, budget and provenance, panel masks, motif renders, this file list and the embedded set
—	Complete file list	Every file in this artwork delivery

The backgrounds were generated separately with the built-in image generation tool. Icons and cover linework are hand-authored vectors. Screenshot sources stay in ../docs/screenshots/; their interiors are preserved before final color optimization. Studio captures informed the family styling.

The whole pipeline is Rust (xtask/src/art.rs): SVGs render with resvg, cover lettering is drawn with ab_glyph from the installed Inter font (MANDARA_COVER_FONT overrides), and covers are quantized to a 256-color palette with dithering. Icon PNGs are losslessly optimized.

Embedded in the binary

cargo xtask art turns every built-in plugin’s art into the compact set the shell and Studio embed, in crates/mandara-ui/assets/plugin-art/<id>/: icon.webp (128 px, rendered from the SVG), icon@2x.webp (256 px) and cover.jpg (960×540, JPEG quality 82; lossless cover.webp when the cover has transparency), plus the generated index.rs table. The generated files are committed — they are build inputs. Example plugins in plugins/examples/ ship their own icon.png / cover.png inside their package instead.

The embedded-art ceiling is 8,050,000 bytes (7.68 MiB), rounded to 50,000 bytes. Icons are embedded as pixel-exact lossless WebP and covers as 960×540 JPEG. The 81-plugin set uses 8,046,210 bytes (7.67 MiB), leaving 3,790 bytes (3.7 KiB) of headroom: the next new plugin’s art needs a smaller set or a raised ceiling.

cargo xtask art --compose            # render source icons and compose covers (--only ID)
cargo xtask art --compose --out /tmp/mandara-covers  # preview covers without source changes
cargo xtask art                      # rebuild the embedded icons and covers
cargo xtask art --check              # validate everything

This site is open source. Improve this page.