Skip to content

Branding

KiwifruitDev edited this page Jul 24, 2023 · 6 revisions

The following assets and branding guidelines are provided for Nonsensical Video Generator.

Scaling

Units (U) are in pixels and are scaled to the current resolution of the software.

Usually this is a power of 2, but the software also permits using 3 as a scale factor.

For example, a 1U element at 1x scale is 1 pixel.

A 1U element at 2x scale is 2 pixels.

And a 1U element at 4x scale is 4 pixels.

It is recommended (but not required) to constrain elements to a 1U grid and an integer scale factor.

This will ensure that the branding elements are crisp and clear, especially when using Nearest Neighbor scaling.

Logo

The logo is only available in PNG format.

Using a shadow is recommended.

The no shadow variant should only be used if necessary.

1x Scale

  • 72x22
  • 71x21 (No Shadow)

Nonsensical Video Generator Logo Nonsensical Video Generator Logo (No Shadow)

2x Scale

  • 144x44
  • 142x42 (No Shadow)

Nonsensical Video Generator Logo Nonsensical Video Generator Logo (No Shadow)

4x Scale

  • 288x88
  • 284x84 (No Shadow)

Nonsensical Video Generator Logo Nonsensical Video Generator Logo (No Shadow)

8x Scale

  • 576x176
  • 568x168 (No Shadow)

Nonsensical Video Generator Logo Nonsensical Video Generator Logo (No Shadow)

Icon

The icon is only available in PNG format.

Using a shadow is recommended.

The no shadow variant should only be used if necessary.

1x Scale

  • 20x20
  • 19x19 (No Shadow)

Nonsensical Video Generator Icon Nonsensical Video Generator Icon (No Shadow)

2x Scale

  • 40x40
  • 38x38 (No Shadow)

Nonsensical Video Generator Icon Nonsensical Video Generator Icon (No Shadow)

4x Scale

  • 80x80
  • 76x76 (No Shadow)

Nonsensical Video Generator Icon Nonsensical Video Generator Icon (No Shadow)

8x Scale

  • 160x160
  • 152x152 (No Shadow)

Nonsensical Video Generator Icon Nonsensical Video Generator Icon (No Shadow)

Background

The tiled background is only available in PNG format.

1x Scale

  • 28x28

Nonsensical Video Generator Background

2x Scale

  • 56x56

Nonsensical Video Generator Background

4x Scale

  • 112x112

Nonsensical Video Generator Background

8x Scale

  • 224x224

Nonsensical Video Generator Background

Margins

The logotype is placed within a 2U right gap from the edge of the logo text.

From the top and bottom, a 1U gap is used.

No 1U gap is necessary for the left side of the logo, but it's recommended.

Margin Guidelines

Steam Library

Steam library assets may be found on SteamDB for now.

Font

The font used for the logo is Munro Small by Ten by Twenty.

Other UI elements use Munro by Ten by Twenty.

This font is licensed under the SIL Open Font License.

Sizes are in pixels.

1x Scale

  • 8pt

2x Scale

  • 16pt

4x Scale

  • 32pt

8x Scale

  • 64pt

Shadow

Shadows are used on UI and other branding elements.

The shadow is at a 1U offset from the element and is sized at 1U.

It is a solid black color.

When centering branding assets, please ensure that the shadow is not included in the centering.

Otherwise, the element may appear off-center.

Border

The window border is a 4U light grey inner border that is inset from the edge.

Resolution

The software is designed to look its best at 2x scale.

This is where the UI elements are designed for the most visual clarity.

All UI elements are created at 1x scale and then scaled up to the current resolution.

1x Scale

(Not possible to set in the software)

  • 320x240

2x Scale

  • 640x480

4x Scale

  • 1280x960

8x Scale

(Not possible to set in the software)

  • 2560x1920

Gradient

The logo uses a spiral gradient.

See the colors below for the gradient.

Re-creating this gradient may not produce accurate results.

Therefore, it is recommended to attemU to replicate the gradient using the logo as a reference.

Colors

The following colors are used within the software alongside the logo.

Primary

Used for text and other foreground elements.

White

  • #FFFFFF
  • rgb(255, 255, 255)

Secondary

Used for shadows and other background elements.

Black

  • #000000
  • rgb(0, 0, 0)

Tertiary

Used as an accent color alongside the background.

Dark Grey

  • #404040
  • rgb(64, 64, 64)

Quaternary

Used to indicate interactable elements alongside the window border.

Light Grey

  • #808080
  • rgb(128, 128, 128)

Background Tile

Exclusively used for the background tile graphic.

Granite Grey

  • #666666
  • rgb(102, 102, 102)

Gradient

Ordered in a clockwise fashion starting from the top left corner.

The middle of the gradient is white as seen above.

  • Tea Green
    • #C5FFBA
    • rgb(197, 255, 186)
  • Pale Goldenrod
    • #DFFFAC
    • rgb(223, 255, 172)
  • Pastel Yellow
    • #F9F39D
    • rgb(249, 243, 157)
  • Baby Pink
    • #E9C1BD
    • rgb(233, 193, 189)
  • Rich Brilliant Lavender
    • #E99AF2
    • rgb(233, 154, 242)
  • Pale Violet
    • #CFA7FF
    • rgb(207, 167, 255)
  • Vodka
    • #B4B2FF
    • rgb(180, 178, 255)
  • Columbia Blue
    • #C6E9E7
    • rgb(198, 233, 231)