Press Play

A Retro Gaming UI Kit

Press Play is a UI kit designed to evoke nostalgia for all those days (and late nights) spent gaming as a child. Its monochromatic color scheme and pixelated style are sure to delight fans of retro games.

Using This Documentation

Each main category of this UI kit has been given its own section of information. These sections include some information about using the component, a visual representation of the component, and the HTML/CSS code for each component. You are welcome to use this code however you wish, though attribution would be appreciated.

Colors

This color scheme can be used for any projects related to nostalgia and early game systems. The green monochromatic color scheme is meant to evoke old monitors/screens, while the blue-tinged neutrals are reminiscent of some old game systems' casings. Together, they remind the viewer of old video games.

The code below includes the variables within the :root CSS selector for use throughout the CSS file.

Please note: The "text" color meets WCAG AA standards on "primary", "tertiary", "light neutral", and "background". "Background" meets AA standards on "secondary", "dark neutral", and "text". All other combinations should be tested before deployment.

Primary

Secondary

Tertiary

Hover

Text

Dark Neutral

Light Neutral

Background

Error

Warning

Success

Info

CSS

:root {
    --primary: #A8B880;
    --secondary: #D7DBB6;
    --tertiary: #555D40;
    --hover: #636D4C;
    --text: #1C1D20;
    --dark-neutral: #646768;
    --light-neutral: #BBBDC2;
    --background: #EBEFF3;
}
Back to Top

Typography

The Press Play UI kit features three different free Google Fonts typefaces: Silkscreen for large headings, Jersey 20 for subheadings, and Rubik for body copy. Silkscreen's pixelated qualities contribute to the nostalgic feel of the kit, while Rubik is a legible, but geometric, typeface. Jersey 20 is also pixelated, but is a good balance between the abstract shapes of Silkscreen and the simple lines of Rubik.

Silkscreen should only be used for the largest headings, as it becomes unreadable at smaller sizes. Jersey 20 works well for smaller headings, but Rubik should be the go-to for any lengthier blocks of text. The below CSS code includes rules for H1 to H3 as well as paragraphs. Generally, the rules for paragraphs should be placed within the body selector so it is the default for other text-based items.

Silkscreen - Headings

Jersey 20 - Subheadings

Rubik - Body Copy

CSS

:root {
    --header-font: "Silkscreen", sans-serif;
    --subheader-font: "Jersey 20", sans-serif;
    --body-font: "Rubik", sans-serif;
}

h1 {
    font-family: var(--header-font);
    font-size: 2rem;
}

h2 {
    font-family: var(--subheader-font);
    font-size: 1.8rem;
}

h3 {
    font-family: var(--subheader-font);
    font-size: 1.5rem;
}

p {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5em;
}
Back to Top

Buttons

Buttons can take on a variety of contents, whether text alone, text with an icon, or an icon only. The below examples use the HTML <button> element, but regular links can also be styled as buttons by adding a CSS class. Due to potential color contrast issues, the buttons have been styled with a border.

(Note: Press Play icons are a custom-made pixel icon set, saved as SVGs. They may be made available upon request.)

HTML

<button class="btn-primary">Primary Button</button>
<button class="btn-primary">Secondary Button</button>
<button class="btn-primary">[svg here] Button With Icon</button>
<button class="btn-primary">[svg here]</button>

CSS

button {
    padding: 0.5rem 0.6rem;
    font-family: var(--subheader-font);
    font-size: 1.2rem;
    border-radius: 0;
    border: none;

    &.btn-primary {
        background-color: var(--light-primary);
        border: 0.15rem solid var(--light-text);

        svg {
            height: 1.2rem;
            width: 1.2rem;
            margin-right: 0.15rem;
            margin-bottom: -0.15rem;
            fill: var(--light-text);
        }
    }

    &.btn-primary:hover {
        background-color: var(--light-secondary);
    }

    &.btn-secondary {
        background-color: transparent;
        color: var(--light-tertiary);
        border: 0.15rem solid var(--light-tertiary);
    }

    &.btn-secondary:hover {
        background-color: var(--light-secondary);
    }

    &.btn-icon {
        padding: 0;
        background-color: transparent;

        svg {
            height: 2rem;
            width: 2rem;
            fill: var(--light-tertiary);
        }
    }

    &.btn-icon:hover {
        svg {
            fill: var(--light-primary);
        }
    }
}
Back to Top

Tags

Press Play's tags are fairly similar to the buttons. The tag itself will require some JavaScript work to make it functional; however, only the visual styling has been included here.

HTML

<button class="tag-primary">Primary Tag [svg here] </button>

CSS

button {
    padding: 0.5rem 0.6rem;
    font-family: var(--subheader-font);
    font-size: 1.2rem;
    border-radius: 0;
    border: none;

    svg {
        height: 1.2rem;
        width: 1.2rem;
        margin-bottom: -0.15rem;
        fill: var(--light-text);
    }

    &.tag-primary {
        background-color: var(--light-primary);
        border: 0.15rem solid var(--light-text);
    }
}
Back to Top

Form Items

Form items can be difficult to style, and the code can get complex. The below three examples include little CSS. These can be used for any sort of contact form, login area, or survey.

Labeled Text Inputs

HTML

<label for="text">Text Input</label>
<input type="text" id="text" name="text">

Checkboxes

HTML

<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label>

Radio Buttons

HTML

<input type="radio" id="radio" name="radio">
<label for="radio">Radio</label>
Back to Top