This repository has been archived by the owner on May 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 99
/
index.html
106 lines (106 loc) · 7.98 KB
/
index.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
<!DOCTYPE html>
<html lang="en" class="js--off">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta property="og:title" content="Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-style-guide.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Wikimedia Design Style Guide (WikimediaUI) – provided by Wikimedia Foundation Design Team</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs--off\b/,'js--on');
</script>
<link rel="dns-prefetch" href="https://piwik.wikimedia.org/">
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/matomo-tracking.min.js"></script>
<script src="js/wikimedia-design-style-guide.min.js" async></script>
</head>
<body class="page--home" vocab="http://schema.org/" typeof="WebPage">
<header id="header" class="header">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h1>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main">
<ol>
<li class="nav__item is-on"><a href="index.html">Introduction</a></li>
<li class="nav__item"><a href="design-principles.html">Design principles</a></li>
<li class="nav__item"><a href="visual-style.html">Visual style</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="visual-style.html">Principles</a></li>
<li class="nav__sub-item"><a href="visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item"><a href="visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_images.html">Images</a></li>
<li class="nav__sub-item"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<li class="nav__item"><a href="components/links.html">Components</a></li>
<li class="nav__item"><a href="apps/apps.html">Apps</a></li>
<!-- <li class="nav__item"><a href="patterns.html">Patterns</a></li> -->
<li class="nav__item"><a href="resources.html">Resources</a></li>
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content">
<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
<span class="cdx-message__icon"></span>
<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
</div>
<h2 class="page__title">Introduction</h2>
<p>The Wikimedia Design Style Guide ensures a consistent look and behavior for our products. </p>
<p>Our interfaces are our brand. </p>
<p>These principles and guidelines aim to help designers and developers with their <a href="https://www.wikimedia.org/" target="_blank" rel="noopener">Wikimedia</a> projects, as part of the <a href="https://wikimediafoundation.org/" target="_blank" rel="noopener" title="Wikimedia Foundation website">Foundation</a> or in a volunteer capacity. </p>
<p>The style guide features unique focus areas like accessibility, internationalization, and localization. </p>
<section id="process">
<h2>Our process</h2>
<p><a href="https://www.mediawiki.org/wiki/Design" target="_blank" rel="noopener">Wikimedia Foundation Design Team</a> maintains the style guide. <br>Our multi-disciplinary team focuses on user experience design, user research, engineering, information architecture, human-computer interaction, and visual design.
<p>We follow <a href="design-principles.html">primary design principles</a> to provide solutions for <a href="visual-style.html">visual identity</a>, <a href="./components/">user interface components</a>, and patterns. </p>
</section>
<section id="how-to-participate">
<h2>Open to participate</h2>
<p>We encourage and welcome your collaboration and participation to evolve the Wikimedia Design Style Guide. <br>You can engage in many ways:</p>
<ul>
<li><strong>Contribute</strong><br>Read <a href="https://github.com/wikimedia/WikimediaUI-Style-Guide/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">contributing guidelines on GitHub</a> and make a pull request.</li>
<li><strong>Request a change or provide feedback</strong><br><a href="https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?projects=wikimedia_design_style_guide" target="_blank" rel="noopener" property="discussionUrl">File a task on our workboard</a> to request a change to the style guide.</li>
<li><strong>Explore our design process</strong><br>Read through <a href="https://www.mediawiki.org/wiki/Design/Participate#Our_Process" target="_blank" rel="noopener">our design process</a> and view a guide on <a href="https://www.mediawiki.org/wiki/File:Working_with_Design_2020-01-10.pdf" target="_blank" rel="noopener">how Wikimedia Product designers typically work</a>.</li>
<li><strong>Read the blog</strong><br>Stay up-to-date by reading the <a href="https://design.wikimedia.org/blog/" target="_blank" rel="noopener">design blog</a>.</li>
<li><strong>Follow Wikimedia Product Design team updates</strong><br>Follow <a href="https://twitter.com/WikimediaDesign" target="_blank" rel="noopener">@WikimediaDesign on Twitter</a>.</li>
<li><strong>Play around</strong><br><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide/archive/master.zip" target="_blank" rel="noopener">Download Wikimedia Design Style Guide</a>.</li>
</ul>
</section>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list footer__list--connect">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaDesign" title="Follow Wikimedia Product Design team on Twitter">Follow @WikimediaDesign</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener" property="license">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<ul class="footer__list footer__list--policy">
<li><a href="https://wikimediafoundation.org/privacy-policy/">Privacy policy</a></li>
<li><a href="https://design.wikimedia.org/accessibility-statement.html">Accessibility statement</a></li>
</ul>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project" property="author" typeof="Organization">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>