Design System for OCC

Developer
Vanessa Vevoda
Size
6,889 Kb
Views
32,384
  1. Design System for OCC Previews
  2. Design System for OCC HTML Codes
  3. Design System for OCC CSS Codes

How do I make an design system for occ?

What is a design system for occ? How do you make a design system for occ? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

Design System for OCC Previews
IQ Test

Design System for OCC - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Design System for OCC</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main>
<!-- SECTION -->	<section class="system-palettes">	<header class="primary">	<h1 class="section-title">Web Color Palette</h1>	<h2>Primary Colors</h2>	</header>	<header>	<h3>OCC Greens</h3>	</header>	<article class="system-color">	<div>	<div class="system-occ--color dark-green"></div>	<ul>	<li>Dark Green</li>	<li>#64f8e1e</li>	<li>rgba(79, 142, 30, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color green"></div>	<ul>	<li>Light Green</li>	<li>#69be28</li>	<li>rgba(105, 190, 40, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color other-green"></div>	<ul>	<li>Other Green</li>	<li>#87bd3c</li>	<li>rgba(135, 189, 60, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color yet-another-green"></div>	<ul>	<li>Yet Another Green</li>	<li>#b0d236</li>	<li>rgba(176, 210, 54, 1)</li>	</ul>	</div>	</article>	<header>	<h3>OCC Reds</h3>	</header>	<article class="system-color">	<div>	<div class="system-occ--color dark-red"></div>	<ul>	<li>Dark Red</li>	<li>#b82121</li>	<li>rgba(184, 33, 33, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color banner-red"></div>	<ul>	<li>Banner Red</li>	<li>#d92727</li>	<li>rgba(217, 39, 39, 1)</li>	</ul>	</div>	</article>	<header>	<h3>Secondary Colors: Jewel Tones</h3>	</header>	<article class="system-color">	<div>	<div class="system-occ--color red"></div>	<ul>	<li>Red</li>	<li>#be1d2c</li>	<li>rgba(190, 29, 44, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color orange"></div>	<ul>	<li>Orange</li>	<li>#e64a19</li>	<li>rgba(230, 74, 25, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color yellow"></div>	<ul>	<li>Yellow</li>	<li>#ffab00</li>	<li>rgba(255, 171, 0, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color purple"></div>	<ul>	<li>Purple</li>	<li>#512da8</li>	<li>rgba(81, 45, 168, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color blue"></div>	<ul>	<li>Blue</li>	<li>#1565c0</li>	<li>rgba(21, 101, 192, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color light-gray"></div>	<ul>	<li>Light Gray</li>	<li>#bababa</li>	<li>rgba(186, 186, 186, 1)</li>	</ul>	</div>	<div>	<div class="system-occ--color dark-gray"></div>	<ul>	<li>Dark Gray</li>	<li>#878787</li>	<li>rgba(135, 135, 135, 1)</li>	</ul>	</div>	</article>	</section>
<!-- SECTION -->	<section class="system-palettes">	<header class="primary">	<h1 class="section-title">Color Application</h1>	<h2>Interactive Elements</h2>	</header>	<header>	<h3>Buttons</h3>	</header>	<article>	<div>	<div>	<button class="system-occ--color system-occ--primary-btn green">	Primary CTA	</button>	</div>	<ul>	<li>Green Primary CTA HTML</li>	<li><pre><code>&lt;button class="system-occ--color system-occ--primary-btn green"&gt;Green Primary CTA&lt;/button&gt</code></pre></li>	<li>.system-occ--color</li>	<li>.system-occ--primary-btn</li>	<li>.green</li>	</ul>	<ul>	<li>Primary CTA CSS</li>	<li>#69be28</li>	<li>rgba(105, 190, 40, 1)</li>	<li>border: 1px solid rgba(0, 0, 0, 0.05);</li>	<li>border-radius: 2px 2px;</li>	<li>box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);</li>	<li>color: #fff;</li>	<li>display: block;</li>	<li>font-size: 1rem;</li>	<li>font-weight: bold;</li>	<li>line-height: 1;</li>	<li>text-align: center;</li>	<li>text-transform: uppercase;</li>	<li>text-shadow: 1px 1px 1px rgba(0, 0, 0, .05);</li>	<li>margin: 20px</li>	<li>padding: 15px 40px</li>	</ul>	</div>	<div>	<div>	<button class="system-occ--color system-occ--primary-btn banner-red">	Primary CTA	</button>	</div>	<ul>	<li>Red Primary CTA HTML</li>	<li><pre><code>&lt;button class="system-occ--color system-occ--primary-btn banner-red"&gt;Red Primary CTA&lt;/button&gt</code></pre></li>	<li>.system-occ--color</li>	<li>.system-occ--primary-btn</li>	<li>.banner-redy</li>	</ul>	<ul>	<li>Primary CTA CSS</li>	<li>#d92727</li>	<li>rgba(217, 39, 39, 1)</li>	<li>border: 1px solid rgba(0, 0, 0, 0.05);</li>	<li>border-radius: 2px 2px;</li>	<li>box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);</li>	<li>color: #fff;</li>	<li>display: block;</li>	<li>font-size: 1rem;</li>	<li>font-weight: bold;</li>	<li>line-height: 1;</li>	<li>text-align: center;</li>	<li>text-transform: uppercase;</li>	<li>text-shadow: 2px 2px 2px rgba(0, 0, 0, .05);</li>	<li>margin: 20px</li>	<li>padding: 15px 40px</li>	</ul>	</div>	<div>	<div>	<button class="system-occ--color system-occ--secondary-btn light-gray">	Secondary CTA	</button>	</div>	<ul>	<li>Secondary CTA HTML</li>	<li><pre><code>&lt;button class="system-occ--color system-occ--secondary-btn light-gray"&gt;Secondary CTA&lt;/button&gt</code></pre></li>	<li>.system-occ--color</li>	<li>.system-occ--secondary-btn</li>	<li>.light-gray</li>	</ul>	<ul>	<li>Secondary CTA CSS</li>	<li>#bababa</li>	<li>rgba(79, 142, 30, 1)</li>	<li>background-color: #bababa;</li>	<li>border: 1px solid rgba(0, 0, 0, 0.05);</li>	<li>border-radius: 2px 2px;</li>	<li>box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);</li>	<li>color: #fff;</li>	<li>display: block;</li>	<li>font-size: 1rem;</li>	<li>font-weight: bold;</li>	<li>line-height: 1;</li>	<li>text-align: center;</li>	<li>text-transform: uppercase;</li>	<li>text-shadow: 2px 2px 2px rgba(0, 0, 0, .05);</li>	<li>padding: 15px 40px;</li>	</ul>	</div>	</article>	</section>
<!-- SECTION -->	<section class="system-container--content">	<header class="primary">	<h1 class="section-title">Containers: Copy</h1>	<h2>Article Hierarchy</h2>	</header>	<header>	<h3>Headings</h3>	</header>	<article class="system-container--copy headings">	<div>	<ul>	<li>Global Heading Properties</li>	<li>color: #333333;</li>	<li>font-family: 'Abril Fatface', cursive;</li>	<li>margin: 0 0 0.25em 0;</li>	<li>font-weight: inherit;</li>	<li>line-height: 1.2;</li>	<li>vertical-align: baseline;</li>	<li>-webkit-text-size-adjust: 100%;</li>	<li>-webkit-font-smoothing: antialiased;</li>	</ul>	</div>	<div>	<ul>	<li>Global Heading Properties</li>	<li>color: #333333;</li>	<li>font-family: 'Abril Fatface', cursive;</li>	<li>margin: 0 0 0.25em 0;</li>	<li>font-weight: inherit;</li>	<li>line-height: 1.2;</li>	<li>vertical-align: baseline;</li>	<li>-webkit-text-size-adjust: 100%;</li>	<li>-webkit-font-smoothing: antialiased;</li>	</ul>	</div>	</article>	<article class="system-container--copy headings">	<div>	<header>	<h1>The Compelling Truth About Dogs</h1>	</header>	<ul>	<li>H1 Heading</li>	<li>margin-top: 0;</li>	<li>font-size: 3.157rem;</li>	</ul>	</div>	<div>	<header>	<h2>The Compelling Truth About Dogs</h2>	</header>	<ul>	<li>H2 Heading</li>	<li>font-size: 2.369rem;</li>	</ul>	</div>	<div>	<header>	<h3>The Compelling Truth About Dogs</h3>	</header>	<ul>	<li>H3 Heading</li>	<li>font-size: 1.777rem;</li>	</ul>	</div>	<div>	<header>	<h4>The Compelling Truth About Dogs</h4>	</header>	<ul>	<li>H4 Heading</li>	<li>color: #666;</li>	<li>font-family: 'Open Sans', "Helvetica", sans-serif;</li>	<li>font-size: 1.333rem;</li>	<li>font-size: 1.333rem;</li>	</ul>	</div>	<div>	<header>	<h5>The Compelling Truth About Dogs</h5>	</header>	<ul>	<li>H5 Heading</li>	<li>font-size: 0.83rem;</li>	</ul>	</div>	</article>	<header>	<h3>Body Copy Components</h3>	</header>	<article class="system-container--copy article-layout">	<div>	<section>	<p>The wonderful world of a dog named River. He is treated like a prince by everyone he meets. He is admired by all the passers-by at the local park. Yet, it affects him not. He is content being outside in the sun and among the other creatures of the world. He has little concern for the comings and goings of others, although he takes the time to investigate every person, stroller, bike and dog that crosses his path. Oh! But do not touch him or try to pet his soft coat, for he will flee if you get too close!</p>	<p>The wonderful world of a dog named River. He is treated like a prince by everyone he meets. He is admired by all the passers-by at the local park. Yet, it affects him not. He is content being outside in the sun and among the other creatures of the world. He has little concern for the comings and goings of others, although he takes the time to investigate every person, stroller, bike and dog that crosses his path. Oh! But do not touch him or try to pet his soft coat, for he will flee if you get too close!</p>	</section>	<ul>	<li>Paragraph Body Copy</li>	<li>color: #333333;</li>	<li>font-family: 'Roboto', sans-serif;</li>	<li>font-size: 1rem;</li>	<li>font-weight: 400;</li>	<li>line-height: 1.5;</li>	<li>margin: 24px 0;</li>	</ul>	</div>	<div class="special-char-container">	<section>	<blockquote><svg id="special-char-LquoTop" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22.02 15.31"><defs><clipPath id="clip-path" transform="translate(-4.08 -7.64)"><path d="M12.93,9.53a1.89,1.89,0,0,0-1.18-.36q-1.54,0-3.53,2.29a7.56,7.56,0,0,0-2.13,4.9,4.35,4.35,0,0,0,1,2.87,3.22,3.22,0,0,0,2.61,1.2,3.19,3.19,0,0,0,2.22-.78,2.63,2.63,0,0,0,.86-2.05,3.74,3.74,0,0,0-.59-1.93A4.39,4.39,0,0,0,10.43,14a13.18,13.18,0,0,1,1.1-2.52A10.88,10.88,0,0,1,12.93,9.53Z" fill="none"/></clipPath><clipPath id="clip-path-2" transform="translate(-4.08 -7.64)"><path d="M24.31,9.73a1.89,1.89,0,0,0-1.18-.36q-1.54,0-3.53,2.29a7.56,7.56,0,0,0-2.13,4.9,4.35,4.35,0,0,0,1,2.87,3.22,3.22,0,0,0,2.61,1.2,3.19,3.19,0,0,0,2.22-.78,2.63,2.63,0,0,0,.86-2.05,3.74,3.74,0,0,0-.59-1.93,4.39,4.39,0,0,0-1.76-1.71,13.18,13.18,0,0,1,1.1-2.52A10.88,10.88,0,0,1,24.31,9.73Z" fill="none"/></clipPath></defs><title>Lquote</title><path d="M14.11,9.46a14.59,14.59,0,0,0-1.54,2,8.89,8.89,0,0,0-1,2.18,4.48,4.48,0,0,1,1.54,1.76,4.87,4.87,0,0,1,.59,2.23,3.46,3.46,0,0,1-1.14,2.65A4,4,0,0,1,9.7,21.3a4.06,4.06,0,0,1-3.22-1.47,5.14,5.14,0,0,1-1.27-3.47,8.29,8.29,0,0,1,2.43-5.48Q10,8.3,11.76,8.3A3.41,3.41,0,0,1,14.11,9.46Z" transform="translate(-4.08 -7.64)" fill="#231f20"/><g clip-path="url(#clip-path)"><line x1="0.27" y1="9.14" x2="9.14" y2="0.27" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="1.14" y1="11.79" x2="8.58" y2="4.34" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="9.27" y1="7.08" x2="2.69" y2="13.66" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="4.87" y1="14.84" x2="9.81" y2="9.9" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/></g><path d="M25.49,9.66a14.59,14.59,0,0,0-1.54,2,8.89,8.89,0,0,0-1,2.18,4.48,4.48,0,0,1,1.54,1.76A4.87,4.87,0,0,1,25,17.8a3.46,3.46,0,0,1-1.14,2.65,4,4,0,0,1-2.83,1.05A4.06,4.06,0,0,1,17.86,20a5.14,5.14,0,0,1-1.27-3.47A8.29,8.29,0,0,1,19,11.08Q21.33,8.5,23.13,8.5A3.41,3.41,0,0,1,25.49,9.66Z" transform="translate(-4.08 -7.64)" fill="#231f20"/><g clip-path="url(#clip-path-2)"><line x1="11.65" y1="9.34" x2="20.59" y2="0.4" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="12.51" y1="11.99" x2="20.23" y2="4.27" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="20.67" y1="7.26" x2="14.06" y2="13.86" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/><line x1="16.25" y1="15.04" x2="21.75" y2="9.54" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.77"/></g></svg>However, it affects him not. He will flee if you get too close!</blockquote>	</section>	<ul>	<li>Blockquote</li>	<li>font-family: 'Monoton', cursive;</li>	<li>font-size: 2rem;</li>	<li>margin: 20px auto;</li>	<li>text-align: center;</li>	<li>width: 200px;</li>	</ul>	<ul>	<li>Blockquote::first-letter</li>	<li>font-size: 3rem;</li>	<li>letter-spacing: -1px;</li>	<li>padding-left:2px;</li>	</ul>	</div>	</article>	<header>	<h3>Content Block</h3>	</header>	<article class="system-container--copy article-example">	<div>	<header>	<h1>The Compelling Truth About Dogs</h1>	<h2>The Compelling Truth About Dogs</h2>	<h3>The Compelling Truth About Dogs</h3>	<h4>The Compelling Truth About Dogs</h4>	<h5>The Compelling Truth About Dogs</h5>	</header>	<section>	<p>The wonderful world of a dog named River. He is treated like a prince by everyone he meets. He is admired by all the passers-by at the local park. Yet, it affects him not. He is content being outside in the sun and among the other creatures of the world. He has little concern for the comings and goings of others, although he takes the time to investigate every person, stroller, bike and dog that crosses his path. Oh! But do not touch him or try to pet his soft coat, for he will flee if you get close enough!</p>	<p>When he sees a rabbit, off he goes! But don't worry, he always returns. It is all in good fun to him. When he is tired and the rabbit has gotten away (as it always does), River will come bounding back, panting and ready to play.</p>	<button class="system-occ--primary-btn green">	Read more	</button>	</section>	</div>	</article>	<header>	<h3>Content Block: OCC Article page</h3>	</header>	<article class="system-container--copy">	<div>	<header>	<h1>The Compelling Truth</h1>	<h4>A Day In the Life of a Dog Named River</h4>	</header>	<section>	<p>The wonderful world of a dog named River. He is treated like a prince by everyone he meets. He is admired by all the passers-by at the local park. Yet, it affects him not. He is content being outside in the sun and among the other creatures of the world. He has little concern for the comings and goings of others, although he takes the time to investigate every person, stroller, bike and dog that crosses his path. Oh! But do not touch him or try to pet his soft coat, for he will flee if you get too close!</p>	<p>When he sees a rabbit, off he goes! But don't worry, he always returns. It is all in good fun to him. When he is tired and the rabbit has gotten away (as it always does), River will come bounding back, panting and ready to play.</p>	<button class="system-occ--primary-btn green">	Read more	</button>	</section>	</div>	</article>	<header>	<h3>Content Block: All Custom OCC Pages</h3>	</header>	<article class="system-container--copy">	<div>	<header class="primary">	<h1>The Compelling Truth</h1>	<h4>A Day In the Life of a Dog Named River</h4>	</header>	<section class="system-container--copy--occ">	<p>The wonderful world of a dog named River. He is treated like a prince by everyone he meets. He is admired by all the passers-by at the local park. Yet, it affects him not. He is content being outside in the sun and among the other creatures of the world. He has little concern for the comings and goings of others, although he takes the time to investigate every person, stroller, bike and dog that crosses his path. Oh! But do not touch him or try to pet his soft coat, for he will flee if you get too close!</p>	<p>When he sees a rabbit, off he goes! But don't worry, he always returns. It is all in good fun to him. When he is tired and the rabbit has gotten away (as it always does), River will come bounding back, panting and ready to play.</p>	<button class="system-occ--primary-btn green">	Read more	</button>	</section>	</div>	</article>	</section>
<!-- SECTION -->	<section class="system-animation">	<h1 class="section-title">Interactions and Animations</h1>	</section>	<section class="system-font">	<h1 class="section-title">Font (including designation/style)</h1>	</section>	<section class="system-container--media">	<h1 class="section-title">Containers: Media</h1>	</section>	<section class="system-container--buttons">	<h1 class="section-title">Containers: Buttons</h1>	</section>
<!-- EMAIL DESIGN SECTION -->	<section class="system-container--email--social">	<header>	<h1 class="section=-title">Email Components</h1>	</header>	<header>	<h3>Social Sharing Icons</h3>	</header>	<article>	<div>	<!-- EMAIL TABLE FOR SOCIAL SHARE -->	<table cellspacing="0" cellpadding="0" border="0" align="left" class="deviceWidth"> <tbody> <tr> <td style="Helvetica, sans-serif; color: #333333; font-size: 14px; line-height: 1.5; vertical-align: top; padding:10px 8px 10px 0"> <table width="150" align="left"> <tbody> <tr> <td width="30" style="color: #333333; font-weight: normal;">Share:</td> <td width="30" style="padding:0 5px 0 0;"><a target="_blank" href="https://www.facebook.com/dialog/share?app_id=193442674090994&display=popup&href=http%3A%2F%2Fstatic.samaritanspurse.org.s3.amazonaws.com%2Femail%2Fimages%2Focc%2F9558_2016_Herschend_Past_Churches%2FDollywood%2F9558-Dollywood.html" xt="SPCLICK" name="Facebook Icon Button"><img name="Cont_16" src="https://static.samaritanspurse.org.s3.amazonaws.com/email/static_email_assets/40x40-facebook.jpg" alt="" width="30" /></a></td> <td width="30" style="padding:0 5px 0 0;"><a xt="SPCLICK" href="https://twitter.com/intent/tweet?text=Earn+tickets+to+Dollywood+via%20@OCC_shoeboxes%20&url=https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/9619_OCC_Great_Homeschool_Convention/9619_Great_Homeschool_Convention.html" target="_blank" name="Twitter Icon Button"><img name="Cont_17" src="https://static.samaritanspurse.org.s3.amazonaws.com/email/static_email_assets/40x40-twitter.jpg" alt="" width="30"/></a></td> <td width="30" style="padding:0 5px 0 0;"><a target="_blank" href="#SPFORWARD" xt="SPFORWARD" name="SPFORWARD"><img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/static_email_assets/40x40-email.jpg" name="Cont_22" alt="" width="30" /></a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- END EMAIL TABLE FOR SOCIAL SHARE -->	</div>	</article>	</section>
</main>
</body>
</html>

Design System for OCC - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,800,600italic);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface|Monoton|Roboto:300i,400);
body { font-family: 'Open Sans', "Helvetica", sans-serif; font-size: 16px;	letter-spacing: 0; margin: 0; padding: 0; /*word-break: break-word; /* Prevents very long strings of text from overflowing their container */
}
section {	border: 1px solid;	border-color: #e5e5e5;	border: 1px solid rgba(229, 229, 229, 0.7);	margin: 1% 1% 7%;
}
section>header {	background-color: #eaefd7;	background-color: rgba(234, 239, 215, 0.5);	font-weight: inherit; line-height: 1.2;	padding: 2px 10px 25px 10px;	vertical-align: baseline;	-webkit-text-size-adjust: 100%;	-webkit-font-smoothing: antialiased;
}
section header h1 {	font-family: 'Abril Fatface', cursive;	font-size: 2.5rem;	font-weight: 400;	margin: 5px auto 0;
}
section header h2 {	font-family: 'Open Sans', "Helvetica", sans-serif;	font-size: 1.3rem;	font-weight: 400;	margin: 0 auto 5px;
}
section header:nth-of-type(n+2) {	background-color: #ffffff;	margin-top: 2%;	padding-bottom: 0;
}
section header:nth-of-type(n+2) h3 {	font-size: 1.1em;	font-weight: 600;	margin-top: 15px;	margin-bottom: 0;
}
header.primary {	text-align: center
}
article {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-flow: row wrap; flex-flow: row wrap;	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;	-ms-flex-line-pack: start; align-content: flex-start;
}
header, article, div, ul {	-webkit-box-flex: 2; -ms-flex: 2 auto; flex: 2 auto;	margin: 4px;	padding: 2px;
}
article.system-container--copy header,
article.system-container--copy section {	margin: 1% auto;	padding: 10px;
}
article.system-container--copy:nth-of-type(2) {	-ms-flex-flow: row wrap; flex-flow: row wrap;	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;	vertical-align: baseline;
}
article>div {	border:1px solid #cccccc;
}
article.system-color>div {	max-width: 208px
}
article.system-container--copy.headings>div {	max-width: 350px
}
article.system-container--copy.article-layout div {	max-width: 700px;	padding: 2%;
}
article.system-container--copy.article-layout div.special-char-container {	max-width: 300px
}
article.system-container--copy h1, article.system-container--copy h2, article.system-container--copy h3, article.system-container--copy h4 {	color: #333333;	font-family: 'Abril Fatface', cursive; margin: 1.2em auto .25em auto; font-weight: inherit; line-height: 1.2;	max-width: 850px;	vertical-align: baseline;	-webkit-text-size-adjust: 100%;	-webkit-font-smoothing: antialiased;
}
article.system-container--copy h1 {	font-size: 3.157rem;	margin-top: 0;
}
article.system-container--copy h2 {	font-size: 2.369rem;	margin-top: 0;
}
article.system-container--copy h3 {	font-size: 1.777rem;	margin-top: 0;
}
article.system-container--copy h4 {	color: #666;	font-family: 'Open Sans', "Helvetica", sans-serif;	font-size: 1.333rem;	font-style: italic;	margin-top: 0;
}
article.system-container--copy h5 {	font-size: 0.83rem;	margin-top: 0;	margin-left: auto;	margin-right: auto;	max-width: 850px;
}
article.system-container--copy section {border:none}
article.system-container--copy p {	color: #333333;	font-family: 'Roboto', sans-serif;	font-size: 1rem;	font-style: normal;	font-weight: 400; line-height: 1.5; margin: 24px auto;	max-width: 850px;
}
article.system-container--copy section.system-container--copy--occ p {	font-weight: 400;	margin: 0 auto;	-webkit-font-smoothing: antialiased;
}
article.system-container--copy blockquote::after {	content: "";	background: url("www.vanessavevoda.com/codepen/design-system/svg-icons/Lquote2.png") no-repeat fixed center;	height: 50px;	width: 50px;
}
svg {	border: 1px solid #d92727;	margin:0 auto;	text-align: center;
}
#special-char-LquoTop {	width: 100px;
}
#special-char-LquoBtm {	width: 150px;	background-color: red;	margin:0 auto;	text-align: center;
}
article.system-container--copy blockquote {	font-family: 'Monoton', cursive;	font-size: 2rem;	margin: 20px auto;	text-align: center;	width: 200px;
}
article.system-container--copy blockquote::first-letter {	font-size: 3rem;	letter-spacing: -1px;	padding-left:2px;
}
ul { margin-top: 2%; margin-bottom: 2%}
ul li {	font-size: 12px;	font-weight: 400;	letter-spacing: 0.03em;	list-style-type: none;	text-align: left;
}
li:first-of-type {	font-weight: 800;	letter-spacing: 0;	line-height: 2;
}
button {	margin: 20px 0;	vertical-align: baseline;	-webkit-text-size-adjust: 100%;	-webkit-font-smoothing: antialiased;
}
article.system-container--copy button {	margin-left: auto;	margin-right: auto;
}
/*----------- Color Palettes ------------*/
.system-occ--color {	color: #fff;	display: block;	border: 1px solid rgba(0, 0, 0, 0.05); height: 60px;
}
.system-occ--color.green {background-color: #69be28;}
.system-occ--color.dark-green {background-color: #4f8e1e;}
.system-occ--color.other-green {background-color: #87bd3c;}
.system-occ--color.yet-another-green {background-color: #b0d236;}
.system-occ--color.banner-red {background-color: #d92727}
.system-occ--color.dark-red {background-color: #b82121}
.system-occ--color.red {background-color: #be1d2c}
.system-occ--color.orange {background-color: #e64a19}
.system-occ--color.yellow {background-color: #ffab00}
.system-occ--color.blue {background-color: #1565c0}
.system-occ--color.purple {background-color: #512da8}
.system-occ--color.light-gray {background-color: #bababa}
.system-occ--color.dark-gray {background-color: #878787}
/*----------- Colored Elements ------------*/
.system-occ--primary-btn {	border: 1px solid rgba(0, 0, 0, 0.05);	border-radius: 2px 2px;	box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);	color: #fff;	display: block;	font-size: 1rem;	font-weight: bold;	line-height: 1;	text-align: center;	text-transform: uppercase;	text-shadow: 2px 2px 2px rgba(0, 0, 0, .05);	padding: 15px 40px;
}
.system-occ--primary-btn.green {background-color: #69be28;}
.system-occ--primary-btn {background-color: #e64a19;}
.system-occ--secondary-btn {	background-color: #bababa;	border: 1px solid rgba(0, 0, 0, 0.05);	border-radius: 2px 2px;	box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);	color: #fff;	display: block;	font-size: 1rem;	font-weight: bold;	line-height: 1;	text-align: center;	text-transform: uppercase;	text-shadow: 2px 2px 2px rgba(0, 0, 0, .05);	padding: 15px 40px;
}
Design System for OCC - Script Codes
Design System for OCC - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 6,889 Kb
Views 32,384
Do you need developer help for Design System for OCC?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vanessa Vevoda (vanessav) Script Codes
Name
My Own 3-col CSS
CSS Email Background Shapes
9901 2016 Nov NCW Starts Now
A Pen by Vanessa Vevoda
EDM Page
Short-Term Volunteer Page P1
V1 Fundraising Category Wires
Volunteer Page Build P2
Fundraising FlexBox-OotB
Fundraising Landing Page w Flexbox
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!