Fight the zombie styleguide

class: middle, center, naked, full-background, title

.c-content.u-center-absolute[

# **Escape the ".u-secondary[zombie styleguides]"**

<br>

## 3 methods to arm yourself <br> and **.u-secondary[defeat them]**

<br>

Thibault Mahé
]

---
class: relative

# About

- Thibault Mahé ([@tibomahe](https://twitter.com/TiboMahe))
- Front-end developer at [Startup Palace](http://www.startup-palace.com)

.l-flex-col--50[
.u-center["I build *design systems*<br> for startups and larger companies."]
]

---
class: c-slide-list-lg

# The entropy of the production

.u-center[
<img src="im/production-curve.svg" alt="production curve" style="height: 400px;">
<br>
*Patch + patch + patch + patch + ...*
]

---
class: c-slide-list-lg

# Design system

.c-blockquote[A set of **interconnected patterns** and **shared practices** coherently **organized** to meet
a specific **strategy**]

<br>

- Visual **consistency** and shared **vocabulary** for an easier **communication**
- Fast **testing** and **prototyping**
- More methodical and **modular** **workflow**

.l-flex-row[
.l-flex-col--25.u-pd[
.u-center[
<img src="im/styleguide-sj-buttons.png" alt="">
]
]
.l-flex-col--25.u-pd[
.u-center[
<img src="im/styleguide-sj-cards.png" alt="">
]
]
.l-flex-col--25.u-pd[
.u-center[
<img src="im/styleguide-sj-tunnel.png" alt="">
]
]
.l-flex-col--25.u-pd[
.u-center[
<img src="im/styleguide-sj-dragdrop.png" alt="">
]
]
]

---
class: c-slide-list-lg

# Zombie Styleguide

.u-center[
<img src="im/styleguide-curve.svg" alt="styleguide curve" style="height: 400px;">
<br>
*Entropy always "infects" a static styleguide*
]

---
class: c-slide-list-lg

# Zombie Styleguide

.u-center[
<img src="im/broken-system.png" alt="" style="height: 390px;">
]

.u-center[*A "**zombie styleguide**" (Jina Bolton) is an <br>"abandoned" styleguide, half-living half-dead.*]

---
class: c-slide-list-lg

# Zombie Styleguide

.u-center[
<img src="im/design-system-curve.svg" alt="design system curve" style="height: 400px;">
<br>
*A design system is a process that constantly takes control over the growth of the entropy*
]

---
class: naked, full-background
name: weapon

<h1 id="fight-the-zombie-styleguide" style=" color: var(--secondary); text-align: center; display: block; width: 100%; font-weight: bold;">
		Fight the zombie styleguide
	</h1>

</div>

---
class: middle, center, naked, full-background, overlay-background, title

.c-content.u-center-absolute[

# **1. Align the team around a .u-secondary[strategy]**

]

---

# Systems

.l-flex-row[
.l-flex-col--33.u-pd[
.u-center[
<img src="im/book-thinking-in-systems.png" alt="design system foundation">
]
]
.l-flex-col--66.u-pd[
.c-blockquote["A system is an **interconnected** set of elements that is **coherently organized** in a way that **achieves something**."]

Donella Meadows
]
]

---

# Systems

.l-flex-row.u-top-align[
.l-flex-col--33.u-pd[
<br>
.u-large[
A system is made of:

- **elements**,
- **interconnections**,
- a **function**.
]
]
.l-flex-col--66.u-pd[
.u-center[
<img src="im/digestive-system-anatomy.jpg" alt="" style="height:410px;">
<br>
*The digestive system*
]
]
]

---

# Strategies

.l-flex-row[
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-foundation.png" alt="design system foundation" style="height: 170px;">
]
.u-small.u-center[*Zurb Foundation*]
]
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-ibm.png" alt="design system IBM" style="height: 170px;">
]
.u-small.u-center[*IBM*]
]
]
.l-flex-row[
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-intuit.png" alt="design system intuit" style="height: 170px;">
]
.u-small.u-center[*Intuit*]
]
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-mailchimp.png" alt="design system mailchimp" style="height: 170px;">
]
.u-small.u-center[*MailChimp*]
]
]

---

# Strategies

.l-flex-row[
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-foundation.png" alt="design system foundation" style="height: 150px;">
]
.u-small.u-center.u-pd-bottom--s[***A world's toolkit***]
.u-small.u-center[*Prototyping efficiently - ∞ teams / products*]
]
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-ibm.png" alt="design system IBM" style="height: 150px;">
]
.u-small.u-center.u-pd-bottom--s[***An Enterprise's language***]
.u-small.u-center[*Consistency and collaboration - 100 teams / products*]
]
]
.l-flex-row[
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-intuit.png" alt="design system intuit" style="height: 150px;">
]
.u-small.u-center.u-pd-bottom--s[***A portfolio's guide***]
.u-small.u-center[*Consistency and collaboration - 10 teams / products*]
]
.l-flex-col.u-pd[
.u-center[
<img src="im/ds-mailchimp.png" alt="design system mailchimp" style="height: 150px;">
]
.u-small.u-center.u-pd-bottom--s[***A Team's playbook***]
.u-small.u-center[*Efficiency - 1 team / product*]
]
]

---

# The elements of User Experience

.l-flex-row[

.l-flex-col--50.u-center[
<img src="im/the-elements-of-ux.png" alt="the 5 planes of UX" style="height: 350px;">
<br>
]

.l-flex-col--50[
- **Surface**: the visual product
- **Skeleton**: optimizing the arrangements of the elements
- **Structure**: how to find the information
- **Scope**: features
- **Strategy**: goals and users needs
]

]

.u-center[
*From Jesse James Garrett <br> "Elements of the User Experience"*
]

---

# The elements of User Experience

.l-flex-row[

.l-flex-col--50.u-center[
<img src="im/the-elements-of-ux.png" alt="the 5 planes of UX" style="height: 350px;">
]

.l-flex-col--50[
<img src="im/ripple-effect.png" alt="ripple effect" style="height: 350px;">
]

]

.u-center[
*From Jesse James Garrett <br> "Elements of the User Experience"*
]

---
class: middle, center

.c-blockquote["A Design System isn’t a Project. <br>It’s **a Product**, Serving Products."]

*Nathan Curtis*

---
class: c-slide-list-lg

# Designing a product

.u-relative.u-center[
<img src="im/value-proposition-design-cover.png" alt="the value proposition book" style="height: 450px;">
]

---
class: c-slide-list-lg

# Value Proposition Design

.u-relative.u-center[
<img src="im/value-proposition-canvas.svg" alt="the value proposition canvas" style="height: 430px;">
.u-center.u-small[*Screenshot from Alex Osterwalder's <br>"Value Proposition Design"*]
]

---
class: middle, center

---

# Identify the users

.l-flex-row[

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-6.png)
]
.c-card-persona__right[
#### Agathe
##### Front-end dev
- Well organized
- Scatterbrain
]
]
]

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-7.png)
]
.c-card-persona__right[
#### Vincent
##### Front-end dev
- Conscientious
- Go-getter
]
]
]

]

.l-flex-row[

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-1.png)
]
.c-card-persona__right[
#### Dominique
##### Freelance
- Hard worker
- Snowed under
]
]
]

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-3.png)
]
.c-card-persona__right[
#### Gilles
##### Intern
- Motivated
- Inexperienced
]
]
]

]

---

# Identify the users

.l-flex-row[

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-4.png)
]
.c-card-persona__right[
#### Iberibaen
##### UI Designer
- Accessible
- Meticulous
]
]
]

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-5.png)
]
.c-card-persona__right[
#### Marine
##### Back-end dev
- Concerned
- Solitary
]
]
]

]

.l-flex-row[

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-2.png)
]
.c-card-persona__right[
#### Guillaume
##### Back-end dev
- Curious
- Focused
]
]
]

.l-flex-col[
.c-card-persona[
.c-card-persona__left[
![](im/lego-head-8.png)
]
.c-card-persona__right[
#### Constance
##### Product owner
- Empathic
- Impatient
]
]
]

]

---

# Segmentation

.l-flex-row[
.l-flex-col--33[
.c-img--lg[![](im/the-users.png)]
]
.l-flex-col[
![](im/the-segments.png)
]
]

---
class: middle, center

---
class: c-slide-list-lg

# Proposition Value Canvas: the "customer jobs"

.u-center[
<img src="im/vpc-ex-1.png" alt="" style="height: 470px;">
]

---
class: c-slide-list-lg

# Proposition Value Canvas: the "pains" / "fears"

.u-center[
<img src="im/vpc-ex-2.png" alt="" style="height: 470px;">
]

---
class: c-slide-list-lg, red

# Proposition Value Canvas: the "gains" / "dreams"

.u-center[
<img src="im/vpc-ex-3.png" alt="" style="height: 470px;">
]

---
class: middle, center

---
class: c-slide-list-lg

# Keypoints

<br>

1. **Identify** and "**segment**" the users
2. Get a canvas, some post-its and some pencils
3. **Lead** the workshop for every segment
4. **Gather** the tasks, fears and dreams
5. **Prioritize** the post-its
6. **Synthesize** and **share** results

---
class: c-slide-list-lg

# Benefits

<br>

- **Involving** and **aligning** the whole team encourage the product's adoption
- Gather all the needs to define a proper **strategy** and **make yours** the design system
- Foster the **debates** and **discussions** about the subject
- "**Recreational**"

---
class: middle, center, naked, full-background, overlay-background, title

.c-content.u-center-absolute[

# **2. .u-secondary[Identify] the system as a team**

]

---

# Design system

Donella Meadows
]
]

---

# Toward a new metaphor: Lego

.u-center[
<img src="im/lego.png" alt="" style="height: 430px;">
<br>
*Screenshot from Brad Frost's "Atomic Design"*
]

---

# Toward a new metaphor: the industrial process

.u-center[
<img src="im/car-door-modules.png" alt="" style="height: 430px;">
<br>
*Screenshot from Stephen Kieran & James Timberlake's "Refabricating ARCHITECTURE"*
]

---

# Toward a new metaphor: the Music

.u-center[
<img src="im/requiem.png" alt="" style="height: 430px;">
]

---

# Toward a new metaphor: the Language

.u-center[
<img src="im/ux-pin-design-system-is-a-language.png" alt="" style="height: 400px;">
<br>
*Screenshot from Marcin Treder's article <br> "Design Systems Are a Language. Product Is a Conversation"*
]

---

# Toward a new metaphor: the Chemistry

.u-center[
<img src="im/atomic-design.png" alt="" style="height: 200px; margin: 100px auto;">
<br>
*Screenshot from Brad Frost's "Atomic Design"*
]

---
class: c-slide-list-lg

# Toward a new metaphor

.l-flex-row.u-top-align[
.l-flex-col--50.u-pd[
.u-center[
<img src="im/combo.png" alt="" style="height: 400px;">
]
]
.l-flex-col--50.u-pd[
.c-lead[Why using metaphors?]
- For educational and evangelisation purpose
- For facilitating the definition of the sub-elements
]
]

---
class: c-slide-list-lg

# Toward a new metaphor

.u-center[
<img src="im/sp-guide-2.png" alt="" style="height: 470px;">
]

---
class: c-slide-list-lg

# The interface inventory

<br>

.l-flex-row[
.l-flex-col--50.u-pd[
<img src="im/sp-interface-inventory.png" alt="" style="height: 230px;">
]
.l-flex-col--50.u-pd[
.c-blockquote["An interface inventory is a comprehensive collection of the **bits and pieces** that make up your interface."]

Brad Frost
]
]

---
class: c-slide-list-lg

# The interface inventory

.l-flex-row.u-bottom-align[
.l-flex-col--50.u-pd[
.u-center[
<img src="im/interface-inventory-template.png" alt="Brad frost interface inventory">
]
]
.l-flex-col--50.u-pd[
.u-center[
<img src="im/interface-inventory-manual.jpg" alt="Charlotte Jackson interface inventory" style="height: 350px;">
]
]
]

.l-flex-row.u-top-align[
.l-flex-col--50.u-pd[
.u-center[*The screenshot approach from Brad Frost*]
]
.l-flex-col--50.u-pd[
.u-center[*The paper and scissors approach from Charlotte Jackson*]
]
]

---

# The interface inventory

.u-center[
<img src="im/inventory-buttons.png" alt="interface inventory" style="height: 400px;">
]

---

# The interface inventory

.u-center[
<img src="im/inventory-columns.png" alt="interface inventory" style="height: 400px;">
]

---

# The interface inventory

.u-center[
<img src="im/inventory-forms.png" alt="interface inventory" style="height: 400px;">
]

---

# The interface inventory

.u-center[
<img src="im/inventory-header.png" alt="interface inventory" style="height: 400px;">
]

---

# The interface inventory

.u-center[
<img src="im/inventory-card-detailed.png" alt="interface inventory" style="height: 400px;">
]

---

# Code preview

.l-flex-row.u-top-align[
.l-flex-col--50.u-pd[
.u-center[
<img src="im/code-preview.png" alt="code preview" style="height: 400px;">
]
]
.l-flex-col--50.u-pd[

<br>

- Identify the **potential issues**
- **Share** ideas and **synchronize** consistency
- Reach an agreement on technical **approach**
- **Save time** for the code reviews
- Help **onboarding** new developers
]
]

---
class: c-slide-list-lg

# Keypoints

<br>

1. **Gather** the team
2. **Divide** the interfaces into suggested patterns
3. **Group** patterns and **categorize** each group
4. **Label** and **describe** the patterns
5. **Align** the team on the technical approach
6. **Prioritize** the patterns

<br>

.u-center[
[Brad Frost's template:<br> tinyurl.com/brad-frost-template](https://tinyurl.com/brad-frost-template)
]

---
class: c-slide-list-lg

# Benefits

<br>

- Kickoff the design library by **engaging the whole team**
- **Check** system consistency
- Define and discuss the "**shared vocabulary**", ie. components' names and categories
- **Reach an agreement** on the technical approach and identify the potential issues
- **Recreational** too!

---
class: middle, center, naked, full-background, overlay-background, title

.c-content.u-center-absolute[

# **3. Involve the whole team in the .u-secondary[building]**

]

---
class: c-slide-list-lg

# Design system's issues

<br>

.l-flex-row[
.l-flex-col--50.u-pd[
.u-center[
<img src="im/redlines.png" alt="">
]
]
.l-flex-col--50.u-pd[
.u-center[
<img src="im/zeplin.png" alt="">
]
]
]

.u-center[*Assets and design "basis" are often still <br> managed locally and not at the system scale.*]

---
class: c-slide-list-lg

# Design system's issues

.l-flex-row[
.l-flex-col--50.u-pd[

- Too wide range of unique... :
  - font sizes
  - colors
  - margin and padding sizes
  - media queries
  - border radiuses
  - ...

]
.l-flex-col--50.u-pd[
.c-img--md.u-center[
<img src="im/too-much.gif" alt="">
]
]
]

---
class: c-slide-list-lg

# Design tokens

.c-img--lg.u-center[
<img src="im/article-bolton.png" alt="">
<br>
*www.lightningdesignsystem.com*
]

---
class: c-slide-list-lg

# Design tokens

.u-center[
<img src="im/sp-guides.png" alt="" style="height: 450px;">
]

---
class: c-slide-list-lg

# Design tokens

<br>

.c-blockquote.u-center[
  "Design tokens are the visual design **atoms** of the design system — specifically, they are **named entities** that **store** visual design attributes. We use them in place of hard-coded values [...] in order to **maintain** a **scalable** and **consistent** visual system for UI development."

.u-block.u-right[– Salesforce]
]

---
class: c-slide-list-lg

# Design tokens

.l-flex-row.u-top-align[
.l-flex-col--50.u-pd[
.u-large[Design tokens are...]

<br>

- **stored**
- **organized**
- **centralized**
- **propagated**

<br>

.u-large[visual design attributes...]
]
.l-flex-col--50.u-pd[
.u-large[...aiming for:]

<br>

- **communication**
- **consistency**
- **reusability**
- **maintainability** (collaboration)

]
]

---
class: c-slide-list-lg

# Organized

.l-flex-row.u-top-align[

.l-flex-col--50.u-pd[
.u-center[
*What can I do?* <br>
Every design system offers ***options***. <br>
Options are visual identity properties.
]
<br>
```yml
# Colors options
# ---------------------

blue-base: '#2b7de8'
blue-deep: '#38bfea'
blue-dark: '#3239e8'
grey10: '#262729'
grey20: '#313131'
grey30: '#4d4d4d'
grey40: '#888'
grey50: '#aeaeae'
grey60: '#ccc'
grey70: '#eaeaea'
grey80: '#f4f4f4'
```
]

]

---
class: c-slide-list-lg

# Organized

.l-flex-row.u-top-align[

.l-flex-col--50.u-pd[
.u-center[
*What can I do?* <br>
Every design system offers ***options***. <br>
Options are visual identity properties.
]
<br>
```yml
# Colors options
# ---------------------

.l-flex-col--50.u-pd[
.u-center[
*What choice do I make?* <br>
Design systems submit ***decisions***. <br>
Decisions are options applied to contexts.
]
<br>
```yml
# Colors decisions
# ---------------

# global
primary-color: $blue-base
text-color: $grey30
body-background: $white

# objects
navbar-link-text-color: $white
headband-color: $blue-base
hr-color: $grey40
```
]

]

---
class: c-slide-list-lg

# Centralized

<br>

- Stylesheets are "**decisions propagated through a system**" (Nathan Curtis)

<br>

```scss
// Design specifications
// ----------------------

.c-button {
  display: inline-block;
  font-size: $button-font-size-default;
  padding: $space-m;
  color: $text-color;
  background-color: $white;
  border-radius: $button-border-radius-default;
}

.c-button--primary {
  background-color: $primary-color;
  color: $white;
}
```

---

# Centralized

.l-flex-row.u-top-align[

.l-flex-col--25.u-pd[
.u-center[
*At the root of the files system* <br>
<img src="im/token-architecture.png" alt="" style="height: 390px;">
]
]

.l-flex-col--25.u-pd[
.u-center[
*Legible & editable <br> by anyone* <br>
]
```yml
# Typography

font-family:
  base: 'Lato, Helvetica'
  heading: 'Montserrat, Helvetica'

font-size:
  xs: 8px
  s: 16px
  m: 20px
  l: 28px
  xl: 32px
  xxl: 40px

font-weight:
  light: 300
  regular: 400
  medium: 500
  bold: 700
```
]

.l-flex-col--50.u-pd[
.u-center[
*Opened to everyone to foster <br> collaboration and maintainability* <br>
<img src="im/tokens-process.png" alt="" style="height: 390px;">
]
]

]

---

# Propagated

.l-flex-row.u-top-align[

.l-flex-col--50.u-pd[
.u-center[
*Tokens are compiled with a task runner* <br>
]
```javascript
// Compile Design tokens
// -----------------------
gulp.task('build-token', function() {
  return gulp.src([paths.designTokens.files])
    // transform tokens from yaml into json
    .pipe(yaml())
    // store json
    .pipe(gulp.dest(paths.designTokens.jsonOutputFolder))
    // transform tokens from json into scss
    .pipe(jsonSass({
      delim: '-',
    }))
    // store to output folder
    .pipe(gulp.dest(paths.designTokens.outputFolder));
});
```
]

.l-flex-col--25.u-pd[
.u-center[
*Json output*<br>
]
```json
{
  "font-family": {
    "base":"Lato, Helvetica",
    "heading":"Montserrat, Helvetica"
  },
  "font-size": {
    "xs":"8px",
    "s":"16px",
    "m":"20px",
    "l":"28px",
    "xl":"32px",
    "xxl":"40px"
  },
  "font-weight": {
    "light":300,
    "regular":400,
    "medium":500,
    "bold":700
  }
}
```
]

.l-flex-col--25.u-pd[
.u-center[
*Sass output*<br>
]
```scss
$font-family-base: Lato, Helvetica;
$font-family-heading: Montserrat, Helvetica;
$font-size-xs: 8px;
$font-size-s: 16px;
$font-size-m: 20px;
$font-size-l: 28px;
$font-size-xl: 32px;
$font-size-xxl: 40px;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
```
]

]

---

# Synchronization and automation

---

# Synchronization and automation

.c-img--lg.u-center[
<img src="im/comet-options.png" alt="">
<br>
*How the Comet design system present its option tokens.*
]

---

# Going further

.u-large[Can our "decision" tokens match our actual decision approach?]

<br>

.l-flex-row.u-top-align[

.l-flex-col--50.u-pd[
.u-center[**"Object-oriented CSS"**]
```scss
// Button definition
// ----------------------

.c-button {

display: inline-block;
  font-size: $font-size-m;
  padding: $space-m;
  color: $text-color;
  background-color: $white;
  border-radius: $border-radius-base;

&--primary {
    background-color: $primary-color;
    color: $white;
  }

}

```
]

.l-flex-col--50.u-pd[
.u-center[**"Functional CSS"**]
```scss
// "Pure" CSS classes
// ----------------------

.u-bg-white { background: $white; }
.u-bg-grey { background: $grey; }
.u-bg-primary { background: $color-primary; }
.u-bg-secondary { background: $color-secondary; }

.u-white { color: $white; }
.u-grey { color: $grey4;}

.u-primary { color: $brand-primary; }
.u-secondary { color: $brand-secondary; }
.u-tertiary { color: $brand-tertiary; }

.u-inline-center { text-align: center; }
.u-inline-right { text-align: right; }
.u-inline-left { text-align: left; }

```
]

]

---

# Going further

<br>

.l-flex-row.u-top-align[

.l-flex-col--50.u-pd[
.u-center[*Classes could be compiled from tokens*]
```js
// Compile Utility tokens
// ----------------------
gulp.task('build-utilities', function() {
  return gulp.src(paths.designUtilities.files)
    // transform tokens from yaml into json
    .pipe(yaml())
    // store json
    .pipe(gulp.dest(paths.designUtilities.jsonOutputFolder))
    // transform tokens from json into scss
    .pipe(jsonSassUtilities())
    // store to output folder
    .pipe(gulp.dest(paths.designTokens.outputFolder));
});
```
]

.l-flex-col--50.u-pd[
.u-center[*Input*]
```yml
position:
  relative: relative

background-color:
  bg-blue: *blue
  bg-green: *green
```

.u-center[*Output*]
```scss
.u-relative{ position: relative; }
.u-bg-blue{ background-color: $blue; }
.u-bg-green{ background-color: $green; }
```
]

]

---
class: c-slide-list-lg

# Keypoints

<br>

1. **Identify** the "visual atoms" of the system
2. **Store** them in a data format (yml)
3. **Create** a generating and propagating process
4. **Start** to write the design specs with tokens
5. **Open** the files to everyone and promote

---
class: c-slide-list-lg

# Benefits

<br>

- **Collaboration**: empowers non-developers to engage with code with a more human-readable language
- **Maintenance**: living documentation, technology-agnostic tokens, and less hardcoded-values
- **Naming**: "shared vocabulary" on the tokens too
- **Opportunities** to synchronize and extend the system into designer tools (Sketch, Brand.ai, ...)

---
class: middle, center, naked, full-background, title

.c-content.u-center-absolute[

# **Trying to escape the zombie styleguide...**

]

---
class: c-slide-list-lg

# Escape the zombie styleguide

.u-center[
<img src="im/all-workshops.png" alt="" style="height: 470px;">
]

---
class: c-slide-list-lg

# Escape the zombie styleguide

.l-flex-row[
.l-flex-col--66.u-pd[
.u-center[
<img src="im/golden-circle.png" alt="" style="height: 390px;">
]
]
.l-flex-col--33.u-pd[
.c-blockquote["**Start with why**"]
Simon Sinek
]
]

---
class: middle, center, naked, full-background, title

.c-content.u-center-absolute[

# **.u-secondary[Thanks]**

<br>

<a href="https://twitter.com/TiboMahe" class="u-light u-large u-underline-none">@tibomahe</a>

<a href="http://thibault.mahe.io/talks/escape-zombie-styleguides/" class="u-light u-large u-underline-none">thibault.mahe.io/talks/escape-zombie-styleguides</a>
]

---

# Photo credits

<br>

Lego Star Wars chased by Zombie, by hoeynairda [via Flickr](https://www.flickr.com/photos/hoeynairda/6773056034/)

Lego zombie, by hoeynairda [via Flickr](https://www.flickr.com/photos/hoeynairda/6919173113/)

Wake up sunshine, by Foolish Lego [via Flickr](https://www.flickr.com/photos/foolishlego/14147332992/)

Zombies!, by Michael Doak, [via Flickr](https://www.flickr.com/photos/10783037@N08/2714250903/)

Hazardous, by Kyle Hardisty, [via Flickr](https://www.flickr.com/photos/cautionbricks/6114071543/)

Apocalypse Commando, by Ma₪go, [via Flickr](https://www.flickr.com/photos/legohead458/6309822916/)