forked from canada-ca/design-system-systeme-conception
-
Notifications
You must be signed in to change notification settings - Fork 0
/
design-system.html
151 lines (136 loc) · 5.23 KB
/
design-system.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Canada.ca design system - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- Meta data -->
<!-- Meta data-->
<!-- Load closure template scripts -->
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/soyutils.js"></script>
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/wet-en.js"></script>
<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refTop({
}));
</script>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<div id="def-top">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defTop = document.getElementById("def-top");
defTop.outerHTML = wet.builder.top({
lngLinks: [{
lang: "fr",
href: "#",
text: "Français"
}],
breadcrumbs: [{
title: "Home",
href: "https://www.canada.ca/en.html"
},{
title: "About Canada.ca",
href: 'https://www.canada.ca/en/government/about.html'
},{
title: "Canada.ca design system",
href: 'https://www.canada.ca/en/government/about/design-system.html'
}],
search: true,
siteMenu: true,
showPreContent: true
});
</script>
<main role="main" property="mainContentOfPage" class="container">
<h1 property="name" id="wb-cont" dir="ltr">
Canada.ca design system</h1>
<div><div class="mwsgeneric-base-html parbase section">
<p>Use this design system to provide a more usable, consistent and trustworthy online experience for people who access Government of Canada digital services.</p>
<p>Start with user-tested templates, patterns and design principles to get going quickly and help save time and money.</p>
<div class="row">
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
<section>
<h3 class="h5"><a href="./specification/usage.html">Who has to use this design system</a></h3>
<p>Which institutions must use the Canada.ca design system for their public-facing web presence</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="./specification/mandatory.html">Mandatory elements</a></h3>
<p>What every institution must follow: colours, typography, header and footer, mandatory templates, URl models and user navigation</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="./specification/principles.html">Design principles</a></h3>
<p>Canada.ca design principles from the <cite>Canada.ca Content and Information Architecture Specification</cite></p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="./design-system/library.html">Templates and design patterns</a></h3>
<p>User-tested templates, page layouts, design patterns, guidelines, and code samples</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html">Web writing guidelines</a></h3>
<p>Writing principles and techniques from the <cite>Canada.ca Content Style guide</cite></p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/topic-tree-content-types.html">Topic tree and content types</a></h3>
<p>Canada.ca taxonomies: theme and topic structure and content types</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/latest-changes.html">Latest changes to the Canada.ca design system</a></h3>
<p>Latest changes to the design system, templates and patterns, style guide and other tools</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="./specification.html">Canada.ca Content and Information Architecture Specification</a></h3>
<p>Consult the full Canada.ca Content and Information Architecture Specification</p>
</section>
</div>
</section>
</div>
</div>
</div>
<div id="def-preFooter">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defPreFooter = document.getElementById("def-preFooter");
defPreFooter.outerHTML = wet.builder.preFooter({
dateModified: "April 1, 2019",
showPostContent: true,
showFeedback: true,
showShare: true
});
</script>
</main>
<div id="def-footer">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defFooter = document.getElementById("def-footer");
defFooter.outerHTML = wet.builder.footer({
showFooter: true,
showFeatures: true
});
</script>
<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refFooter({
}));
</script>
</body>
</html>