Logos Colour Typefaces Forms & controls Tables Borders Layout Typography Themes

Lay­out con­ven­tions to help speed up the design process.

Our design style is very edi­to­ri­al­ly influ­enced. The fol­low­ing grids and scales form a frame­work for lay­out and cre­ativ­i­ty for a num­ber of medi­ums & media sizes.

Default

Standard margins. Grid gap = 1 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Default wide

Margins = 1 line. Grid gap = 1 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Default full-bleed

No margins. Grid gap = 1 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Loose

Standard margins. Grid gap = 2 lines.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Loose wide

Margins = 1 line. Grid gap = 2 lines.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Loose full-bleed

No margins. Grid gap = 2 lines.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Tight

Standard margins. Grid gap = 1/2 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Tight wide

Margins = 1 line. Grid gap = 1/2 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Tight full-bleed

No margins. Grid gap = 1/2 line.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Hairline

Standard margins. Grid gap = 1px.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Tight wide

Margins = 1 line. Grid gap = 1px.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Tight full-bleed

No margins. Grid gap = 1px.


1 1

1 2

2/2

1 3

2 3

3/3

1 4

2 4

3 4

4/4

1 6

2 6

3 6

4 6

5 6

6/6

1 12

2 12

3 12

4 12

5 12

6 12

7 12

8 12

9 12

10 12

11 12

12/12

Talk to us.

Learn more about our programs or just say hi.