magenta-design-system
v2.1.0
Published
Design system for Magenta ApS
Downloads
25
Readme
Magenta Design System
This package contains a number of CSS and image assets to use in your project for a Magenta ApS branded look and feel.
Installation
npm install --save magenta-design-systemUsage
Option 1 - Pack it into your JS/CSS bundle
Include magenta-design-system CSS in your bundle at build time.
In many cases that would be by adding an import statement in your main script file like so:
import 'magenta-design-system'Just make sure your setup accepts CSS and knows how to bundle it properly.
Option 2 - Refer assets in HTML <head>
Link to mds.css CSS and various application icons in your HTML's <head>.
Assuming all your static files are served on a path named /assets, it could look like this:
(example/index.html is available for reference.)
<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<meta name="theme-color" content="#ffffff">
<!-- Maybe include some fonts -->
<link rel="stylesheet" href="/assets/fonts/font.css">
<!-- Favicon and various application icons -->
<link rel="icon" href="/assets/magenta-favicon.svg">
<link rel="mask-icon" href="/assets/mask-icon.svg" color="#070707">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<link rel="manifest" href="/assets/manifest.json">
<!-- CSS -->
<link rel="stylesheet" href="/assets/mds.css">
<title>Hej!</title>
</head>
<body>
<header>
<!-- Logo image in header -->
<img src="/assets/magenta-logo.svg" alt="Magenta ApS" style="height: 2rem; width: auto;">
</header>
<main class="container">
<!-- Content goes here -->
</main>
</body>
</html>Typography
Magenta Design System assumes you have the "Lato" font available. If that is not the case you can include the font from Google Fonts or self host the font files.
Font files are included in assets/fonts along with font.css file to give you an example on how to use @font-face to include font files in CSS.
Brand logos
The assets directory contains a lot of image files for various branding needs, such as favicons and logo images for light and dark themes.
The Magenta Design Manual contains a reference for use
Acknowlegdements
Magenta Design System is based on a customized version of Pico.css