Miiverse Design Guide

Welcome to the Miiverse Design Guide! This guide teaches you how to make 3DS-era, Miiverse-like applications in any UI library.

Backgrounds

There are two ways to make your background Miiverse-like. You can either use this image repeating at a small scale or simply set the background to #eeeeee.

Text

Use a text colour of #606060, and the font nintendo_NTLGDB_001 (ttf or woff).

Buttons

You can use a button coloured #5ac800 with a border radius as high as it will go. With a font size of 12, having the button 24px tall looks good. The border width should be 0px and the font colour should be #f4f4f4.

Some example CSS to achieve this is:

button {
    font-family: nintendo_NTLGDB_001;
    background-color: #5ac800;
    color: #f4f4f4;
    border-radius: 12px;
    height: 24px;
    border: none;
}

which produces:

<iframe src="/button-example.html"></iframe>

Alternate White Button

This button may end up being the most common style of button in your app. This button has the background colour #ffffff and text colour #323232 with a drop shadow straight downwards.

Some example CSS to achieve this is:

button {
    font-family: 'nintendo_NTLGDB_001';
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    text-align: left;
    color: #323232;
            }

which produces:

<iframe src="/button2-example.html"></iframe>
This design can be implemented into many sizes, types and contents of element, from buttons to scrollable textboxes! Like this:

button {
    font-family: 'nintendo_NTLGDB_001';
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: scroll;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    text-align: left;
    color: #323232;
    max-width: 192px;
    max-height: 192px;
}

<iframe src="/button2-example2.html"></iframe>

Remember to set overflow: scroll; and a max-width and max-height.

Images

You can put images into boxes with captions. You can do it in CSS like this:

            img {
                font-family: 'nintendo_NTLGDB_001';
                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.1);
                overflow: scroll;
                box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
                border-radius: 5px;
                text-align: left;
                color: #323232;
                max-width: 192px;
                max-height: 192px;
            }

            p {
                font-family: 'nintendo_NTLGDB_001';
                color: #969696;
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;
                margin: 4px;
            }

            div {
                background: #f9f9f9;
                border: 1px solid rgba(0, 0, 0, 0.1);
                overflow: hidden;
                box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
                border-radius: 5px;
                width: fit-content;
            }

with the accompanying HTML:

<div>
    <img src="test.png"></img>
    <p>Text</p>
</div>

which results in:

<iframe src="/image-example.html"></iframe>

Text Input

Making a text input is simple. It's a white box with a 3px #e0e0e0 border. Simple. CSS:

input {
    font-family: 'nintendo_NTLGDB_001';
    margin: 0 0 15px;
    text-align: left;
    background: #fff;
    border: 3px solid #e0e0e0;
    width: 100%;
    border-radius: 5px;
    box-sizing: border-box;
    color: #323232;
}

<iframe src="/textbox-example.html"></iframe>

Credits

• Nintendo (for Miiverse and the 3DS system font)
• Project Rosé (for inspiration on implementation)
• Mojang (for image of Minecraft)