Skin
PAMs skin system helps in the implementation of a color theme for your brand or style. The primary and secondary colors and variations creates a skin which has accessible text and straight forward UI surfaces. The skin system follows material designs color system. For more info head over to material design and learn how more about the color system.
Primary
Text on primary
Text on primary light
Text on primary dark
Secondary
Text on secondary
Text on secondary light
Text on secondary light
Background
Text on background
Surface
Text on surface
Error
Text on error
Info
Text on info
Success
Text on success
Warning
Text on warning
Background
Skin colors as background.
Primary
Primary light
Primary dark
Secondary
Secondary light
Secondary dark
Background
Surface
Error
Info
Success
Warning
Markup
<div pam-Grid>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="primary" grid-block="fixed small">
<span pam-skin="on:primary">Primary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="primary:light" grid-block="fixed small">
<span pam-skin="on:primary:light">Primary light</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="primary:dark" grid-block="fixed small">
<span pam-skin="on:primary:dark">Primary dark</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="secondary" grid-block="fixed small">
<span pam-skin="on:secondary">Secondary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="secondary:light" grid-block="fixed small">
<span pam-skin="on:secondary:light">Secondary light</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="secondary:dark" grid-block="fixed small">
<span pam-skin="on:secondary:dark">Secondary dark</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="background" grid-block="fixed small">
<span pam-skin="on:background">Background</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="surface" grid-block="fixed small">
<span pam-skin="on:surface">Surface</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="error" grid-block="fixed small">
<span pam-skin="on:error">Error</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="info" grid-block="fixed small">
<span pam-skin="on:info">Info</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="success" grid-block="fixed small">
<span pam-skin="on:success">Success</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="warning" grid-block="fixed small">
<span pam-skin="on:warning">Warning</span>
</div>
</div>
</div>Gray
Skin gray color palette as background.
Gray 50
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Markup
<div pam-Grid>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:50" grid-block="fixed small">
<span pam-skin="text:primary:on:light">Gray 50</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:100" grid-block="fixed small">
<span pam-skin="text:primary:on:light">Gray 100</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:200" grid-block="fixed small">
<span pam-skin="text:primary:on:light">Gray 200</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:300" grid-block="fixed small">
<span pam-skin="text:primary:on:light">Gray 300</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:400" grid-block="fixed small">
<span pam-skin="text:primary:on:light">Gray 400</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:500" grid-block="fixed small">
<span pam-skin="text:primary:on:dark">Gray 500</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:600" grid-block="fixed small">
<span pam-skin="text:primary:on:dark">Gray 600</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:700" grid-block="fixed small">
<span pam-skin="text:primary:on:dark">Gray 700</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-3">
<div pam-skin="bg:gray:800" grid-block="fixed small">
<span pam-skin="text:primary:on:dark">Gray 800</span>
</div>
</div>
</div>On colors
The on colors refers to color elements that are placed on top of surfaces that for example use primary, secondary and surface color. On colors are applied to text, icons and borders. The default colors are #FFFFFF and #000000.
| CSS Attribute | Description |
|---|---|
Skin="on:primary" |
Set text color to the on:primary color |
Skin="on:primary:light" |
Set text color to the on:primary:light color |
Skin="on:primary:dark" |
Set text color to the on:primary:dark color |
Skin="on:secondary" |
Set text color to the on:secondary color |
Skin="on:secondary:light" |
Set text color to the on:secondary:light color |
Skin="on:secondary:dark" |
Set text color to the on:secondary:dark color |
Skin="on:background" |
Set text color to the on:background color |
Skin="on:surface" |
Set text color to the on:surface color |
Skin="on:error" |
Set text color to the on:error color |
Skin="on:info" |
Set text color to the on:info color |
Skin="on:success" |
Set text color to the on:success color |
Skin="on:warning" |
Set text color to the on:warning color |
Text
Skin colors as text
Primary
Primary light
Primary dark
Secondary
Secondary light
Secondary dark
Info
Success
Warning
error
Markup
<div pam-Grid>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="primary:text">Primary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="primary:light:text">Primary light</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="primary:dark:text">Primary dark</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="secondary:text">Secondary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="secondary:light:text">Secondary light</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="secondary:dark:text">Secondary dark</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="info:text">Info</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="success:text">Success</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="warning:text">Warning</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block>
<span pam-skin="error:text">error</span>
</div>
</div>
</div>Background
Text on element background
Primary
Secondary
Hint
Disabled
Markup
<div pam-Grid pam-Skin="background">
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:primary:on:background">Primary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:secondary:on:background">Secondary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:hint:on:background">Hint</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:disabled:on:background">Disabled</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:icon:on:background" class="material-icons">android</span>
</div>
</div>
</div>Light background
Text on light background
Primary
Secondary
Hint
Disabled
Markup
<div pam-Grid pam-Skin="bg:gray:200">
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:primary:on:light">Primary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:secondary:on:light">Secondary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:hint:on:light">Hint</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:disabled:on:light">Disabled</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:icon:on:light" class="material-icons">android</span>
</div>
</div>
</div>Dark background
Text on dark background
Primary
Secondary
Hint
Disabled
Markup
<div pam-Grid pam-Skin="bg:black">
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:primary:on:dark">Primary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:secondary:on:dark">Secondary</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:hint:on:dark">Hint</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:disabled:on:dark">Disabled</span>
</div>
</div>
<div pam-Unit="1-2 medium:1-5">
<div grid-block="small">
<span pam-skin="text:icon:on:dark" class="material-icons">android</span>
</div>
</div>
</div>