- Primary keyword: avatar seven havens design focuses on visual identity and fan wiki structure
- Core palette: Use dark navy, spirit teal, stone gold, and restrained neutral surfaces
- Content hierarchy: Prioritize release details, story, characters, episodes, lore, and news
- Canon policy: Separate confirmed facts, promotional reveals, and open questions
- Localization: Keep Avatar: Seven Havens as the official-facing title across enabled languages
Avatar Seven Havens Design Direction
Avatar Seven Havens is an animated fantasy series rather than a game, so its design system should feel like a cinematic reference library instead of a gameplay dashboard. The strongest direction combines a dark atmospheric interface with luminous spirit-world accents, restrained motion, and clear editorial organization.
The series follows Pavi, an Earthbender Avatar after Korra, in a fractured world shaped by a devastating cataclysm. That premise gives the site two complementary visual themes: the weight of ruined civilization and the glow of spiritual energy. The interface should make both ideas readable without becoming visually crowded.
A successful fan wiki design should help visitors answer practical questions quickly:
- When does the series premiere?
- Where does the story fit after The Legend of Korra?
- Who are Pavi, Jae, Geet, and Pavi’s twin?
- What are the Seven Havens?
- How are the 26 episodes divided between Book 1 and Book 2?
- Which details are confirmed, promotional, or still unknown?
| Design Goal | Recommended Treatment | Editorial Benefit |
|---|---|---|
| Spirit-world atmosphere | Dark navy background with teal highlights | Creates mood without reducing readability |
| Earth Avatar identity | Stone-gold accents and angular dividers | Connects the interface to Pavi’s element |
| Fast discovery | Prominent cards and compact data tables | Helps users scan release and character facts |
| Canon clarity | Confirmed, reported, and unknown labels | Limits accidental speculation |
| Franchise continuity | Timeline links to Korra and earlier Avatar eras | Makes the post-Korra setting easier to understand |
Treat the homepage as an editorial guide first. Decorative effects should support navigation, not compete with dates, names, episode data, or canon notes.
Color, Typography, and Interface Components
The recommended visual language uses a dark foundation with cool luminous accents. Avoid bright green as the dominant color; spirit teal provides a more distinctive connection to the series’ supernatural atmosphere while preserving contrast against navy surfaces.
Stone gold works best as a secondary accent for earthbending references, section markers, active navigation states, and small labels. It should not replace teal throughout the interface because too much gold can make the site feel like a generic fantasy archive.
Recommended color roles
| Interface Role | Color Direction | Usage |
|---|---|---|
| Main background | Deep navy | Page canvas, hero backdrop, footer |
| Elevated surface | Blue-black | Cards, accordions, information panels |
| Spirit accent | Luminous teal | Links, icons, focus states, dividers |
| Earth accent | Stone gold | Labels, timeline markers, selected metadata |
| Primary text | Soft white | Headings and essential facts |
| Secondary text | Cool gray | Descriptions, source notes, supporting copy |
| Warning state | Muted amber-red | Spoiler notices and unconfirmed information |
Typography should prioritize clarity over novelty. Use a strong geometric sans-serif for headings and a highly readable sans-serif for body copy. Angular display lettering can work for small labels, but long paragraphs and episode summaries should remain simple and spacious.
Component behavior
- Hero panel: Lead with the series name, post-Korra premise, premiere date, and episode count.
- Navigation cards: Use consistent icons for Release, Episodes, Characters, Cast, Story, Lore, Trailer, and News.
- Data tables: Reserve them for confirmed facts, production information, and episode tracking.
- Accordions: Use for story setting, worldbuilding, and spoiler-sensitive explanations.
- Timeline modules: Show the transition from Korra’s era to Pavi’s Avatar cycle.
- Source labels: Place official links near the relevant fact rather than hiding them on a separate references page.
Spirit Teal
Use for links, active tabs, icon strokes, and subtle glows. Keep the hue bright enough for accessibility on dark surfaces.
Stone Gold
Use for Earth Avatar references, timeline markers, metadata badges, and selected states. Apply it sparingly.
Ruined Navy
Use layered navy tones to suggest the fractured world while preserving a calm reading environment.
Do not place animated glows, large background art, and multiple accent colors behind dense wiki tables. Important facts need stable contrast and predictable spacing.
Homepage Structure for a Fan Wiki
The homepage should guide visitors from the most time-sensitive information to deeper lore. A clear content hierarchy also supports SEO because each module can target a distinct search intent without forcing unrelated topics into one article.
Start with a hero block that establishes the series identity. The recommended summary presents Avatar: Seven Havens as a 2D animated post-Korra adventure centered on Pavi, the new Earth Avatar. The available planning data identifies a 2026 premiere window, 26 episodes, two books, and an approximate 30-minute runtime for each episode.
The homepage should then use a four-card release panel:
| Card | Primary Fact | Supporting Content |
|---|---|---|
| Premiere | October 9, 2026 | Track future schedule changes and regional timing |
| Streaming | Paramount+ | Link to the official series information page |
| Episode Order | 26 episodes | Explain the two-book structure |
| Runtime | About 30 minutes | Note that episode-specific details may be added later |
The content navigation should remain consistent across desktop and mobile:
- Release
- Episodes
- Characters
- Cast
- Story
- Lore
- Trailer
- News
A dedicated first-look area can link to the official Paramount+ series information page. Because no qualifying video source is available under the site’s title-matching rule, the design should use an official thumbnail or linked preview rather than an embedded YouTube player.
Recommended homepage order
| Order | Module | Format | Search Intent |
|---|---|---|---|
| 1 | Release Date and Streaming | Card grid | Premiere date and where to watch |
| 2 | Trailer and First Look | Media cards | Official footage and confirmed reveals |
| 3 | Story and Setting | Accordion | Cataclysm, Pavi, and Seven Havens |
| 4 | Characters and Cast | Table | Character identities and voice credits |
| 5 | Pavi Guide | Featured profile | New Avatar and personal history |
| 6 | World and Locations | Location cards | Havens, ruins, and spirit territories |
| 7 | Timeline After Korra | Step timeline | Franchise chronology |
| 8 | Episodes and Production | Data table | Books, episode order, and credits |
Give every homepage module a descriptive heading and a dedicated internal link. This creates useful landing pages for release date, episodes, characters, Pavi, lore, and the post-Korra timeline.
Step-by-Step Avatar Seven Havens Design Setup
Use the following workflow to turn the visual direction into a maintainable fan wiki. The method keeps design, content structure, and canon handling aligned from the beginning.
Define the Editorial Scope
Set the site boundary around Avatar: Seven Havens. Cover release information, episodes, characters, cast, story, lore, locations, trailers, and production news. Do not introduce game systems, redemption codes, platform downloads, or gameplay language.
Build the Visual Foundation
Create the dark navy theme, soft-white text, spirit-teal interaction color, and stone-gold secondary accent. Establish contrast, spacing, button states, table styling, and mobile breakpoints before adding decorative effects.
Create the Homepage Modules
Add the hero, release cards, first-look area, story accordion, character table, Pavi profile, location cards, timeline, and production guide. Each module should have one clear purpose and one useful internal link.
Separate Canon Levels
Label information as confirmed, promotional, or unanswered when necessary. Keep official character identities and episode data distinct from interpretation, theories, and trailer analysis.
Prepare Localization and Maintenance
Keep the English title Avatar: Seven Havens in navigation and metadata. Enable English, Spanish, Portuguese, and German pages, then add translated explanatory text without presenting unofficial translated titles as official.
Content status labels
| Label | Meaning | Example Use |
|---|---|---|
| Confirmed | Announced by an official source | Premiere date, episode order, Pavi’s Avatar role |
| Promotional | Shown or described in official marketing | First-look scenes, character previews, visual details |
| Unanswered | Not publicly established | Exact cataclysm cause, full twin background |
| Fan interpretation | Editorial analysis or theory | Possible meaning of a location or symbol |
Link production claims to the Paramount Press Express announcement or the Avatar Studios official site. Use descriptive anchor text so readers understand why they are leaving the wiki.
Create reusable templates for character pages, episode pages, and location profiles. A consistent template makes future announcements easier to publish and compare.
Design QA and Publishing Checklist
Before publishing an Avatar Seven Havens design article or homepage update, check both the interface and the editorial data. A visually polished page still needs accurate labels, accessible contrast, and a clear distinction between facts and analysis.
Publishing Checklist:
- Confirm the page uses the English-facing title Avatar: Seven Havens
- Check that dark surfaces and teal links meet readable contrast standards
- Verify premiere, episode, book, and runtime details before publishing
- Separate confirmed canon from promotional reveals and unanswered questions
- Test cards, tables, accordions, and timeline layouts on mobile screens
Final QA table
| Check | Pass Condition | Common Fix |
|---|---|---|
| Metadata | Title begins with the primary keyword and stays specific | Remove vague phrases and shorten the description |
| Navigation | Every major topic has a visible destination | Add internal links to orphaned modules |
| Tables | Cells are concise and horizontally readable | Move long explanations into paragraph text |
| Accessibility | Text, links, focus states, and controls remain visible | Increase contrast or simplify backgrounds |
| Canon handling | Speculation is clearly identified | Add a status label or rewrite as an open question |
| Localization | English title remains stable across locales | Use translated terms only as supporting language |
When a detail is not established, write “not publicly confirmed” instead of filling the gap with a confident theory. This protects trust and keeps future updates easy.
Q: What should Avatar Seven Havens design look like?
A strong design uses a dark navy foundation, luminous spirit teal, restrained stone-gold accents, readable typography, and modular layouts for release, story, character, lore, and episode content.
Q: Is Avatar: Seven Havens a game?
No. Avatar: Seven Havens is an animated Avatar Studios series. Its fan wiki should focus on episodes, characters, cast, story, lore, locations, production, and official updates rather than gameplay systems.
Q: Which facts should appear in the homepage hero?
The hero can identify Pavi as the Earth Avatar after Korra and summarize the post-Korra setting. Confirmed planning details include the October 9, 2026 premiere, 26 episodes, two books, and an approximate 30-minute runtime.
Q: How should the site handle translated titles?
Keep Avatar: Seven Havens as the English-facing title across enabled locales. Spanish, Portuguese, and German translations may support search and body copy, but they should not be presented as official titles until formally announced.