---
name: dataminer-frontend
description: If you need to create or update user interfaces use this skill. This skill contains everything you need to know before building or making changes to UI. It makes sure you're consistent with other DataMiner interfaces and follow best practices.
license: LicenseRef-Skyline-Agent-Marketplace
user-invocable: true
---

# DataMiner Frontend Design Skill

Use this skill when building or updating user interfaces in DataMiner frontend applications. The skill covers best practices and guidelines to ensure consistency with other DataMiner interfaces.

## Colors

- If you need a color that's not in this palette, you can add one to your variables. Make sure it works in both light and dark mode or provide one for each.
- Always use these variable colors. If they don’t work in a specific case, you may introduce an additional color.
- Use a mix of all interface colors so that the UI has backgrounds, borders, dividers, headers, footers...
- Next to the interface colors it's specified when to use that color.
- Use data colors as your base colorful set.

**Always use one of these colors for base UI elements:**

### Interface colors

Interface colors are used for backgrounds, borders, dividers, text,... They are more neutral and should be used when you want to create a clear and usable interface. Make sure to use them in a consistent way across the interface, so that the same color is always used for the same type of element.

| Variable | Light | Dark | Usage |
|---|---|---|---|
| `var(--color1)` | #FDFDFD | #23272F | Primary background, most important |
| `var(--color2)` | #F6F6F6 | #1C2129 | Secondary background, less important |
| `var(--color3)` | #EFF0F0 | #151A22 | Page background |
| `var(--color4)` | #E8E8E9 | #30353C | |
| `var(--color5)` | #E1E1E2 | #383C43 | Primary border |
| `var(--color6)` | #D3D4D5 | #44484E | Secondary border |
| `var(--color7)` | #C5C6C8 | #4F5258 | |
| `var(--color8)` | #B8BABC | #5B5E64 | |
| `var(--color9)` | #A0A2A6 | #727579 | Disabled text |
| `var(--color10)` | #727579 | #A0A2A6 | Quiet text, not important |
| `var(--color11)` | #44484E | #CECFD1 | Subtle text, less important |
| `var(--color12)` | #151A22 | #FDFDFD | Default text, most important |
| `var(--focus-color)` | #2563EB | #2563EB | Call to action background color |
| `var(--focus-contrast-color)` | #FDFDFD | #FDFDFD | Contrast color for text/icons on the CTA color |
| `var(--hyperlink)` | #2563EB | #5489FE | Used for text with focus |

### Alert colors (work in both light and dark mode)

Alert colors are used for UI messaging and status accents: informative, warning, error or success messages, icons, highlights,... Use these for your own application's feedback and states.

- `var(--error)`: #FA4D56
- `var(--major)`: #FF832B
- `var(--minor)`: #F1C21B
- `var(--success)`: #24A148
- `var(--mask)`: #A56EFF

### Severity colors

- Visualizing actual DataMiner severities (rendering a real alarm/service/element/view severity such as Critical, Major, Minor, Warning, Normal, Timeout, Masked,...): do not use the static colors above. Severity colors are configurable per DataMiner System, so fetch the live values from the `GetDataMinerAgentAlarmColors` Web API endpoint (they are also returned by `ConnectAppAndInfo`/`ReconnectAppAndInfo`). See the web-api skill. Map the returned RGB values (`Critical`, `Major`, `Minor`, `Warning`, `Normal`, `Error`, `Timeout`, `Masked`, `Notice`, `Information`, `Initial`, `NotMonitored`, `Undefined`) to CSS variables at runtime so your severity visuals (alarms, services, elements and views) match the operator's DataMiner.

### Data colors (work in both light and dark mode)

Data colors are used for data visualization, charts, highlights, states,... They are more colorful and vibrant, and should be used when you want to add more color to the interface. Make sure to use the same color for the same data across the interface, and use different colors for different data. Never reuse colors in one chart if they represent different data, just add new colors to the list.

- `var(--palette-color1)`: #8B73FF
- `var(--palette-color2)`: #96E17B
- `var(--palette-color3)`: #FF9861
- `var(--palette-color4)`: #4F9AFF
- `var(--palette-color5)`: #FFC208
- `var(--palette-color6)`: #AD8AFF
- `var(--palette-color7)`: #FF4842
- `var(--palette-color8)`: #5DDBDB
- `var(--palette-color9)`: #FF8EDF
- `var(--palette-color10)`: #42CC7E

## Light and dark mode

- Provide a button to switch between light, dark or system mode, and make sure all colors work well in both modes. When clicking the button it should open a dropdown with the three options including their labels.
- If system mode is selected follow the user's OS setting. If they change their OS setting while using the app, the app should automatically update to reflect that.

## Fonts

Two fonts are included with this skill. `InterVariable` should be used for all text and `DataMinerIcons` should be used for icons. 

After scaffolding the project, copy the fonts into the project. The fonts live in the `fonts/` folder next to this SKILL.md file, inside `.agents\skills\dataminer-frontend\`.

```powershell
$skillFonts = Join-Path (Get-Item "<workspace-root>\.agents\skills\dataminer-frontend\fonts") FullName
Copy-Item -Path "$skillFonts\*" -Destination "<project-root>\public\fonts\" -Recurse -Force
```

Replace `<workspace-root>` with the root folder of the current workspace (the folder containing `.agents\`) and `<project-root>` with the newly created project folder.

Use it in css like:

```css
@font-face {
  font-family: 'FontName';
  src: url('/fonts/FontName.woff2') format('woff2');
}

body { font-family: 'FontName', sans-serif; font-size: 14px; line-height: 20px; color: `var(--color12)`; }
```

## Text

- Always use font Inter.
- **Only use other text styles if specifically needed other than the body text.**
- Use consistent text sizing and alignment.
- Only use two weights max: 400 for normal text and 500 or 600 for emphasis.

### Body text

- Font-family: Inter, sans-serif;
- Font-size: 14px;
- Line-height: 20px; (24px if you have multi line text)
- Color: `var(--color12)`;

## Icons

- Always use the `DataMinerIcons` font for icons. Do not use any other icon library or custom icons.
- Only use these icons. You can find all available icon labels/ligatures in the `.agents\skills\dataminer-frontend\references\icon-ligatures.md` file.
- Only use an icon when it improves scanning (e.g. next to labels).
- If you are not sure which icon to use, do not use an icon.
- Always use font-size `20px` by default or `16px`, `24px` for smaller or bigger cases.
- You should create one class for the icons, then use `<span class="icon">IconName</span>` in the HTML, replacing `IconName` with the actual ligature name of the icon you want to use. Class example:

```css
.icon {
  font-family: 'DataMinerIcons';
  font-size: 20px;
  width: 20px;
  line-height: 20px;
}
```

## Layout and spacing

- Ensure sufficient white space between and around all elements using margin and padding. For example, `16px` around and `8px` between.
- Make sure the template always spans the full height.
- If you have border radius corners make sure dividers and backgrounds align with the rounded edges.
- Use clear visual structure by adding backgrounds, dividers and spacing. For example:
    - Add a header or footer with `var(--light2)` and border in `var(--light5)`.
    - Add dividers between important and less important data.
    - If you add a border to a part, add a background color as well.

## User experience

- Prefer icon + label (6px spacing between), if it makes sense.
- Make the interface fully responsive, so that it also works on mobile screens.
- If the available height is insufficient, enable vertical scrolling on the appropriate container using `overflow-y:auto;`.
- Add colors where it helps a user to understand what they see.
- Provide enough space for bigger data strings (e.g. descriptions, notes...). 
- Make sure text, icons... are always readable based on WCAG 2.
- Do not add visual functionalities that aren't requested.

## Creativity

- Listen to the user request in how creative you can be. But do this with visual variety and strong hierarchy. 
- You may vary layout, spacing, shape, color, and emphasis,... but keep them usable.
- Use colors, gradients, shapes, patterns,...
- Do not add shadows on the root container.
- If nothing about creativity is provided in the user request;
    - Create a simple interface but always with a creative touch.
    - Make it impressive and visually pleasing.

## Components

### Buttons and inputs

- Always use the same height for buttons and inputs: `32px` height with `8px` padding.

### Header

- Make the header `49px` height.
- Use the `.agents\skills\dataminer-frontend\references\dataminer-logo.svg` for the logo shown at the left side of the header. Make sure the color of the logo also adapts to the theme.
- Next to the DataMiner logo, show a divider and then the name of the application.