Atlas Melbourne Soil & Building Map

# Design from Reference: Atlas Melbourne Soil & Building Map Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Atlas - **Category:** Empty - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6685c8000e68f238c6c6c830_nPhGvTlA7zyopyc2VJg8vi73vpVknuTXyhjMXwIg8Jc.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Style:** Dense geospatial editing workspace with a bright map and white inspector panels. - **Character:** Dark utility toolbar, crisp blue selection states, compact typography, and colorful data overlays. - **Focus:** The map is the central working surface; panels expose layer and action context. ### Page composition - **Canvas:** 2880 × 1626 image px; CSS estimates assume an unverified 2× capture. - **Top toolbar:** Approximately 50 CSS px tall, full width. - **Left tool rail:** Approximately 45 CSS px wide. - **Layers panel:** Approximately 298 CSS px wide, beside the tool rail. - **Right inspector:** Approximately 320 CSS px wide. - **Map viewport:** Approximately x=344–1120 CSS px, spanning the remaining height. - **Floating feature popup:** Approximately 340 × 268 CSS px near the upper-right map area. - **Map controls:** Vertical zoom widget and a map-style control near the lower-right map corner. ### Information hierarchy - **Primary:** Color-coded geographic features and blue building footprints. - **Layer context:** Selected Soil Types by Area layer expands into a categorical legend. - **Inspector:** Data Actions tab is blue and active; Layer is inactive. - **Feature detail:** Floating popup pairs muted property labels with darker values. - **Global action:** Bright blue Share button at the toolbar's far right. ### Typography - **Family:** Compact interface sans serif; exact family is unverified. - **Panel headings and tabs:** Approximately 14–16 CSS px, weight 600. - **Action rows:** Approximately 14 CSS px, medium. - **Layer labels:** Approximately 13 CSS px. - **Legend and property values:** Approximately 12 CSS px, line-height 20px. - **Search placeholder:** Approximately 12–13 CSS px. - **Map attribution:** Approximately 10–11 CSS px. - **Precision:** Font metrics and CSS dimensions are visual estimates under the assumed 2× scale. ### Colors & surfaces - **Panel backgrounds:** #FFFFFF. - **Dark toolbar:** Approximately #0E101A. - **Neutral map areas:** Approximately #F7F7F7 with white roads and light-gray geographic shapes. - **Building blue:** #2A95F1. - **Selected-layer blue tint:** Approximately #CFDEFF. - **Large pink soil region:** #F28993; adjacent pixel variants include #F08791. - **Blue geographic region:** #7197EE. - **Pale sand region:** Approximately #FEE2AE. - **Panel separators:** Approximately #DBDBDC. - **Action accent:** Saturated blue for selected tools, active tab, and Share; exact source token is unverified. - **Palette behavior:** Soil categories use discrete pale yellow, orange, coral, pink, and magenta legend chips. - **Color precision:** Values sampled after embedded-profile conversion where present; map antialiasing introduces nearby shades. ### Components - **Global toolbar:** Icon groups for selection, drawing, text, search, measuring, history, object actions, comments, presentation, and sharing. - **Tool rail:** Vertically stacked outline icons with a pale-blue active state. - **Layer list:** White header, layer rows, expanded legend, and pale-blue selection region. - **Legend markers:** Approximately 18 CSS-px rounded squares. - **Inspector search:** Approximately 290 × 36 CSS px, thin border and rounded corners. - **Inspector sections:** Basic icon row, larger action-navigation rows, then integration shortcuts. - **Action rows:** Outline icon, label, and right arrow with generous horizontal alignment. - **Popup:** Light surface with small radius, close X at top right, title, and stacked key/value metadata. - **Zoom:** White vertical control with plus, current zoom value, and minus. - **Map footer:** Scale bar, provider branding, and attribution. ### Visual rhythm - **Panel density:** Compact layer labels and legend items contrast with larger inspector action rows. - **Alignment:** Panel titles, search, and action labels follow consistent left insets of roughly 14–24 CSS px. - **Map dominance:** Side panels stay narrow enough to preserve a wide central visualization. - **Popup grouping:** Muted field labels and darker values repeat vertically without strong dividers. - **Icon spacing:** Toolbar controls follow a regular horizontal rhythm with occasional group separators. ### Responsive - **Observed:** Desktop editing workspace only. - **Recommendation:** Convert side panels into drawers or collapsible sheets on narrow screens. - **Map priority:** Preserve the working viewport and keep essential zoom controls accessible. - **Popup:** Constrain feature details within viewport edges or present them in a bottom sheet. - **Toolbar:** Collapse secondary tools into menus rather than shrinking touch targets. ### Adaptation guidance - **Preserve:** Map-first composition, dark top toolbar, white side panels, blue selection language, and categorical legends. - **Data fidelity:** Use the supplied map layers and metadata; do not transfer geographic facts from the screenshot into unrelated content. - **Palette:** Maintain distinct categories and avoid using selection blue as an ambiguous data state. - **Starting scale:** Approximately 50px toolbar, 300–320px panels, and 12–14px metadata text under assumed 2×. - **Behavior:** The screenshot establishes visible selection and popup states; drawing and spatial-analysis interactions are not demonstrated. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.