RUUMI is Malaysia's trusted end-to-end rental platform - AI-powered tenant-landlord matching, escrow-protected payments, KYC identity verification, and auto-generated stamped tenancy agreements. Built for speed, secured by trust.
Brand Colors
Click any swatch to copy the hex value. Color details shown below each swatch.
Orange
Primary brand color. Use for CTAs, key actions, brand accents.
Teal
Secondary brand color. For supporting elements, success states, depth.
Neutral
Warm gray scale. For text, backgrounds, borders, and UI chrome.
Typography
Manrope is the single brand typeface. Type below to preview all styles live.
Manrope on Google FontsLogo Usage
All RUUMI logo variants with PNG/SVG download links. Dashed border = minimum clearspace (25% of logo height).
Horizontal Variants
Vertical Variants
Icon Variants
Minimum Sizes
| Variant | Min Width | Min Height | Usage |
|---|---|---|---|
| Horizontal | 120px | 32px | Headers, banners, hero sections |
| Vertical | 80px | 68px | Footer, sidebar, tall spaces |
| Icon | 32px | 32px | Favicon, app icon, social avatar |
| Text-only | 80px | 18px | Inline text, legal, co-branding |
Background Contrast Rules
| Logo Variant | Approved Backgrounds |
|---|---|
| icon-primary / horizontal-light / vertical-light | Light backgrounds (#FFFFFF, #F9F9F9, warm paper) |
| icon-dark / horizontal-dark / vertical-dark | Dark backgrounds (#121110, #090806, dark imagery) |
| mono-white (horizontal & vertical) | Dark solid backgrounds only (#121110, #090806) |
| icon-light (all-white icon) | Orange backgrounds (#F74D17, #FF6D47), dark photography |
Do
- Maintain clearspace (25% logo height on all sides)
- Use approved color variants only
- Ensure sufficient contrast against background
- Use vector SVG format whenever possible
- Scale proportionally from center
Don't
- Stretch, skew, or distort proportions
- Rotate the logo from its orientation
- Apply drop shadows or effects to the mark
- Place on busy or low-contrast backgrounds
- Recolor the icon mark on wordmark variants
Iconography
RUUMI uses Phosphor Icons (Regular weight) as the primary icon library. Consistent 1.5px stroke, rounded corners.
Browse Phosphor Icons →Install: npm i @phosphor-icons/react or use web CDN: @phosphor-icons/web
Asset Style System
Origami-Brushwork Hybrid v2.2
The visual language for all RUUMI marketing illustrations and ad assets. Three intensity knobs control every output.
Material Base
Felted paper with canvas grain. Flat painterly brushstrokes, visible bristle marks. No 3D impasto or raised paint.
Sample Objects & Color Pairings
Prompt Template (copy-ready)
{
"image_generation_prompt": {
"metadata": {
"version": "2.2",
"style_name": "Origami-Brushwork Hybrid"
},
"image_output_parameters": {
"aspect_ratio": "1:1 (Square)",
"composition": "Perfectly centered, white background."
},
"subject_definition": {
"main_object": "YOUR OBJECT HERE",
"form_blending_parameters": {
"low_poly_origami_structure": { "intensity": 0.70 },
"soft_3d_icon_edges": { "intensity": 0.30 }
}
},
"surface_texture_and_material": {
"material_base": "Felted paper with canvas grain",
"brush_effect_pattern": {
"brushstroke_visibility": 0.85,
"texture_type": "Flat painterly brushstrokes, visible bristle marks"
}
},
"color_palette_mapping": {
"primary_fill": ["#F74D17", "#FF6D47"],
"secondary_accents": ["#1D5852", "#E7EEED"]
},
"technical_specs": {
"render_style": "High-fidelity digital painting",
"background": "#FFFFFF",
"negative_prompt": "3D thick impasto, raised paint, shadow on floor"
}
}
}