<aside>

Basics

Logo

Colors

Typography

Icons

Layout & Grids

Resources

Figma Component Library

Video Assets

Collateral

Email Signature

Business Cards

WIP

Imagery

Animation

App

Lower Thirds

Social Headers

Brand Images

Keynote/Google Slide Templates

</aside>

Brand Layout & Grids

These grids make up the common spacing rules used on each product type. Use these to help format your work to Angel Studios standards.

<aside> <img src="/icons/save_gray.svg" alt="/icons/save_gray.svg" width="40px" />

Resources

https://www.figma.com/design/koQi6oHZUd8seeUTusi1Pv/Photon-Core?node-id=6753-66459&t=poARrJIAc4H9Yld0-1 (Angel’s Figma Style Guide)

</aside>

<aside> <img src="/icons/grid-dense_gray.svg" alt="/icons/grid-dense_gray.svg" width="40px" />

Grid

These grids make up the common spacing rules used on each product type. Use these to help format your work to Angel Studios standards.

<aside>

16 Column Scalable Grid – (1920px TV)

A 16 Column grid layout is used for 1920px screen widths for TV’s. A 18px margin is used on the left and right of the grid that scales as the screen size increases. A 36px column gutter is used between each column grid.

</aside>

<aside>

12 Column Scalable Grid – (1280px & Larger Desktop)

A 12 Column grid layout is used for screen sizes from 1280px screen widths and larger on desktop screens. A 64px margin is used on the left and right of the grid that scales as the screen size increases. A 16px column gutter is used between each column grid.

</aside>

<aside>

8 Column Scalable Grid – (1279px Down to 769px)

This 8 Column grid layout is used for screen sizes from 1279px down to 769px. At 1280px, the column grid should change to a 12 column layout. A 48px margin is used on the left and right of the grid that scales as the screen size increases. A 16px column gutter is used between each column grid. This grid is most commonly used for small desktop and tablet screens.

</aside>

<aside>

8 Column Scalable Grid – (768px Down to 600px)

This 8 Column grid layout is used for screen sizes from 768px down to 600px. A 32px margin is used on the left and right of the grid that scales as the screen size increases. A 16px column gutter is used between each column grid. This grid is most commonly used for mobile landscape screens.

</aside>

<aside>

4 Column Scalable Grid – (599px Down to Smallest Size)

This 4 Column grid layout is used for screen sizes from 1280px screen widths and larger. A 64px margin is used on the left and right of the grid that scales as the screen size increases. A 16px column gutter is used between each column grid. This grid is most commonly used for mobile portrait screens.

</aside>

</aside>