> For the complete documentation index, see [llms.txt](https://jordan-7.gitbook.io/jordan-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jordan-7.gitbook.io/jordan-docs/internal/dilum-principles.md). # Dilum reference: principles for MegaChat Source reviewed: [Dilum Sanjaya's post](https://x.com/DilumSanjaya/status/2094467530182291587?s=20) and its 41.7-second interface video. The post explicitly frames the exercise as saturated color, dense hierarchy, and a 3D scene competing for attention. The useful lesson is how the interface controls that competition, not the specific game skin. ## What the reference is doing The video keeps a dark structural rail around a bright, central equipment stage. Hot pink, lime, cyan, amber, and violet are not spread evenly: each color owns a region or state. The interface is dense, but the hierarchy is stable. Motion changes the selected object and its local treatment without rebuilding the entire screen, so the user's spatial memory survives each transition. ## Principles and MegaChat mapping ### 1. One dominant work surface The reference gives the selected object most of the visual field and compresses navigation and metadata around it. **MegaChat:** Create Room gets one form spine and one subordinate live preview. Join Room gives the MegaChat recorder the dominant action, not a generic live-seat button. ### 2. Density is zoned, not removed Many controls fit on screen because related controls live in bounded regions with clear edges and repeated alignment. **MegaChat:** Keep the useful configuration density, but group it into room identity, enabled modules, advanced settings, and final launch. Do not inflate every choice into a card. ### 3. Color carries state Saturated hues identify selection, category, and status. They are not ambient decoration. **MegaChat:** powder blue = primary action and selection; yellow = money; green = live or verified; red/pink = recording or destructive action. A hue must not perform two contradictory jobs. ### 4. A stable shell preserves orientation The side rail and major frame stay put while the selected content changes. **MegaChat:** navigation, page title, room identity, and submit zone stay fixed in structure. Expanding Open mic or Drops adds local controls without moving unrelated settings. ### 5. Contrast comes from surfaces before glow The reference separates dark chassis, light work surfaces, colored state blocks, and the central object. Glow is secondary. **MegaChat:** solve the current black-on-black harshness with stepped blue-black surfaces and occasional powder-blue equipment panels. Do not solve it with more bloom, blur, or neon text shadow. ### 6. Geometry feels engineered Controls use short radii, strong edges, rails, and precise alignment rather than soft bubbles. **MegaChat:** 4px controls, 8px cards, 12px large shells. No text inside pills. One control shape should survive across Create Room, Join Room, Account, Bounty, and How It Works. ### 7. Typography is compact but not cryptic The hierarchy uses size, weight, and placement before decorative display treatment. **MegaChat:** Plus Jakarta Sans handles the product UI; Archivo is reserved for the landing hero. Labels stay sentence case. Uppercase tracking is restricted to short status and coordinate labels. ### 8. Motion retains context Transitions recolor or reconfigure the active zone instead of replacing the whole screen. **MegaChat:** animate state confirmation, meter changes, live signals, and recorder progress. Never float cards or pulse buttons just to make the page feel futuristic. ### 9. The live object earns depth The central 3D object has atmospheric depth because it is the point of the screen; ordinary controls stay flat and legible. **MegaChat:** video, a recording waveform, or a live room may own depth and stage lighting. Settings and money controls remain flat enough to scan immediately. ### 10. Visual energy must not create hunting Despite the color and density, the next selection remains obvious because active states and alignment are decisive. **MegaChat:** each viewport gets one filled primary action. Secondary choices use outline or neutral treatment. A user should identify the next click before reading supporting copy. ## What not to copy Do not import the reference's game inventory metaphors, 3D weapon imagery, saturated-everywhere palette, or decorative HUD text. MegaChat should borrow its controlled density, stable spatial frame, and semantic color zoning while remaining a trustworthy money product. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://jordan-7.gitbook.io/jordan-docs/internal/dilum-principles.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.