Sligh Games Brand Assets

Official logo assets and color palette for Sligh Games

Usage Guidelines

Logo Usage

  • Use the SVG files for print and high-quality digital materials
  • Use the PNG files for web and digital applications
  • Use the PDF files for professional printing and publications
  • Always maintain the proportions of the logos when resizing
  • Ensure adequate spacing around the logo (at least the height of the "S" in the logo)
  • Do not alter the colors or modify the logo design

Color Usage

  • Use the exact color codes provided in the color palette for all official materials
  • For print materials, use the CMYK equivalents of these colors
  • For web and digital applications, use the RGB/HEX values
  • The primary brand color is Green (#436e4f)
  • The secondary brand color is Light Green (#689f7c)
  • The accent color is Yellow (#ffe66d)

CSS Implementation

  • Use the provided CSS variables for consistent branding across web projects
  • Include the Sligh Games stylesheet in your project: <link rel="stylesheet" href="https://brand.sligh.games/styles/CSS/sligh-games.css">
  • For color application, use the semantic variables (e.g., var(--sligh-primary)) rather than direct color variables when possible
  • Use the utility classes for quick styling:
    • Background colors: .sligh-bg-water, .sligh-bg-leaves, etc.
    • Text colors: .sligh-text-water, .sligh-text-leaves, etc.
  • For buttons, use the .sligh-button class and its variants
  • For SCSS projects, import the SCSS file and leverage the variables and mixins

Accessibility

  • Ensure sufficient color contrast when using brand colors for text and backgrounds
  • The primary green works well with white text (passes WCAG AA standards)
  • The yellow accent should not be used for text on white backgrounds due to poor contrast
  • Always include proper alt text when using logo images

Logo Variants

Sligh Games Logo Only Color

Logo Only

Just the logo mark without text. Use this for icons, avatars, or when the brand is already well recognized.

Available in: Color, Black, White (on dark background)

SVG: Color Black White
PDF: Color Black White
PNG:
Color
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
JPG:
Color
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Sligh Games Full Logo with Name Color

Full Logo with Name

Standard arrangement of the logo mark and name. Use this for general applications.

Available in: Color, Black, White (on dark background)

SVG: Color Black White
PDF: Color Black White
PNG:
Color
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
JPG:
Color
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Sligh Games Full Logo with Name (Vertical) Black

Full Logo with Name (Vertical)

Vertical stacked arrangement with the logo mark above the name. Ideal for square or vertical spaces.

Available in: Black, White (on dark background)

SVG: Black White
PDF: Black White
PNG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
JPG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Sligh Games Full Logo with Name (Horizontal) Black

Full Logo with Name (Horizontal)

The primary logo variant with the logo mark and name side by side. Use this for most applications where horizontal space is available.

Available in: Black, White (on dark background)

SVG: Black White
PDF: Black White
PNG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
JPG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
Sligh Games Name Only Black

Name Only

Just the text without the logo mark. Use this when the logo mark is not appropriate or when space is limited.

Available in: Black, White (on dark background)

SVG: Black White
PDF: Black White
PNG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
JPG:
Black
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI
White
300 DPI 150 DPI 100 DPI 75 DPI 50 DPI 25 DPI

Color Palette

The official Sligh Games color palette consists of natural tones representing water, sun, leaves, trunk, and roots elements.

Water

Deep Blue

HEX: #2f5c7e

RGB: 47, 92, 126

CSS: var(--sligh-water)

Sun

Yellow

HEX: #ffe66d

RGB: 255, 230, 109

CSS: var(--sligh-sun)

Leaves (Normal)

Green

HEX: #436e4f

RGB: 67, 110, 79

CSS: var(--sligh-leaves-normal)

Leaves (Light)

Light Green

HEX: #689f7c

RGB: 104, 159, 124

CSS: var(--sligh-leaves-light)

Leaves (Dark)

Dark Green

HEX: #2a443a

RGB: 42, 68, 58

CSS: var(--sligh-leaves-dark)

Trunk

Brown

HEX: #8b6f5a

RGB: 139, 111, 90

CSS: var(--sligh-trunk)

Roots (Normal)

Light Brown

HEX: #a39b94

RGB: 163, 155, 148

CSS: var(--sligh-roots-normal)

Roots (Light)

Very Light Brown

HEX: #d5cec8

RGB: 213, 206, 200

CSS: var(--sligh-roots-light)

Roots (Dark)

Dark Brown

HEX: #7d756f

RGB: 125, 117, 111

CSS: var(--sligh-roots-dark)

Brand Stylesheets

Use these stylesheets to maintain consistent branding across your projects. The stylesheets provide CSS variables, utility classes, and component styles.

CSS Stylesheet

Ready-to-use CSS with variables and utility classes for implementing the Sligh Games brand.

/**
 * Sligh Games - Brand Color Stylesheet
 * Copyright © 2025 Sligh Games. All Rights Reserved.
 */

:root {
  /* Logo Colors */
  --sligh-water: #2f5c7e;
  --sligh-sun: #ffe66d;
  --sligh-leaves-normal: #436e4f;
  --sligh-leaves-light: #689f7c;
  --sligh-leaves-dark: #2a443a;
  /* ... more variables ... */
}
Download CSS Download Minified CSS

SCSS Stylesheet

SCSS source files for developers who prefer to work with Sass in their projects.

/**
 * Sligh Games - Brand Color Stylesheet (SCSS)
 * Copyright © 2025 Sligh Games. All Rights Reserved.
 */

// Brand Colors
$sligh-water: #2f5c7e;
$sligh-sun: #ffe66d;
$sligh-leaves-normal: #436e4f;
$sligh-leaves-light: #689f7c;
$sligh-leaves-dark: #2a443a;
/* ... more variables ... */
Download SCSS

Using the Stylesheets

CSS Variables

The stylesheet provides CSS variables that can be used to maintain consistent branding:

/* Colors */
var(--sligh-water)         /* Deep Blue: #2f5c7e */
var(--sligh-sun)           /* Yellow: #ffe66d */
var(--sligh-leaves-normal) /* Green: #436e4f */
var(--sligh-leaves-light)  /* Light Green: #689f7c */
var(--sligh-leaves-dark)   /* Dark Green: #2a443a */

Utility Classes

The stylesheet provides utility classes for common styling needs:

<!-- Background Colors -->
<div class="sligh-bg-water">Deep Blue Background</div>
<div class="sligh-bg-sun">Yellow Background</div>

<!-- Text Colors -->
<p class="sligh-text-water">Deep Blue Text</p>
<p class="sligh-text-sun">Yellow Text</p>

<!-- Components -->
<button class="sligh-button">Primary Button</button>
<button class="sligh-button sligh-button-secondary">Secondary Button</button>

Compiling SCSS

To compile the SCSS file to CSS, you can use a SASS compiler:

# Using npm
npm install -g sass
sass public/styles/scss/sligh-games.scss public/styles/css/sligh-games.css

# Using Dart Sass
sass public/styles/scss/sligh-games.scss public/styles/css/sligh-games.css