Allmänt — Malm UI

Formerna bär varumärkesfärger; ordmärket är currentColor. Därför en logotyp, inte en ljus och en mörk.

I bruk

Logotypen i toppraden, på inloggningen och som favicon, app för app.

Klient, whitespace-clients

Den gula fyrkanten som eget märke, i toppraden, på inloggningen och som favicon.

Toppraden

Inloggningen

Favicon

<Logo name="klient" title="Klient" size="sm" mark="square" />   <!-- toppraden -->
<Logo name="klient" title="Klient" size="lg" mark="square" />  <!-- inloggningen -->
logo({ mark: "square", title: "Klient" })   // favicon

Tid, produce

De tre formerna i toppraden, på inloggningen och som favicon. Den blå cirkeln är Tids eget märke, men används inte där än.

Toppraden

Inloggningen

Favicon

<Logo name="tid" title="Tid" size="sm" />   <!-- toppraden -->
<Logo name="tid" title="Tid" size="lg" />  <!-- inloggningen -->
logo({ title: "Tid" })   // favicon

Underlag, underlag

Den orange kvartsringen som eget märke, i toppraden, på inloggningen och som favicon.

Toppraden

Inloggningen

Favicon

<Logo name="underlag" title="Underlag" size="sm" mark="quadrant" />   <!-- toppraden -->
<Logo name="underlag" title="Underlag" size="lg" mark="quadrant" />  <!-- inloggningen -->
logo({ mark: "quadrant", title: "Underlag" })   // favicon

Malm UI, den här stilguiden

De tre formerna.

Toppraden

Inloggningen

Favicon

<Logo name="malm-ui" title="Malm UI" size="sm" />   <!-- toppraden -->
<Logo name="malm-ui" title="Malm UI" size="lg" />  <!-- inloggningen -->
logo({ title: "Malm UI" })   // favicon

Märken

De tre formerna är Whitespaces märke. En produkt kan bära ett av elementen ensamt som sitt eget: Tid den blå cirkeln, Klient den gula fyrkanten, Underlag den orange kvartsringen.

Tre former

Blå cirkel, Tid

Gul fyrkant, Klient

Orange kvartsring, Underlag

<Logo mark="full" />     <!-- Whitespace, Tid, Malm UI -->
<Logo mark="circle" />   <!-- Tids eget märke -->
<Logo mark="square" />   <!-- Klient -->
<Logo mark="quadrant" /> <!-- Underlag -->

Ordmärken

Varje genererat produktnamn, med de tre formerna, den blå cirkeln, den gula fyrkanten och den orange kvartsringen.

<Logo name="Tid" mark="full|circle|square|quadrant" />

Regler

Inline SVG, aldrig img

Genom en <img> löser CSS-variablerna inte ut och märket renderas i sina reservfärger.

Varför konturer

Ordmärket är vägar. Ett <text> renderas i reservsnittet där webbfonten saknas.

Element

Fjorton former, stora och bakom innehåll. Aldrig som en inline-ikon.

Alla fjorton, i sina rätta proportioner

Formerna är 12, 18 eller 36 enheter breda. --ws-element-unit skalar hela uppsättningen.

<BrandElement name="circle" color="orange" />
<BrandElement name="dots-circle" />   <!-- prickade tar ingen färg -->

Prickade är svarta

Alltid. De bär sin egen fyllning — det finns ingen färg att välja.

<BrandElement name="dots-annulus" />

Hel eller exakt halv

Halvan är ett klipp på mittlinjen. Aldrig en flisa över ett hörn.

<BrandElement name="semi-circle" color="yellow" />
<BrandElement name="annulus" color="blue" half="right" />

Vad som får ändra storlek

Rektangeln. Och cirkeln, till sin egen storlek eller annulusens ytterdiameter. Inget annat.

<BrandElement name="rectangle" color="orange" units={12} unitsTall={18} />
<BrandElement name="circle" color="blue" units={36} />

I bruk

Stora, bakom innehåll, två per område — och hela eller halva mot en kant.

Municipio Cloud

Drift för svensk offentlig sektor

Två former, ett hörn.

<div class="ws-element-field panel" style="--ws-element-unit: 2rem">
  <BrandElement name="annulus" color="yellow" half="bottom"
                style="right: 2rem; bottom: 0" />
</div>