Style Guide

Ind.ie name

Our organisation name is Ind.ie, pronounced “indie”. When we’re explaining it to others, we often spell it out as “i-n-d-dot-i-e” so people know that it’s also our URL.

Logo use

Wherever possible, our logo should be shown coloured on a light background.

The full logo should be used unless the space available is square, where the logo mark can be used instead.

Alignment of logos

The padding space around the primary logo should be around 1/3 of the height of the logo on each side. The padding space around the logo mark should be around 1/3 of the height of the logo on the left and right, and 1/4 of the height of the logo above and below.

The weight and colour of the balloons in the logos means they can look unevenly aligned if centre-aligned in a space. If necessary, use the guidelines below to position the logos correctly.

Ind.ie and Heartbeat Logos

If printed in hot stamped foil, the balloon red colour is metallic colour 6058.

Logo marks

Pulse Logo

Logo marks

Waystone Logo

Phoenix Logo

General Branding

Colour

These are the colours we use in our branding.

Tones

• Black black #000000
• Black 90 black-ninety #191919
• Black 80 black-eighty #343434
• Black 70 black-seventy #4D4D4D
• Black 60 black-sixty #676767
• Black 50 black-fifty #7F7F7F
• Black 40 black-forty #999
• Black 30 black-thirty #B3B3B3
• Black 20 black-twenty #ccc
• Black 10 black-ten #E5E5E5
• Black 5 black-five #F3F3F3
• White white #fff
• White 80 white-eighty #ccc
• White 60 white-sixty #9a9a9a

Notifications

• Error error #b70000
• Pale Error error-pale #F6D8D1
• Success success #008819
• Pale Success success-pale #F3FFEC
• Warning warning #B34F16
• Warning Pale warning-pale #FFEFDA

Other

• Box Dark Grey box-dark-grey #1e1e1e
• Pale Blue focus-blue #97c7fd

Branding Colours

• Balloon Red balloon-red #c62c1f
• String Grey string-grey #050505
• String Light Grey string-light-grey #858585
• Logo Grey logo-grey #343434
• Logo Light Grey logo-light-grey #cbcbcb

Accent Colours

• Dark Accent accent-dark #820001
• Accent accent #b70000
• Accent Medium accent-medium #d60000
• Accent Light accent-light #f60000
• Accent Pale accent-pale #ff5548

Alternative Accent Colours

• Orange orange #d45100
• Dark Orange orange-dark #c03d00
• Yellow yellow #cf9800
• Dark Yellow yellow-dark #835900
• Bright Green green-bright #2aa900
• Green green #2C8500
• Dark Green green-dark #226600
• Blue blue #1275D9
• Dark Blue blue-dark #0D57A1
• Purple purple #8E47C0
• Dark Purple purple-dark #672a93

Writing

Tone

Our tone is clear and concise, but friendly. We’re individuals, and our writing is attributed to us as individuals, but we stay consistent with a simple and accessible writing style.

Proper punctuation

We use proper punctuation wherever possible. Character encoding isn’t necessary.

Core and Library

Styles that are consistent across all Ind.ie web projects are contained within the indie-style-core. These styles include:

• Library of brand colours, line-height measurements, and simple mixins
• CSS reset, to reset the default styles set by browsers to a consistent base
• Fonts, including font files
• Core HTML element styles (e.g <h1>, <p> and <ul>)
• Form styles
• Media styles, to style images used as content
• Notification styles, for warning, error, and success messages

The indie-style-core repository can be checked out into the source folder to provide the basic styles for any project. Regularly pulling from the repository will ensure the branding is kept consistent across projects, as well as using the most up-to-date development techniques.

The responsive-pixels respository needs to be checked out into the indie-style-core folder (in its folder) to compile rem versions of px measurements.

Once you’ve checked out the repository, you’ll need to import the styles into your main style sheet. Along with any site-wide partials, the stylesheet will look something like:

/* This is where we pull in all our stylus partials to compile a full stylesheet */

/* The core must go first, as it has the CSS reset and other base rules */

/* Tell the core where to find its images and fonts */
$font-path = '/assets/stylus/indie-style-core/fonts/'
$image-path = '/assets/stylus/indie-style-core/images/'

/* Tell the core where to find itself (absolute path) */
@import 'indie-style-core/_core'

@import _blog
@import _download
@import declaration
@import _errors
@import _footer
@import _funding
@import _home
@import heartbeat
@import _layout
@import _funding
@import _navigation
@import _newsletter-signup
@import phone
@import press
@import stratosphere
@import _sub-navigation
@import thunderclap
@import _video
@import waystone

Patterns

Design and mark-up patterns unique to this site.

Video

In order to support as many modern browsers as possible, multiple file formats need to be included for each video. For wide support, at least .mp4, .webm and .ogv files should be used.

When adding videos using S3, ensure the correct mimetype is set for each file:

Closed captions should be included as often as possible. I’ve written a guide on how to create closed captions on the blog.

Transcripts should be included with every video, either on the same page or a dedicated page. If they’re on a separate page, a transcript link should be included inside the video container, below the video controls.

Transcript

Code for video

HTML

<div class='px-video-container' id='myvid'>
	<div class='px-video-img-captions-container'>
		<div class='px-video-captions hide'></div>
		<div class='px-video-wrapper'>
			<video poster='images/spyware-2.0.jpg' class='px-video' controls>
				<!-- video files -->
				<source src='http://player.vimeo.com/external/116656700.hd.mp4?s=7c35a103bbe5bc74d7fa1a6241616d2b' type='video/mp4' />
				<source src='https://ind.ie/videos/spyware-2.0/spyware-2.0.webm' type='video/webm' />
				<source src='https://ind.ie/videos/spyware-2.0/spyware-2.0.ogv' type='video/ogg' />

				<!-- text track file -->
				<track kind='captions' label='English captions' src='media/captions-spyware-2.0-en.vtt' srclang='en' default />

				<!-- fallback for browsers that don't support the video element -->
				<div>
					<a href='https://ind.ie/videos/spyware-2.0/spyware-2.0.mp4'>
					<img src='images/spyware-2.0.jpg' width='640' height='360' alt='download video' />
					</a>
				</div>
			</video>
		</div>
	</div><!-- end container for captions and video -->
	<div class='px-video-controls'></div>
	<a class='transcript-link' href='#'>Transcript</a>
</div><!-- end video container -->

JavaScript

<script src='/assets/js/px-video.js'></script>
<script>
	// Initialize
	var video1 = new InitPxVideo({
		'videoId': 'myvid',
		'captionsOnDefault': false,
		'seekInterval': 20,
		'videoTitle': 'Ind.ie Launch',
		'debug': true
	});
</script>

Styles

/* 
Include video partial in the primary stylus file 
(Located in assets/stylus/_video.styl)
*/
@import _video

Notification Message

Used to highlight a particular message or action.

Code for notification messages

Styles

/* 
Notifications are included through the core stylus files
*/
/* The core must go first, as it has the CSS reset and other base rules */
@import '../../assets/stylus/indie-style-core/_core'

HTML for notification message

<div class='notification message'>
	<h2>Please confirm your email address to complete your subscription.</h2>
	<p>Thank you, an email has been sent to the address you provided. Please follow the link in that message to complete your subscription to the ind.ie Newsletter.</p>
</div>

A success message

HTML for success message

<div class='notification message success'>
	<h2>Please confirm your email address to complete your subscription.</h2>
	<p>Thank you, an email has been sent to the address you provided. Please follow the link in that message to complete your subscription to the ind.ie Newsletter.</p>
</div>

An alert message

HTML for alert message

<div class='notification message alert'>
	<h2>Please confirm your email address to complete your subscription.</h2>
	<p>Thank you, an email has been sent to the address you provided. Please follow the link in that message to complete your subscription to the ind.ie Newsletter.</p>
</div>

A warning message

HTML for warning message

<div class='notification message warning'>
	<h2>Please confirm your email address to complete your subscription.</h2>
	<p>Thank you, an email has been sent to the address you provided. Please follow the link in that message to complete your subscription to the ind.ie Newsletter.</p>
</div>

A loading message

HTML for loading message

<div class='notification--subtle message warning loading'>
	<p><span class='spinner'></span>Checking card details…</p>
</div>

An alternative, no-warning, loader

HTML for alternative, no-warning, loader

<div class='notification--subtle message loading'>
	<p><span class='spinner'></span>Loading something…</p>
</div>

Pagination

Code for pagination

HTML

<div class='pagination'>
	<h4 class='pagination--title'>Pages:</h4>
	<ul class='pages'>
		<li><a class='active' href='#'>1</a></li>
		<li><a href='#'>2</a></li>
		<li><a href='#'>3</a></li>
	</ul>
</div>

Styles

/* 
Include pagination partial in the primary stylus file 
(Located in assets/stylus/_pagination.styl)
*/
@import _pagination

Quick newsletter signup

Code for quick newsletter signup

HTML

<!-- Import the kit file that includes the quick newsletter signup HTML -->
<!-- @import '../assets/includes/_newsletter-signup-quick.kit' -->

Styles

/* 
Include newsletter signup partial in the primary stylus file 
(Located in assets/stylus/_newsletter-signup.styl)
*/
@import _newsletter-signup

Longer newsletter signup

<!-- Import the kit file that includes the newsletter signup HTML -->
<!-- @import '../assets/includes/_newsletter-signup.kit' -->

Styles

/* 
Include newsletter signup partial in the primary stylus file 
(Located in assets/stylus/_newsletter-signup.styl)
*/
@import _newsletter-signup

Speaker transcripts

We have transcripts with all of our videos, to make them more accessible and for anyone who prefers to read the content. There are slightly different formats for transcripts with a single speaker, and transcripts with multiple speakers, to clearly distinguish who’s speaking.

Code for speaker transcripts

Styles

/* 
Include video partial in the primary stylus file 
(Located in assets/stylus/_video.styl)
*/
@import _video

Single speaker transcript

HTML for single speaker transcript

<div id='transcript' class='transcript'  tabindex='-1'>
	<p><em>(applause)</em></p>
	<p>Hi. Thank you, I'm happy to be here. My name is Lena and I'm usually working mainly on marketing communications and community management, and this is the reason why I care about diversity, and this is the reason why I want to show you why diversity is a non-negotiable prerequisite when we want to create an independent future for the web.</p>
	<p><em>(applause)</em></p>
</div>

The id='transcript' is used so that the transcript can be linked to directly from the URL. The element contains tabindex='-1' so that the correct area recieves focus with keyboard navigation.

Multiple speaker transcript

HTML for multiple speaker transcript

<div id='transcript' class='transcript'  tabindex='-1'>
	<h3 class='transcript--name'>Aral:</h3>
	<p>To be honest, if I thought that it was easier than actually making a whole phone, I'd be doing that. I think that's easier than changing that culture. Changing culture is next to impossible.</p>
	<h3 class='transcript--name'>Ivanka:</h3>
	<p>Changing culture is a whole skill in of itself; it's a whole different area of study and it's hard, yes.</p>
	<p><em>(applause)</em></p>
 </div>

The id='transcript' is used so that the transcript can be linked to directly from the URL. The element also contains tabindex='-1' so that the correct area recieves focus with keyboard navigation.

List of blog posts (with and without post summaries)

Code for the list of blog posts

HTML

<section class='news-list hfeed'>
	<ul class='posts-list'>
		<li class='h-entry'>
			<time datetime='2014-10-21 19:00:00' class='dt-published'>21 Oct, 2014</time>
			<h2 class='p-name'><a class='post-link u-url' href='#'>Announcing Phoenix</a></h2>
		</li>
		<li class='h-entry'>
			<time datetime='2014-09-25 10:00:00' class='dt-published'>25 Sep, 2014</time>
			<h2 class='p-name'><a class='post-link u-url' href='#'>Nominet Trust 100</a></h2>
			<p class='p-summary'>Could ind.ie be one of the Nominet Trust’s 100 most innovative social projects of 2014?</p>
		</li>
	</ul>
</section>

Styles

/* 
Include blog partial in the primary stylus file 
(Located in assets/stylus/_blog.styl)
*/
@import _blog

Blog date and author

Code for blog date and author

HTML

<p class='newsletter-date dt-published' datetime="2014-10-01 18:00:00">1st October, 2014 — <span class='p-author'>Aral Balkan</span></p>

Styles

/* 
Include blog partial in the primary stylus file 
(Located in assets/stylus/_blog.styl)
*/
@import _blog

Textarea for copy-pasting code

Code for copy/paste textarea

HTML

<p>You can <strong>copy and paste the code for the banner below into anywhere on your website</strong>. It’s responsive and should fit flexibly into most spaces.</p>
	<textarea class='copy-code'>&lt;!-- Start Ind.ie crowdfunding banner --&gt;
		&lt;style type=&quot;text/css&quot;&gt;
		  .indie-crowdfunding-balloon {margin:0 auto 10px auto;}
		  .indie-crowdfunding-title,.indie-crowdfunding-text-line-one,.indie-crowdfunding-text-line-two {text-align: center;}
		  @media only screen and (min-width: 460px) {.indie-crowdfunding-title,.indie-crowdfunding-text-line-one,.indie-crowdfunding-text-line-two {text-align: left;}
		      .indie-crowdfunding-title {margin-top:0;}
		      .indie-crowdfunding-balloon {float: left; margin-bottom:0; width: 20%;}
		      .indie-crowdfunding-text {float: left; width: 80%;}}
		  @media only screen and (min-width: 570px) {.indie-crowdfunding-title { margin-top:5px;}}
		  @media only screen and (min-width: 570px) {.indie-crowdfunding-title { margin-top:10px;}}
		  @media only screen and (min-width: 620px) {.indie-crowdfunding-wrapper {margin: 0 auto; max-width: 620px;}}
		&lt;/style&gt;
		&lt;div id=&quot;indie-crowdfunding&quot; style=&quot;background:#fff; box-sizing:border-box; border:1px solid #efefef; margin:10px 0; width:100%;&quot;&gt;
		  &lt;a href=&quot;https://ind.ie&quot; style=&quot;background:#fff; color:#4d4d4d; border:none; cursor:pointer; display:block; text-decoration:none;&quot;&gt;
		    &lt;div class=&quot;indie-crowdfunding-wrapper&quot; style=&quot;padding:10px; overflow:hidden;&quot;&gt;
		      &lt;svg class=&quot;indie-crowdfunding-balloon&quot; style=&quot;display:block; padding:0;&quot; width=&quot;100px&quot; height=&quot;100px&quot; viewBox=&quot;0 0 100 100&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
		          &lt;g id=&quot;balloon-svg&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
		              &lt;g id=&quot;balloon&quot;&gt;
		                  &lt;path d=&quot;M45.1472941,61.4993753 C43.6250488,63.4083831 41.817368,65.0898286 37.1711438,69.0592813 C34.5259247,71.3191964 33.0786135,73.8490233 32.0914688,77.3033202 C31.8527431,78.1386886 31.7167516,78.6989083 31.3413195,80.3282087 C30.2829969,84.9211181 29.4592571,86.8756951 27.2297303,88.865024 C24.5204916,91.2823831 22.9181708,91.8962341 19.7165585,92.3445406 C18.2712451,92.5469209 17.5737102,92.7141101 16.7388365,93.1497574 C16.2004955,93.4306704 15.692347,93.803346 15.1936796,94.2916569 C15.0072053,94.4742584 15.0061477,94.7713569 15.1913173,94.9552449 C15.376487,95.1391329 15.677764,95.1401759 15.8642382,94.9575744 C16.2974737,94.5333365 16.7300283,94.2161014 17.1839353,93.9792472 C17.8936602,93.6089039 18.5081173,93.4616273 19.850347,93.2736813 C23.2241065,92.8012699 24.9984451,92.1215187 27.8682318,89.5609082 C30.2864759,87.4031934 31.1701201,85.3064748 32.2693228,80.5361539 C32.640931,78.9234485 32.7747803,78.372054 33.0074513,77.5578727 C33.9478392,74.2671909 35.3046317,71.895586 37.7942869,69.7685753 C42.4893546,65.7573937 44.3215749,64.0531223 45.8953735,62.0794629 C47.7353487,59.7719983 48.7438136,57.4775444 49.2992023,54.3104753 C49.3439829,54.0551166 49.1703643,53.8123091 48.9114142,53.7681496 C48.652464,53.72399 48.4062416,53.8952007 48.361461,54.1505594 C47.8324489,57.167218 46.8876289,59.3168672 45.1472941,61.4993753 Z&quot; id=&quot;string&quot; fill=&quot;#050505&quot;&gt;&lt;/path&gt;
		                  &lt;path d=&quot;M46.6656671,62.6600139 C46.4218143,63.1321003 46.1656645,63.5941539 45.8681427,64.1060111 C45.7102975,64.3775683 45.237019,65.1746611 45.1861967,65.2614971 C43.2859421,68.5083051 42.9358501,70.2313258 43.4025257,72.9311692 C43.6999916,74.6520886 43.6999916,75.6958385 43.5401753,76.2101613 C43.5232583,76.2646036 43.5082076,76.2994893 43.4975385,76.3178147 C43.5014423,76.3111095 43.5144534,76.2943396 43.538379,76.2711953 C43.3507773,76.4526704 43.3478798,76.7497569 43.5319072,76.9347567 C43.7159346,77.1197564 44.0171994,77.1226138 44.2048011,76.9411387 C44.2955104,76.8533918 44.381571,76.7055712 44.450076,76.4851078 C44.6608663,75.8067397 44.6608663,74.6259897 44.3406544,72.7734778 C43.9124709,70.296322 44.217826,68.7934791 46.0104292,65.7306063 C46.0589762,65.6476579 46.5332252,64.8489305 46.6937847,64.5727036 C46.9985419,64.0483988 47.2619461,63.5732592 47.5136525,63.0859687 C49.0636234,60.0853052 49.8280163,57.2537654 49.500247,54.3714979 C49.4709604,54.1139633 49.2355097,53.9286026 48.9743531,53.957483 C48.7131965,53.9863635 48.5252288,54.2185487 48.5545154,54.4760832 C48.8579324,57.1442065 48.1387904,59.8081235 46.6656671,62.6600139 Z&quot; id=&quot;string&quot; fill=&quot;#050505&quot;&gt;&lt;/path&gt;
		                  &lt;path d=&quot;M54.7720153,54.1533881 C53.2274263,55.0165899 40.1066499,46.1612689 34.1563599,39.1470757 C28.2060699,32.1328825 24.7521645,19.2479886 34.1722449,14.610616 C43.5923253,9.97324339 49.218808,18.2617662 51.0655907,17.8076976 C52.9123734,17.3536289 58.2274575,7.34209396 67.7286378,10.7206338 C77.229818,14.0991737 76.6297945,27.0280607 72.4682067,36.0420748 C68.3066189,45.056089 56.627814,53.116265 54.7720153,54.1533881 Z&quot; fill=&quot;#AD0B00&quot; transform=&quot;translate(51.842403, 32.076069) rotate(14.000000) translate(-51.842403, -32.076069) &quot;&gt;&lt;/path&gt;
		              &lt;/g&gt;
		          &lt;/g&gt;
		      &lt;/svg&gt;
		      &lt;div class=&quot;indie-crowdfunding-text&quot;&gt;
		        &lt;span class=&quot;indie-crowdfunding-title&quot; style=&quot;color:#333; display:block; font-weight:bold; font-size:19px; line-height:25px; margin-bottom:5px;&quot;&gt;Google and Facebook spy on you.&lt;/span&gt;
		        &lt;span class=&quot;indie-crowdfunding-text-line-one&quot; style=&quot;color:#4d4d4d; display:block; font-weight:normal; font-size:17px; line-height:21px; margin-bottom:5px;&quot;&gt;Help &lt;strong style=&quot;font-weight:bold;&quot;&gt;Ind.ie&lt;/strong&gt; create alternatives that don’t.&lt;/span&gt;
		        &lt;span class=&quot;indie-crowdfunding-text-line-two&quot; style=&quot;color:#4d4d4d; display:block; font-weight:normal; font-size:17px; line-height:21px; margin-bottom:5px;&quot;&gt;&lt;strong style=&quot;font-weight:bold;&quot;&gt;Crowdfunding&lt;/strong&gt; ends on Human Rights Day, 10 December 2014.&lt;/span&gt;
		      &lt;/div&gt;
		    &lt;/div&gt;
		  &lt;/a&gt;
		&lt;/div&gt;
		&lt;!-- End Ind.ie crowdfunding banner --&gt;
	</textarea>
<p>Or you can <a href='download/banner.html'>download the source</a>.</p>

Any HTML used in the textarea will need to be encoded with an HTML encoder so it doesn’t render as HTML, and can be easily copied from the textarea.

Styles

/* 
Text area styles are included through the core stylus files
*/
/* The core must go first, as it has the CSS reset and other base rules */
@import '../../assets/stylus/indie-style-core/_core'