Principles
Marmot gives people and agents context about an organisation's data and governed access to it. It catalogs every asset (tables, topics, dashboards, pipelines, agents), records lineage and ownership, and decides and audits who and what may query that data. The people using it could be anyone in the organisation: someone in finance looking for the right revenue table, a support lead checking what a dashboard means, an analyst running SQL, an engineer tracing lineage or a governance lead reading audit logs, and increasingly agents acting on their behalf. Some visit once a week; others live in it for hours.
These guidelines describe how Marmot looks and how it speaks. Read them before you design a screen or write copy.
We want Marmot to feel calm, precise and trustworthy, like a well-made instrument rather than another generic software product. Plenty of tools describe themselves the same way, so the words will not make Marmot stand out. The design and the writing have to.
The visual idea is Earth & survey: warm paper and ink, one burnt-sienna accent, muted natural colours for status, and touches borrowed from maps and technical drawings. Marmot is a map of your data, drawn by a careful surveyor.
Make it clear
- Every screen should make sense to someone who is not technical. Use everyday words and keep jargon for where it helps.
- Show real things: real table names, real numbers, real provider logos. Never placeholder art or stock imagery.
- Never rely on colour alone. Every status has a word, an icon or a shape as well as a colour.
- Make the common path obvious. What people come to a page to do is a visible button; creating something opens in place, in the finished page's order, not in a cramped dialog.
- Lead with what decides the next step. In previews and summaries, the facts that tell someone whether they can use a thing come first; detail folds away.
- Explain what automation does in plain words. A rule or filter is described the way a person would say it, with the query syntax available but never first.
Keep it calm
- The content comes first. Navigation, sidebars and toolbars stay quieter than the data they frame.
- Give each row one main line and at most one quiet line under it. Put extra detail in a hover, a side panel or a tab.
- Separate things with spacing and thin rules, not boxes inside boxes.
- Use three typefaces, each for one job. Monospace is only for text people copy, such as SQL, IDs and keys.
- Motion confirms that something happened. Keep it quick, never decorative, and skip it for keyboard actions.
Use colour with care
- There is one accent colour, burnt sienna (
mm-primary). It marks the main button, links, the active tab and the logo, and covers less than 5% of any screen. - Selected items use a neutral tint, never the accent.
- The warm neutrals (
mm-paper,mm-text,mm-rule) carry the brand, not gradients or tinted cards. - Decoration has to earn its place. The contour pattern appears on empty states, sign-in, marketing and loading screens, never behind working data.
Say it once
- Show each piece of information in one place. Active filters show as tokens in the search bar; a count is not repeated in the heading and the tab.
- Never let people edit the same thing in two places on screen at once. Search is one bar that is also the filter builder; the facets edit that same query.
- When the exact number does not change what someone does, show a visual instead. Popularity is four bars, not "Top 9%".
Build what the product can deliver
- Copy is fixed text. It never stitches live numbers into sentences; numbers belong in tiles, counts and status pills.
- Every label, count and message must come from data the product really has, without special logic for one screen.
- Tables are fine. People scan, so a well-set table beats a grid of cards.
What to avoid
Many products now look alike because they are built from the same templates and trends. Avoid these, and do not just swap colours and fonts on a template layout.
- Type: one plain system font for everything, the same handful of fashionable fonts, serif headlines, gradient text, a single word recoloured in a headline, small uppercase labels above every heading, monospace used as decoration.
- Colour: purple-to-blue gradients, neon on black, glows and coloured shadows, a default framework palette, rainbow categories that mean nothing, the cream-and-terracotta look, coral.
- Layout: the template page of a centred headline, two buttons and three identical icon cards; badges with pulsing dots; big-number strips; bento grids; logo walls; 01, 02, 03 numbering on things that are not steps; the same radius and padding on everything.
- Surfaces: everything in identical rounded cards with soft shadows, frosted glass, gradient blobs, cards inside cards, a coloured stripe down the side of a card, fake window buttons on code blocks.
- Icons and imagery: icons in tinted circles, emoji as icons, sparkles to mean “smart”, 3D blobs, "connected nodes" art.
- Dashboards: a row of KPI cards with green "+12%" arrows over a gradient chart, badges that mean nothing, only the happy path designed.
- Motion: everything fading and sliding up as you scroll, cards lifting on hover, animated menus.
- Copy: hype words ("Supercharge", "Unlock", "Seamless"), punchy fragments ("Build faster. Ship smarter."), em dashes, arrows on buttons, sentences built from live numbers.
Adding extra effects to look different (textures, parallax) is just as bad as following the template.