<h5>cyan</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #0089cf;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#0089cf</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #1099d6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#1099d6</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #5bacdf;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#5bacdf</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #93c2e9;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#93c2e9</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #c7ddf3;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#c7ddf3</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #e7f2fb;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#e7f2fb</code>
</div>
</div>
</div>
<h5>blue</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #034ea2;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#034ea2</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #4665af;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#4665af</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #7080bf;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#7080bf</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #99a0d1;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#99a0d1</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #c7cbe5;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#c7cbe5</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #e9ebf6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#e9ebf6</code>
</div>
</div>
</div>
<h5>violet</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #6f2c91;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#6f2c91</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #8552a1;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#8552a1</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #9c76b4;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#9c76b4</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #b69cca;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#b69cca</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #d6c9e3;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#d6c9e3</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #eeebf5;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#eeebf5</code>
</div>
</div>
</div>
<h5>red</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #eb1c24;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#eb1c24</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f15b46;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#f15b46</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f58468;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#f58468</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f9ac90;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#f9ac90</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #fdd4c2;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#fdd4c2</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #feeee7;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#feeee7</code>
</div>
</div>
</div>
<h5>yellow</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #fdb913;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#fdb913</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ffc54e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#ffc54e</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ffd27c;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#ffd27c</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ffdfa4;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#ffdfa4</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ffedce;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#ffedce</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #fff7eb;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#fff7eb</code>
</div>
</div>
</div>
<h5>green</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #a5cf4c;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#a5cf4c</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #b6d772;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#b6d772</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #c7df94;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#c7df94</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #d9e9b5;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#d9e9b5</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #eaf3d8;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#eaf3d8</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f8fbf0;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#f8fbf0</code>
</div>
</div>
</div>
<h5>teal</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #00b49d;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>base</strong>
<code>#00b49d</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #50c0ad;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint80</strong>
<code>#50c0ad</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #82cdbf;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint60</strong>
<code>#82cdbf</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #acdcd2;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint40</strong>
<code>#acdcd2</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #b9e1d6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint20</strong>
<code>#b9e1d6</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #edf7f5;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>tint7</strong>
<code>#edf7f5</code>
</div>
</div>
</div>
<h5>gray</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #4d4848;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>dark</strong>
<code>#4d4848</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #e6e6e6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>light</strong>
<code>#e6e6e6</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ffffff;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>white</strong>
<code>#ffffff</code>
</div>
</div>
</div>
<h5>reserved</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #002d72;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>navyBlue</strong>
<code>#002d72</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #6cc24a;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>appleGreen</strong>
<code>#6cc24a</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f3d54e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>sunnyYellow</strong>
<code>#f3d54e</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ef3340;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>rubyRed</strong>
<code>#ef3340</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #009cde;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>skyBlue</strong>
<code>#009cde</code>
</div>
</div>
</div>
<p><a href="https://contrast.crgeary.com/#0089cf,1099d6,5bacdf,93c2e9,c7ddf3,e7f2fb,034ea2,4665af,7080bf,99a0d1,c7cbe5,e9ebf6,6f2c91,8552a1,9c76b4,b69cca,d6c9e3,eeebf5,eb1c24,f15b46,f58468,f9ac90,fdd4c2,feeee7,fdb913,ffc54e,ffd27c,ffdfa4,ffedce,fff7eb,a5cf4c,b6d772,c7df94,d9e9b5,eaf3d8,f8fbf0,00b49d,50c0ad,82cdbf,acdcd2,b9e1d6,edf7f5,4d4848,e6e6e6,ffffff,002d72,6cc24a,f3d54e,ef3340,009cde">View colours in contrast checking tool</a>.</p>
<p><strong>Note:</strong> These colors are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>
{% macro colorSwatch(name, value) %}
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: {{ value }};"></span>
</div>
<div class="sg-color-swatch__details">
<strong>{{ name }}</strong>
<code>{{ value }}</code>
</div>
</div>
{% endmacro -%}
{% for palette, colors in palettes %}
<h5>{{ palette }}</h5>
<div class="sg-color-palette">
{% for colorName, colorValue in colors %}
{{ colorSwatch(colorName, colorValue) | safe }}
{% endfor %}
</div>
{% endfor %}
<p><a href="{{ contrastLink }}">View colours in contrast checking tool</a>.</p>
<p><strong>Note:</strong> These colors are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>
{
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
"url": "#",
"listItems": [
{
"htmlContent": "Some list item content"
},
{
"htmlContent": "More list item content"
},
{
"htmlContent": "Even more list item content"
},
{
"htmlContent": "I can't believe there's still more list item content"
},
{
"htmlContent": "Seriously?! That's enough now."
}
],
"footer": {
"copy": "© 2019 <strong>Buildit</strong>. All rights reserved.",
"linksA": [
{
"label": "Stories",
"url": "#"
},
{
"label": "People",
"url": "#"
},
{
"label": "Jobs",
"url": "#"
}
],
"linksB": [
{
"label": "Terms",
"url": "#"
},
{
"label": "Accessibility",
"url": "#"
},
{
"label": "Privacy & Cookie Policy",
"url": "https://wiprodigital.com/privacy-policy"
}
]
},
"hero": {
"pullout": "Big, attention-grabbing headline",
"paragraph": "Witty subtitle",
"cta": {
"text": "Clickbaity label",
"url": "#"
}
},
"img": {
"random": {
"src": "/images/img-random-1.png",
"alt": "A placeholder image with an arbitrary aspect ratio."
},
"square": {
"src": "/images/img-1x1.png",
"alt": "A placeholder image with a perfect square (1:1) aspect ratio."
},
"tv": {
"src": "/images/img-4x3.png",
"alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
},
"widescreen": {
"src": "/images/img-16x9.png",
"alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
},
"logo": {
"src": "/images/img-random-2.png",
"alt": "A test image for a logo with an arbitrary aspect ratio."
}
},
"title": "Page title",
"header": {
"url": "./homepage",
"links": [
{
"text": "Jobs",
"url": "./jobs"
},
{
"text": "Locations",
"url": "./locations"
}
],
"externalLinks": [
{
"text": "Fancy external website",
"url": "./error-page"
}
]
},
"sections": [
{
"title": "Example section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
}
]
}
],
"section": {
"title": "This is the title for a section",
"class": "grav-o-full-bleed__content",
"content": [
{
"paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
{
"twoColumnsList": [
{
"htmlContent": "Vestibulum auctor dapibus neque."
},
{
"htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
},
{
"htmlContent": "Aliquam tincidunt mauris eu risus."
},
{
"htmlContent": "Labore et dolore magna aliqua."
},
{
"htmlContent": "Phasellus tempus, orci non mattis sagittis."
}
]
},
{
"inlineRow": [
{
"text": "First link",
"url": "#"
},
{
"text": "Second link",
"url": "#"
},
{
"text": "Third link",
"url": "#"
}
]
},
{
"imgCards": [
{
"title": "Some fascinating, attention-grabbing headling",
"content": "Ideally, with a click-baity tagline that entices to you to visit!",
"image": {
"src": "/images/img-random-1.png",
"alt": "Brief description of this fascinating image"
}
},
{
"title": "Labore et dolore magna aliqua",
"content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Phasellus tempus, orci non mattis"
}
},
{
"title": "Nanotechnology immersion along the information highway",
"content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
"image": {
"src": "/images/img-random-1.png",
"alt": "Bring to the table win-win survival strategies"
}
}
]
},
{
"imgLinks": [
{
"url": "#",
"image": {
"src": "/images/img-random-1.png",
"alt": "Image linke #1"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-2.png",
"alt": "Image linke #2"
}
},
{
"url": "#",
"image": {
"src": "/images/img-random-3.png",
"alt": "Image linke #3"
}
}
]
}
]
},
"palettes": {
"cyan": {
"base": "#0089cf",
"tint80": "#1099d6",
"tint60": "#5bacdf",
"tint40": "#93c2e9",
"tint20": "#c7ddf3",
"tint7": "#e7f2fb"
},
"blue": {
"base": "#034ea2",
"tint80": "#4665af",
"tint60": "#7080bf",
"tint40": "#99a0d1",
"tint20": "#c7cbe5",
"tint7": "#e9ebf6"
},
"violet": {
"base": "#6f2c91",
"tint80": "#8552a1",
"tint60": "#9c76b4",
"tint40": "#b69cca",
"tint20": "#d6c9e3",
"tint7": "#eeebf5"
},
"red": {
"base": "#eb1c24",
"tint80": "#f15b46",
"tint60": "#f58468",
"tint40": "#f9ac90",
"tint20": "#fdd4c2",
"tint7": "#feeee7"
},
"yellow": {
"base": "#fdb913",
"tint80": "#ffc54e",
"tint60": "#ffd27c",
"tint40": "#ffdfa4",
"tint20": "#ffedce",
"tint7": "#fff7eb"
},
"green": {
"base": "#a5cf4c",
"tint80": "#b6d772",
"tint60": "#c7df94",
"tint40": "#d9e9b5",
"tint20": "#eaf3d8",
"tint7": "#f8fbf0"
},
"teal": {
"base": "#00b49d",
"tint80": "#50c0ad",
"tint60": "#82cdbf",
"tint40": "#acdcd2",
"tint20": "#b9e1d6",
"tint7": "#edf7f5"
},
"gray": {
"dark": "#4d4848",
"light": "#e6e6e6",
"white": "#ffffff"
},
"reserved": {
"navyBlue": "#002d72",
"appleGreen": "#6cc24a",
"sunnyYellow": "#f3d54e",
"rubyRed": "#ef3340",
"skyBlue": "#009cde"
}
},
"contrastLink": "https://contrast.crgeary.com/#0089cf,1099d6,5bacdf,93c2e9,c7ddf3,e7f2fb,034ea2,4665af,7080bf,99a0d1,c7cbe5,e9ebf6,6f2c91,8552a1,9c76b4,b69cca,d6c9e3,eeebf5,eb1c24,f15b46,f58468,f9ac90,fdd4c2,feeee7,fdb913,ffc54e,ffd27c,ffdfa4,ffedce,fff7eb,a5cf4c,b6d772,c7df94,d9e9b5,eaf3d8,f8fbf0,00b49d,50c0ad,82cdbf,acdcd2,b9e1d6,edf7f5,4d4848,e6e6e6,ffffff,002d72,6cc24a,f3d54e,ef3340,009cde"
}
There are no notes for this item.