Site Tutorial

The complete walkthrough of Spades, down to the smallest detail: accounts, your character library, the editor, profile design, links, worlds, community features, dress-up games, the Spectra color studio, and the admin tools. Every framed image is a live view of the real page - character pages throughout belong to GAMBLE, whose profile shows the customization tools in action. Use the Open this page link under any image to jump straight there.

Getting started

Spades is a character hub. You build a profile page for every character you own, decorate it exactly the way you want, connect your characters to each other, and share the results with the community. Almost everything can be browsed without an account, so feel free to click around Explore and read a few profiles before committing to anything. Creating characters of your own, saving palettes, and starring characters all require an account.

Creating an account

Press the Log in button in the top bar, then switch to Register and sign up with an email address and a password. A one-time verification code is emailed to you right away; type it into the prompt and your account is live. If you ever lose your password, the Forgot password link on the login page starts a reset flow that emails you a recovery link. Your username is chosen later, in your profile settings, and it has to be unique with no spaces in it.

If you used to sign in with Google

Google login has been retired. If your account was created through Google, your first visit after the switch takes you to a one-time setup page where you choose a proper password. Nothing else changes: your characters, galleries, folders, stars, and messages all stay exactly where they were, and once the new password is saved you will not see that page again.

Finding your way around

The top bar carries the site logo on the left (click it to return to your home grid), the main navigation links in the middle - Characters, Worlds, Links, Starred, Explore, Users, Forum, and Templates & Tools - and your account controls on the right: the accent color picker, your avatar (click it to open your profile settings), and the New Character button. Admins also see an Admin link that stays hidden for everyone else.

The accent color picker

The round button in the top bar opens the accent color picker. Pick a preset or dial in any hue and the whole site tints itself around it: buttons, links, active tabs, and highlights all follow your choice. A second color can be set as the gradient end, so primary surfaces fade from one hue into the other, and the theme toggle switches between dark mode and a light mode washed with your accent. A font picker changes the site's typeface, and the reset control puts everything back the way it was. The color is remembered by your browser, so it greets you again on your next visit, and it is purely personal. Other visitors never see your accent; they see their own.

Phones, tablets, and offline browsing

On small screens the top navigation folds into a bar fixed to the bottom of the screen, with icons and labels for the main pages, so everything stays reachable with a thumb. Grids collapse to fewer columns, sidebars turn into slide-out panels, and the dress-up player rearranges its controls for touch. A small indicator appears whenever your connection drops. Pages you have already visited are cached by the site, so you can keep reading profiles while offline; saving changes and loading pages you have never opened wait until you are back online.

The home page: your character grid with folders in the sidebarOpen this page

Your character library

The home page is your library. Every character you own appears as a card in a grid, and the sidebar on the left holds your folders. There is no limit on how many characters or folders you can have.

Folders

Folders are your organization tool. Create as many as you want, nest them inside each other to build a tree, and give each one a symbol and a color so the sidebar reads at a glance. Clicking a folder filters the grid down to just its members, and the sidebar always shows the count inside each folder. Drag characters in and out of folders from the grid, or move them in bulk with the bulk action bar described below. Sub profiles can be filed into folders too, and they appear alongside the characters whenever that folder is open, labeled with their parent character's name. Folders are private to your library until you choose to publish some of them on your public profile. The sidebar also carries a View profile link to your own public page and a shortcut to the Help Center, and on small screens the whole sidebar slides out from a Folders button above the grid.

The grid toolbar

Above the grid sit the display controls. The columns picker sets how wide the grid is, from a few large cards to many small ones, and the toggle beside the search box switches between the grid view and a list view with wider cards. The sort menu offers manual order (where you drag cards into your own arrangement), name A to Z, date created newest or oldest, recently updated, no image first, most images first, and by folder order, which follows the sequence of your folders in the sidebar. The page size control sets how many characters load before the grid paginates. All of these preferences are saved to your profile and restored every time you come back.

Searching and filtering

The search box matches a character's name, nickname, or tags as you type. A species dropdown filters the grid to one species, and a row of tag pills narrows it to a single tag, with an All pill to clear the choice. In manual order, hovering a card shows a small number box alongside its drag handle - type a position and the card jumps straight there, no dragging required.

Bulk actions

Press Select in the toolbar to enter selection mode. Check off characters one by one or hit All to grab the whole page, and a bulk action bar appears at the bottom of the screen. From it you can move every selected character to a folder, change their public or private visibility, apply a card layout to the whole set at once, or delete them. Press Cancel to leave selection mode.

Card layouts and styling

Every card can look different. The layout options are classic (label under the avatar), label-below (a taller label area), separated (the label sits in its own box below the card), separated-below (a wider separated label), and minimal (just the avatar with the name overlaid). On top of the layout, each card can carry its own background color, text color, font, and border width, so a character can match their own theme even inside your grid. You can also upload a transparent PNG that sits over the avatar as a decorative border frame - a lace border, a card frame, anything you like.

Status tags show up as colored badges on cards, so anyone browsing your grid can see which characters are open for roleplay, open for trades, open for offers, or closed. NSFW characters display a badge too, and their full profiles stay gated behind the viewer's age confirmation.

Comparing characters

The Compare page, reachable from the Links item in the main navigation, puts two characters side by side with their fields aligned, which is handy for checking consistency between related designs or picking between two versions of a concept.

Creating and editing characters

Press New Character in the top bar to open the editor. The only field you must fill in is the name - everything else is optional, so you can save a bare sketch of a character now and flesh it out over the following weeks. The editor saves to the server with the Save button, and the character appears in your grid immediately.

The basics

Start with the name, then add a nickname, pronouns, and an avatar image. The avatar is what shows on the card in your grid and in the header of the profile page, so a clean square image works best.

Optional fields

Below the basics sits a long catalog of optional fields: age, species (which accepts several tags, since a character can be more than one thing), gender, race, ethnicity, zodiac, occupation, orientation, relationship status, birthday, birthplace, height, weight, blood type, eye color, hair color, hair style, skin tone, body type, voice, accent, languages, nationality, religion, alignment, element, MBTI, enneagram, temperament, handedness, Chinese zodiac, birth stone, birth flower, hometown, current residence, education, school, skills, talents, hobbies, interests, likes, dislikes, fears, phobias, allergies, diet, smoking, pets, vehicle, weapon, fighting style, magic type, powers, weaknesses, strengths, goals, dreams, motto, and favorites covering color, food, drink, and season.

You decide which of those appear on the character. Fields you do not add stay hidden, which keeps the editor and the profile compact. Any built-in label can also be renamed - if "Occupation" should read "Day job" on this one character, it can. And when the catalog does not cover something you need, the custom fields section lets you invent your own label-and-value pairs with no limit.

Writing the bio

The bio tab gives you two editors in one. The rich text view works like a normal document editor with bold, italics, headings, lists, and images. The HTML view accepts raw markup for people who want fully custom layouts. Very large bios can skip the box entirely and be uploaded as an HTML file, which keeps the character record light while still rendering in full on the profile.

Card appearance

The Card Appearance section styles the character's card - the one shown in your grid, in Explore, and anywhere else it appears. The layout picker sets the card's shape: Classic puts the image on top with the info attached below, Label Above flips the info box above the image, Separated rounds the image and the info into pieces with a gap between them, Separated + Above does the same with the info on top, and Minimal shows the image only, with no info card at all. Below the layout, a card background color and text color re-theme the card, a font choice switches its typeface, and the border width runs from none up to four pixels.

The card icon border is the finishing touch: a transparent PNG uploaded here overlays the avatar on the cards - a frame of lace, a ticket stub, anything drawn around a square. Build the overlay with transparent pixels where the avatar should show through and pure black pixels for the border art itself, and keep it safe for work since it appears publicly. Presets are provided to start from, and the same styling can be applied to many characters at once with the bulk action bar on the home page.

Status, tags, and safety

Further down you can set a status tag (open for roleplay, open for trades, open for offers, or closed), tag the character with search keywords, mark the character as NSFW, and attach content warning tags such as gore or bright colors. There is a field for design credits when the character was adopted, commissioned, or bought, and a watermark toggle that stamps your gallery images to discourage reposting.

Codes, visibility, and editing later

Every character receives a short share code that lives in its URL, so links keep working no matter how often you rename the character. The public or private toggle decides whether the profile shows up in Explore and the user directory, and a separate show-in-all-characters toggle decides whether the card appears in your own home grid when no folder is selected - handy for tucking works in progress out of sight. To make changes later, open the profile and press Edit, or hit the pencil icon directly on the card in your grid. Deleting a character removes everything attached to it, with a confirmation prompt first.

A finished profile: the character GAMBLE, whose page appears throughout this tutorialOpen this page

Designing a profile page

The profile page is where characters come to life, and nearly everything about it is adjustable. The example used throughout this section is GAMBLE, a heavily customized profile with a background image, a custom color scheme, custom CSS, a moodboard, stickers, and a playlist - open the preview below and follow along.

The ten layouts

The layout picker reshapes the whole page. Classic gives you an info sidebar on the left with tabs on the right. Centered stacks everything in one column down the middle. Wide Sidebar is Classic with a roomier info panel. Minimal strips the header down to a slim bar. Right Sidebar mirrors Classic. Spotlight puts a large circular avatar front and center. Compact tightens everything into a narrow sidebar with smaller spacing. Immersive opens the page with a big hero image. Full-Width stretches the content edge to edge. Pullout Sidebar hides the info panel behind a slide-out drawer for a clean canvas. Switch layouts freely; nothing is lost when you do.

The appearance panel

The palette icon in the profile toolbar opens appearance editing. You can set an accent color, a background that is either a solid color, a full CSS gradient, or an image with an optional overlay tint on top, a body color for the content cards, main and muted text colors, a font, and a corner rounding value that softens or squares every panel at once. Outlines can be switched off entirely, recolored, or given a custom width. The background box behind the content can be shown or hidden, the header with the avatar and info can be hidden, and tabs can sit horizontally along the top or vertically down the side. Every change renders live as you make it.

Tabs

The profile is organized into tabs, and each one counts what it holds with a small badge. Bio holds the main description. Refs holds reference sheets and design images. Additional Information holds custom sections you write yourself, each with a title and its own HTML body, reorderable and individually hidden or shown. Belongings tracks items the character carries, split into outfits, possessions, and discoveries, each with a name, description, and optional image. Links holds relationships (covered in its own section below). Graph draws those relationships as a network. Timeline builds a dated history with colored event types: milestone, birth, death, achievement, trauma, and discovery. Development poses the site's character-building prompts for this character - questions written by the staff, each with room for a written answer, and the questions you have answered display on the profile. Galleries hold art collections. Sub Profiles hold alternate forms. Playlist holds music. Dress-Up holds games. Comments let visitors leave public notes. Any tab you do not use can be hidden from the page entirely - GAMBLE, for instance, hides belongings, links, graph, and timeline to keep the page focused.

Stickers

The stickers tool places images anywhere on the Bio tab. Upload your own art or pull from a gallery item, then drag stickers around, grab the corner to resize, use the top handle to rotate, and flip them horizontally or vertically. Stickers stack in layers you can bring forward or send backward, and each one can carry hover text that pops up in a little thought-bubble tooltip. GAMBLE's page uses several - hover one to see its tooltip.

The moodboard

The moodboard is a grid of images you arrange yourself, shown in the Additional Information tab. Choose the number of columns and rows, the gap between cells, whether images cover or contain their square, and the corner rounding. Each cell can be rotated in quarter turns, recolored with a tint blend or a flat overlay, and tuned with brightness, saturation, and hue controls - GAMBLE's board tints every cell toward the page's dark red so the grid feels like one image. Stickers layer over the board too, and the finished board exports as an image you can post anywhere.

Galleries, playlists, and sub profiles

A character can hold several galleries - official art, fan art, sketches, whatever grouping suits you. Inside each, upload images or videos, tag them with categories like Fullbody, Halfbody, Headshot, Chibi, or your own freeform tags, and attach a credit link to the artist. Clicking a gallery opens it full-page with a larger viewer. The playlist embeds Spotify tracks, albums, or playlists right on the page, each with its own label - GAMBLE carries a chase theme and a main theme. Sub Profiles are alternate versions of the character, like a battle form or a human AU, each with its own avatar, bio, custom fields, galleries, and a full appearance and CSS setup of its own.

Custom CSS

For full control, a CSS editor injects styles into the character's page. Small stylesheets go straight into the box; large ones can be uploaded as a file instead. The CSS applies only to that one character's page, so you can go wild without affecting anything else. GAMBLE's page, for example, uses custom CSS to recolor the site header to match its dark red theme and restyle the scrollbars.

Metadata, sharing, and ownership

The metadata panel overrides the preview card that appears when the page is shared on Discord, Twitter, or anywhere else: a custom title, description, and image, plus the Open Graph type and the Twitter card style, a canonical URL for search engines, and an indexing toggle that can ask search engines to leave the page out of results. The Share button copies a direct link to the profile. The ownership tab hands the character to another user when it is sold or gifted, and the page keeps a log of every transfer.

GAMBLE's profile: custom colors, CSS, stickers, moodboard, and playlist all visibleOpen this page

Worlds

Worlds hold the settings your characters live in. Create one from the Worlds page with a name, a description that accepts full HTML, a cover image, tags, an accent color, and a custom background for the world's detail page. Once a world exists, associate characters with it and start building the setting out.

Sections, species, cultures, and locations

World sections are titled blocks of HTML for your lore, history, geography, or magic systems - collapsible and reorderable, the same idea as the character's Additional Information tab. Species entries get their own profile with a description, image, key traits, and default traits that auto-apply to characters of that species, plus their own color customization, and you can attach characters to each one. Cultures carry an image, custom fields for things like language, government, and traditions, and their own long-form sections. Locations describe cities, landmarks, or dungeons, and can be tied to markers on your maps so visitors can click a spot on the map and jump to the location's details.

Events and the world timeline

World events build a chronological history of the setting itself - wars, foundings, disasters - separate from any single character's timeline, and sorted in order.

The map editor

The map editor is a full mapping tool, not a static image. Upload your map art as the background, then build on it in layers you can toggle visible, fade with opacity, or lock against accidental edits. On top of the layers:

Markers are pins you place anywhere. Each can use the default pin or a custom icon or uploaded image, carry a size and color, and link to a character, location, or event in the world so clicking it navigates there. Regions are translucent polygons for marking areas, with their own color and opacity. Paths are lines connecting points in solid, dashed, or dotted styles with a chosen width. Text labels float wherever you put them, with size, color, bolding, and rotation. A square or hex grid overlay with adjustable size and color helps with scale, and fog of war darkens the map until you reveal it circle by circle - perfect for exploring a map alongside a story.

Collaborators and members

Invite people by username as collaborators, who can edit the world - its sections, species, maps, and everything else - but not delete it, or as members, who can view the world and submit their own characters to it. This makes shared worldbuilding projects and roleplay groups straightforward to run.

The Worlds pageOpen this page

Starred characters

See a character you love? Press the star on their profile, or on their card in a grid, and they land on your Starred page. You can star other people's characters, not just your own - a small way to show appreciation for someone's work.

Star folders

The Starred page works like your home library: organize favorites into folders with their own names and colors - an Inspiration folder, a Watchlist, anything that suits you. Every starred card has a small +folder button that files it on the spot, the folder chips on the card can be removed again with a click, and the star icon on the card unstars the character without opening their profile. Folders can be created, recolored, and reordered right on the page, so the list of characters you love never becomes one big unsorted pile.

Explore and users

Explore

The Explore page browses every public character on the site. The search box matches names, nicknames, tags, and species, and each card shows its owner's avatar and username, the character's species and tags, and a star button so you can save a find on the spot. Sort by recently updated, newest, most stars, or most images, and page through the results. It is the discovery surface for the whole community - making your own characters public puts them here. NSFW characters stay hidden unless you have confirmed you are 18 or older in your profile settings.

The user directory and public profiles

The Users page lists everyone with a presence on the site. Click any name to visit their public profile at /user/:username, which shows their avatar, banner, pronouns, bio, and a grid of their public characters. Nobody needs an account to view one.

Your own public profile is fully customizable from your profile settings: the username itself, the avatar and banner, pronouns, a bio in plain text or full HTML (with file upload for long ones), an accent color, a text color, a font, a layout preset - centered, left, right, or full-width variants - and your own custom CSS. You choose which of your folders appear publicly and how the visitor grid is sorted, and your saved grid preferences load for you on every visit.

Your account settings

The Profile page is your account control panel. It carries the username (shown to everyone, unique, no spaces), the avatar and banner, pronouns, a plain-text bio, and a full HTML bio plus a custom CSS box for your public page. The directory card style section styles the card you get on the Users page - its background color, text color, and font, each with a live preview so you can see the card take shape. The age verification setting decides whether NSFW profiles open for you, and your email and role display read-only near the bottom.

Below all that sits the danger zone: log out, delete every character you own, delete every link you created, or wipe the whole account - characters, links, notes, folders, and the account itself. Each action asks for confirmation before it runs, because none of it comes back.

Comments

Comments live on character profiles - public, sorted newest first, and deletable by the commenter, the character's owner, or an admin if something needs to come down.

The user directoryOpen this page

Forum

The forum is where site-wide discussion happens. Threads are started by the site staff, and anyone with an account can read along and reply to any discussion that interests them. New threads appear in the list as the staff creates them, with replies keeping each conversation going. The forum link only appears in the navigation for admins, though everyone can read and join in once they know a thread's way there.

Templates and Tools

The Templates and Tools page gathers the creative utilities in one spot, each living under its own tab.

Profile templates

Profile templates are complete looks - a layout, colors, a background, and CSS together - that you can preview before committing and apply to any character in a couple of clicks. Each one shows its tags, its popularity, and a live preview, and applying it instantly restyles the character's page. Templates are managed by the site staff so the collection stays curated.

CSS snippets

Snippets are smaller pieces of styling that do one specific thing, like restyling a scrollbar or adding a hover effect. Preview what each does, and applying one appends its CSS to your character's custom stylesheet. The use count on each card shows how many people have applied it, and snippets can be removed again from the character's CSS editor.

Notes

The notes tool is your personal corkboard of sticky notes. Each note can have its own color, text color, font, background image, gradient, and overlay, and you can link a note to a character, world, species, or location so it stays in context. Linked notes surface on the pages they belong to, which makes them handy for reminders about a specific backstory or a plan for a world.

The to-do list

The to-do list tracks your tasks, and each entry can link to characters and notes for context - "finish the reference sheet" attached to the character it belongs to. Check items off as you go.

Dress-Up Games and Color Tools

The Dress-Up Games tab lists every game you own with links to play or edit each one (dress-up games have their own section below). The Color Tools button takes you straight to the Spectra color studio, where the full palette toolkit lives - also covered in its own section.

Templates and ToolsOpen this page

Dress-up games

Dress-up games let visitors style your character right on the profile. You upload the art once, and players mix and match it forever. Games are created from the Dress-Up tab on a character profile or from the Dress-Up Games tab on the Templates and Tools page.

Building the game

Give the game a title and a description, then upload the base image - the character's body that every item layers on top of. The game receives a shareable game code automatically, and you can set a custom URL slug (letters, numbers, and hyphens) that both the editor link and the play link share. Games stay private until you flip the Published toggle. If you started a game from the Tools page instead, it is not bound to a character yet - the Dress-Up tab on a profile offers to attach any of your unlinked games.

Categories and items

Categories organize the picker - Hair, Tops, Accessories, whatever you need, with no limit. Each is single-choice or multi-choice, has its own stacking order for layers, and can be reordered and renamed at any time. Items live inside them: upload a transparent PNG for each, with an optional separate thumbnail. Every item has a stacking position, can start equipped so it is on when the game loads, can be hidden from the picker, and can be locked so players see it but cannot remove it. Items can be flagged as favorites, tagged, given a color label, annotated with notes, grouped into named folders that appear as dividers in the player, and reordered by drag.

Variants and tinting

An item can carry color variants - alternate images the player picks between, each with its own thumbnail. On top of that, items can be tintable: white-based art tints with a multiply blend, while black-based art tints with a screen blend, and that base is set per item and can be overridden per variant. Lineart tinting goes deeper still, recoloring only the darker outline and shading of the art while the white areas stay untouched. Default tint colors, opacities, and default lineart colors can all be preset so items load pre-colored exactly the way you draw them.

Transforms

You decide whether players can move and transform items at all. When allowed, the player can nudge any equipped item with arrow controls, rotate it in steps, flip it either way, scale it from twenty percent to three hundred, push it a layer up or down, and reset it. Items can also be marked as multi-equipable, so players can add several tinted, transformed copies of the same item at once.

Backgrounds and theming

The background behind the character can be a solid color, a gradient, an image with an optional overlay tint, or a stripe pattern. The player's whole interface can be themed to match: the page, header, panel, item card, and button colors, the text and muted text colors, the accent used for selection, the equipped item ring, the border color, corner rounding, the font, and even the header text alignment. A game can feel spooky, cute, or retro before a single item is clicked.

Playing

Players click items to equip them - in single-choice categories equipping one swaps the last, in multi-choice categories they stack. A search box, a favorites filter, and an all, equipped, or unequipped filter keep big games navigable. The Randomize button assembles a full outfit from a coherent design scheme: a dominant body color, matched accents, and a pale highlight, grabbing whole matching sets where they exist. Reset returns the default outfit, and Clear strips everything but locked items - both ask first. Outfits save with names and preview thumbnails to the player's browser, so each visitor keeps their own library, and the finished look downloads as a PNG. When the canvas scrolls out of view, a small floating preview keeps the character visible in the corner.

A published dress-up game in the playerOpen this page

Spectra color studio

Spectra is the built-in color design studio, reachable from the Color Tools button on the Templates and Tools page or directly at /palettes. It is a full palette workshop: generate, explore, extract from images, blend gradients, and check readability.

The generator

The generator fills the screen with tall color columns. Press Space for a new palette, lock the columns you want to keep, and generate again - locked colors survive every roll. Sixteen harmony modes shape the results, from analogous to complementary to tetradic. The adjust panel shifts the hue, saturation, or lightness of the whole set at once, and columns can be dragged to reorder, added, or deleted. Clicking any column opens its editor: a color picker with a screen eyedropper, a hex field, and named color information. Keyboard shortcuts cover the common actions, palettes save with a name and a public or private toggle, and a share link recreates your exact palette for anyone who opens it. Exports cover PNG, SVG, CSS, JSON, and an Adobe Swatch Exchange file for Photoshop and friends.

Explore and search

Explore browses public palettes by newest, trending, most loved, or a random pick. The search page filters by name, by hex value with a similarity slider that finds near-matches, by color family, by computed style such as pastel or vibrant, and by palette size.

Image palettes

Upload any picture and the image tool pulls a palette out of it, sorting the swatches into dominant, background, primary, and accent roles before you fine-tune each one. Great for turning a mood board or a piece of art into a usable color set.

The gradient studio

The gradient studio blends two or more stops into a smooth linear or radial gradient, with a live preview and one-click CSS you can paste straight into a profile or a dress-up game theme.

The ratio checker

The ratio checker shows how readable one color is on top of another. The big number is the ratio, and the badges tell you whether the pair passes AA and AAA for normal and large text. When it fails, suggested alternatives are one click away, and a swap button exchanges the two colors instantly.

Palette pages and color vision

Every saved palette has a shareable page listing each color's RGB, HSL, HSV, and CMYK values, ready to copy. The same page simulates how the set appears under four kinds of color vision deficiency, so you can check that a palette holds up for everyone. Visitors can favorite a palette, and your own saved palettes page manages everything you have made with visibility toggles and your favorites list.

The palette generatorOpen this page
The ratio checkerOpen this page
The gradient studioOpen this page
The image palette toolOpen this page

Admin tools

The Admin link appears in the navigation only for accounts with the admin role, and it opens the admin panel.

Users and roles

Admins manage user accounts: change roles between admin and regular user, invite new people by email with the role of your choice, and clean up blank or abandoned accounts from the panel's housekeeping tools.

The shared libraries

Admins curate the site-wide profile template collection and the CSS snippet library that everyone applies from the Templates and Tools page - adding good ones, editing existing ones, and removing outdated entries. The character development questions that every profile can answer are written here too, with their categories, helper text, display order, and an active toggle that retires a question without deleting its answers.

The forum

Forum threads are started and moderated by admins, and the forum management lives under the Admin area alongside the rest.

Getting help

The Help page is a searchable, browsable reference of every feature in article form - if a detail slipped your mind, its search box finds the article that covers it. This tutorial stays available whenever you want the visual walkthrough instead, and if something on the site is misbehaving, the Help page is the first place to check for known issues. Anything you cannot solve from there can be raised with support from your profile settings.