Creating a New Page

Sinfar Wiki Builder’s Reference

Creating a New Page

The complete technical and visual reference for building Sinfar Wiki pages in the unified style.

Primary Use
Page construction

Editing Modes
Visual · Source

Experience
None required

Standard
Sinfar v3.0

 How to use this manual: Keep this page open while building. Use the directory to jump directly to the feature, component, or snippet you need. Most examples are ready to copy into Source mode.

Page Directory

Foundation

 1. Introduction
 2. Quick Navigation
 3. Building Blocks
 4. Wikitext Reference
 5. HTML Reference

Visual System

 6. Sinfar Components
 7. Images & Galleries
 8. Tables
 9. Icons & Symbols
 10. Color Standard

Page Design

 11. Typography
 12. Layout Standards
 13. Navigation Standards
 14. Templates
 15. Common Page Patterns

Production

 16. Accessibility
 17. Performance
 18. Publishing Checklist
 19. Troubleshooting
 20. Copy/Paste Cookbook
 21. Complete Examples

1. Introduction

This page is the canonical construction reference for new Sinfar Wiki articles. It documents the markup, HTML, visual components, colors, images, tables, layouts, and publishing standards used throughout the unified Wiki design.

 Use the shared framework.
 New pages should use the approved sf-* classes instead of inventing unrelated layouts or placing large amounts of custom CSS inside page source.

What this manual covers

✦ Create

Create a blank article, select an editing mode, and establish the standard Sinfar page wrapper.

⚒ Construct

Use headings, links, cards, tables, images, galleries, alerts, grids, and navigation components.

✓ Publish

Preview the page, verify links and layout, assign categories, and provide a useful edit summary.

Pages this framework supports

• Area and location guides
• Crafting and progression systems
• Leveling and gold-making guides
• Recurring events and activities
• Builder and scripting documentation
• Player resources and mechanical references
• Lore, organizations, businesses, and community pages

 Source mode is required for advanced Sinfar layouts.
 VisualEditor is useful for ordinary writing, links, lists, and simple media. Use Source mode when inserting complete sf-* components or repairing page structure.

2. Quick Navigation

The side directory provides access to every chapter. Use your browser’s page search for exact terms such as gallery, sortable, underline, hero, or quickbar.

   Need text formatting?

   Open Wikitext Reference

   Need an image or gallery?

   Open Images & Galleries

   Need a table?

   Open Tables

   Need a Sinfar component?

   Open Sinfar Components

Editing mode comparison

Task	VisualEditor	Source Mode
Write ordinary paragraphs	Recommended	Supported
Bold, italics, lists, and links	Recommended	Supported
Insert a basic image	Recommended	Supported
Insert a simple table	Supported	Recommended for exact control
Use Sinfar cards and layouts	Not recommended	Required
Repair broken HTML or wrappers	Not recommended	Required
Copy complete page templates	Not recommended	Required

3. Building Blocks

Creating the blank page

Method	How It Works	Best Use
Red link	Add a link to a page that does not exist, then open the resulting red link.	Preferred because the new page is already connected to another article.
Wiki search	Search for the exact title and select the option to create the missing page.	Useful when the page has not yet been linked anywhere.
Direct address	Replace the page name in the browser address with the intended new title.	Fast, but easier to mistype.

Red-link source

[[Making Your First Gold]]

Direct-address example

https://wiki.sinfar.net/index.php/Making_Your_First_Gold

 Check the page title before writing.
 A misspelled address or red link creates a separate article under the incorrect title.

The required Sinfar page wrapper

Every new or refitted article begins inside the sovereign page shell.

__NOTOC__

<div class="sf-page">

Your page content goes here.

</div>

Line	Purpose
	Hides MediaWiki’s automatic contents box when the page uses custom navigation or does not need a contents list.
<div class="sf-page">	Activates the Sinfar page background, text colors, borders, link colors, spacing, and shared component rules.
</div>	Closes the page shell. Every opening div must have a corresponding closing tag.

Basic page foundation

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Player Guide</div>
  <h1>Making Your First Gold</h1>
  <p>Practical ways for a new character to begin earning money.</p>
</div>

<h2 class="sf-section-title">Overview</h2>

<p>Write the opening information here.</p>

<h2 class="sf-section-title">Getting Started</h2>

<p>Write the first useful instructions here.</p>

<div class="sf-footerlinks">
[[Main Page]] · [[Player Resources]] · [[Wanted Articles]]
</div>

</div>

[[Category:Player Guides]]

4. Wikitext Reference

Wikitext is MediaWiki’s native markup language. It handles headings, emphasis, lists, links, redirects, categories, and other common page functions.

Headings

Result	Source	Use
Main article section	== Main Section ==	Standard MediaWiki level-two heading.
Subsection	=== Subsection ===	Used beneath a main section.
Sinfar section title	<h2 class="sf-section-title">Section</h2>	Preferred for unified refit pages.
Sinfar subheading	<h3 class="sf-subheading">Subheading</h3>	Preferred beneath a styled section title.

 Do not create a second page title.
 The Wiki already supplies the article’s page title. Inside the Sinfar hero, the visible h1 is part of the styled page presentation.

Bold, italics, underline, and strike-through

Result	Source
Bold text	'''Bold text'''
Italic text	''Italic text''
Bold italic text	'''''Bold italic text'''''
Underlined text	<u>Underlined text</u>
Removed or obsolete text	<s>Removed or obsolete text</s>

 Underline sparingly.
 Underlined words can resemble links. Use bold or a Sinfar label class for ordinary emphasis.

Font size

 Small supporting text

 Normal text

 Moderately enlarged text

<span style="font-size:.85rem;">Small supporting text</span>

<span style="font-size:1rem;">Normal text</span>

<span style="font-size:1.15rem;">Moderately enlarged text</span>

 Standard: Do not assign custom font families. The Wiki’s shared stylesheet controls the typeface. Use headings and established classes before manually changing text size.

Paragraphs and line breaks

Purpose	Source
New paragraph	Leave one blank line between blocks of text.
Explicit line break	First line<br>Second line
Horizontal rule	----

Bullet lists

• First item
• Second item
• Nested item beneath the second entry

* First item
* Second item
** Nested item beneath the second entry

Numbered lists

1. First step
2. Second step
3. Third step

# First step
# Second step
# Third step

Mixed lists

# Install the required files.
# Configure the client.
# Review the following:
#* Recommended settings
#* Chat channels
#* Server rules

Superscript and subscript

Result	Source
102	10<sup>2</sup>
H2O	H<sub>2</sub>O

Comments hidden from readers

<!-- This note appears only in Source mode. -->

Comments are useful for maintenance instructions, placeholders, warnings to future contributors, and identifying where new source should be inserted.

Displaying markup without rendering it

<nowiki>[[Player Housing]]</nowiki>

The outer nowiki tags tell MediaWiki to display the enclosed markup literally instead of processing it.

Redirects

#REDIRECT [[Player Housing]]

A redirect page contains the redirect line as its first meaningful content. Redirects are useful for alternate names, spelling variations, and likely search phrases.

Categories

[[Category:Player Guides]]
[[Category:New Player Resources]]

Place categories at the bottom of page source, beneath the closing sf-page wrapper.

Table of contents controls

Command	Effect
__TOC__	Places MediaWiki’s contents box at that exact location.
__NOTOC__	Suppresses the automatic contents box.
__FORCETOC__	Forces the contents box to appear even when the page has few headings.

5. HTML Reference

MediaWiki accepts a controlled set of HTML elements inside page source. Sinfar pages use HTML primarily for structure, reusable CSS classes, and precise visual presentation.

 Not every HTML element is permitted.
 Use the established elements shown in this manual. Unsupported or unsafe tags may be escaped, removed, or displayed as plain text.

Structural elements

Element	Purpose	Example
div	Creates a block container and applies Sinfar classes.	<div class="sf-card">...</div>
span	Applies styling to part of a sentence.	<span class="sf-label">Important</span>
p	Creates an explicit paragraph.	<p>Paragraph text.</p>
h1–h3	Creates headings used by Sinfar hero and section classes.	<h2 class="sf-section-title">Overview</h2>
br	Creates a line break.	First line<br>Second line
hr	Creates a horizontal rule.	<hr>

Text elements

Element	Purpose	Example
b	Bold visual emphasis.	<b>Important</b>
strong	Strong semantic emphasis.	<strong>Required</strong>
i	Italic visual styling.	<i>Optional</i>
em	Semantic emphasis.	<em>Usually recommended</em>
u	Underline.	<u>Underlined</u>
s	Strike-through.	<s>Obsolete value</s>
small	Supporting or secondary text.	<small>Optional note</small>
sup	Superscript.	10<sup>2</sup>
sub	Subscript.	H<sub>2</sub>O

List elements

<ul>
  <li>First bullet</li>
  <li>Second bullet</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Definition list

Safe Zone

An area where ordinary PvP restrictions apply.

Event Area

An area temporarily used for a scheduled activity.

<dl>
  <dt><b>Safe Zone</b></dt>
  <dd>An area where ordinary PvP restrictions apply.</dd>

  <dt><b>Event Area</b></dt>
  <dd>An area temporarily used for a scheduled activity.</dd>
</dl>

Quotation

A quoted passage, policy statement, or in-world excerpt may be placed inside a blockquote.

<blockquote>
A quoted passage, policy statement, or in-world excerpt.
</blockquote>

Code and preformatted text

<nowiki><code>SetLocalInt(oObject, "EXAMPLE", TRUE);</code>

<pre>
Multiline code or source example.
Spacing is preserved.

</nowiki>

Classes and inline style

<span class="sf-label">Approved class styling</span>

<span style="color:#d8b46a;">Direct inline color</span>

<div class="sf-card" style="margin-top:12px;">
  Card with one local spacing adjustment.
</div>

 Standard: Use approved classes for repeated design. Reserve inline style attributes for isolated width, alignment, or emphasis adjustments that do not justify a new global class.

 Do not use deprecated presentation tags.
 Avoid tags such as <font> and <center>. Use classes, spans, and text-align instead.

6. Sinfar CSS Components

These components are defined globally by MediaWiki:Common.css. Copy the component source and replace only its example content.

Page shell

<div class="sf-page">

Page content.

</div>

Compact hero

Area Guide

The Western Frontier

Locations, dangers, and reasons to explore the western reaches.

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Area Guide</div>
  <h1>The Western Frontier</h1>
  <p>Locations, dangers, and reasons to explore the western reaches.</p>
</div>

Section title

Exploration Routes

<h2 class="sf-section-title">Exploration Routes</h2>

Subheading

Northern Road

<h3 class="sf-subheading">Northern Road</h3>

Single card

Market Square

A central social and trading area frequently used for gatherings and public events.

<div class="sf-card">
  <h3>Market Square</h3>
  <p>A central social and trading area frequently used for gatherings and public events.</p>
</div>

Two-column card grid

Exploration

Scenic areas, hidden routes, and places worth visiting.

Adventure

Dungeons, quests, encounters, and dangerous locations.

<div class="sf-grid-2">

  <div class="sf-card">
    <h3>Exploration</h3>
    <p>Scenic areas, hidden routes, and places worth visiting.</p>
  </div>

  <div class="sf-card">
    <h3>Adventure</h3>
    <p>Dungeons, quests, encounters, and dangerous locations.</p>
  </div>

</div>

Three-column card grid

<div class="sf-grid-3">

  <div class="sf-card">
    <h3>First Card</h3>
    <p>First card content.</p>
  </div>

  <div class="sf-card">
    <h3>Second Card</h3>
    <p>Second card content.</p>
  </div>

  <div class="sf-card">
    <h3>Third Card</h3>
    <p>Third card content.</p>
  </div>

</div>

Four-value status bar

Region
Western Frontier

Difficulty
Moderate

Best For
Exploration

Status
Active

<div class="sf-start-status">
  <div><b>Region</b><br><span>Western Frontier</span></div>
  <div><b>Difficulty</b><br><span>Moderate</span></div>
  <div><b>Best For</b><br><span>Exploration</span></div>
  <div><b>Status</b><br><span>Active</span></div>
</div>

Quickbar

Getting There
Travel west from the central crossroads.

Recommended
Bring healing supplies and a companion.

Points of Interest
Ruins, camps, and a hidden overlook.

Related Guide
Starter Exploration Areas

<div class="sf-quickbar">
  <div><b>Getting There</b><br>Travel west from the central crossroads.</div>
  <div><b>Recommended</b><br>Bring healing supplies and a companion.</div>
  <div><b>Points of Interest</b><br>Ruins, camps, and a hidden overlook.</div>
  <div><b>Related Guide</b><br>[[Starter Exploration Areas]]</div>
</div>

Neutral note

 Note: This area changes during some scheduled events.

<div class="sf-note">
  <b>Note:</b> This area changes during some scheduled events.
</div>

Information alert

 Useful information
 This route connects directly to the eastern travel network.

<div class="sf-alert sf-alert-info">
  <b>Useful information</b>
  <span>This route connects directly to the eastern travel network.</span>
</div>

Warning alert

 Warning
 The northern path contains traps and hostile patrols.

<div class="sf-alert sf-alert-warning">
  <b>Warning</b>
  <span>The northern path contains traps and hostile patrols.</span>
</div>

Danger alert

 High-risk area
 Fresh characters should not enter without experienced support.

<div class="sf-alert sf-alert-danger">
  <b>High-risk area</b>
  <span>Fresh characters should not enter without experienced support.</span>
</div>

Progress line

1Prepare

2Travel

3Explore

4Complete

5Return

<div class="sf-progress-line">
  <div><b>1</b><span>Prepare</span></div>
  <div><b>2</b><span>Travel</span></div>
  <div><b>3</b><span>Explore</span></div>
  <div><b>4</b><span>Complete</span></div>
  <div><b>5</b><span>Return</span></div>
</div>

Action-link list

<ul class="sf-action-list">
  <li>[[Getting Started|Begin setup]]</li>
  <li>[[Recommended Settings|Configure your client]]</li>
  <li>[[Chat Channels|Review communication channels]]</li>
</ul>

Code block

<pre class="sf-codeblock"><nowiki>
Place code or literal Wiki source here.

</nowiki>

Footer links

Main Page · Player Resources · Wanted Articles

<div class="sf-footerlinks">
[[Main Page]] · [[Player Resources]] · [[Wanted Articles]]
</div>

Badges

Recommended Area Level 5–10 Support

<span class="sf-badge sf-badge-best">Recommended</span>
<span class="sf-badge sf-badge-area">Area</span>
<span class="sf-badge sf-badge-range">Level 5–10</span>
<span class="sf-badge sf-badge-support">Support</span>

7. Images & Galleries

Before inserting an image

• Upload the file through the Wiki’s upload interface.
• Use a descriptive filename rather than a camera number or random export name.
• Confirm the filename and extension exactly.
• Optimize the image before uploading.
• Add useful alternative text when the image contains meaningful information.

Recommended filename pattern

Sinfar_Area_Western_Frontier_Overview.jpg
Sinfar_System_Cooking_Workstation.png
Sinfar_Event_Market_Fair_2026.jpg

Basic image

[[File:Example.jpg]]

Sized image

[[File:Example.jpg|600px]]

Centered image

[[File:Example.jpg|center|900px]]

Thumbnail with caption

[[File:Example.jpg|thumb|right|320px|A view of the western ruins.]]

Frameless image

[[File:Example.jpg|frameless|600px]]

Alternative text

[[File:Example.jpg
|thumb
|right
|320px
|alt=Stone ruins surrounded by a dense pine forest.
|The western ruins.
]]

Image linked to a Wiki page

[[File:Example.jpg|500px|link=Player Housing|alt=An example player house.]]

Image with no link

[[File:Example.jpg|500px|link=|alt=A scenic view of Sinfar.]]

Sinfar screenshot frame

<div class="sf-img-frame">
  [[File:Example.jpg|center|1000px|alt=A view of the area entrance.]]
</div>

 Image sizing: Request a display width close to the size actually used on the page. Do not upload a massive source and then force the browser to display the original at a tiny size.

Basic gallery

<gallery>
File:Area_Entrance.jpg|Area entrance
File:Area_Market.jpg|Market district
File:Area_Ruins.jpg|Ancient ruins
File:Area_Overlook.jpg|Scenic overlook
</gallery>

Packed responsive gallery

<gallery mode="packed" heights="170">
File:Area_Entrance.jpg|Area entrance|alt=Stone gate leading into the area.
File:Area_Market.jpg|Market district|alt=Open market surrounded by timber buildings.
File:Area_Ruins.jpg|Ancient ruins|alt=Overgrown stone ruins in the forest.
File:Area_Overlook.jpg|Scenic overlook|alt=Clifftop view across the island.
</gallery>

Gallery options

Option	Purpose
mode="packed"	Fits images into responsive rows with reduced empty space.
heights="170"	Sets the approximate image height within the gallery.
widths="220"	Sets the approximate image width in standard gallery mode.
caption="Area Gallery"	Adds a title above the complete gallery.
alt=...	Provides alternative text for an individual image.

Gallery with title

<gallery mode="packed" heights="170" caption="Western Frontier">
File:Area_Entrance.jpg|Area entrance
File:Area_Market.jpg|Market district
File:Area_Ruins.jpg|Ancient ruins
</gallery>

 Do not use images as decoration alone.
 Images should identify a location, explain a system, show an interface, preserve an event, or help the reader understand the subject.

8. Tables

Sinfar pages use the HTML table structure with the shared sf-table class as the preferred standard. It is easier to read, maintain, and combine with the unified stylesheet.

Standard Sinfar table

Area	Suggested Level	Notes
Old Forest Road	3–6	Good introductory exploration route.
Western Ruins	6–10	Contains traps and stronger encounters.

<table class="sf-table">
<tr>
  <th scope="col">Area</th>
  <th scope="col">Suggested Level</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Old Forest Road</td>
  <td>3–6</td>
  <td>Good introductory exploration route.</td>
</tr>
<tr>
  <td>Western Ruins</td>
  <td>6–10</td>
  <td>Contains traps and stronger encounters.</td>
</tr>
</table>

Sortable table

<table class="sf-table sortable">
<tr>
  <th scope="col">Event</th>
  <th scope="col">Location</th>
  <th scope="col">Frequency</th>
</tr>
<tr>
  <td>Market Fair</td>
  <td>Central Market</td>
  <td>Monthly</td>
</tr>
<tr>
  <td>Arena Night</td>
  <td>War Games Arena</td>
  <td>Variable</td>
</tr>
</table>

Column widths

<table class="sf-table">
<tr>
  <th scope="col" style="width:25%;">System</th>
  <th scope="col" style="width:20%;">Difficulty</th>
  <th scope="col" style="width:55%;">Description</th>
</tr>
<tr>
  <td>Cooking</td>
  <td>Beginner</td>
  <td>Prepare food using gathered ingredients and recipe knowledge.</td>
</tr>
</table>

Wide table with horizontal scrolling

<div class="sf-table-scroll">

<table class="sf-table">
<tr>
  <th scope="col">Name</th>
  <th scope="col">Region</th>
  <th scope="col">Level</th>
  <th scope="col">Type</th>
  <th scope="col">Rewards</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
</tr>
</table>

</div>

Merged columns

<table class="sf-table">
<tr>
  <th scope="col" colspan="3">Event Schedule</th>
</tr>
<tr>
  <th scope="col">Event</th>
  <th scope="col">Host</th>
  <th scope="col">Location</th>
</tr>
<tr>
  <td>Market Fair</td>
  <td>Community Team</td>
  <td>Central Market</td>
</tr>
</table>

Merged rows

<table class="sf-table">
<tr>
  <th scope="col">Region</th>
  <th scope="col">Area</th>
  <th scope="col">Level</th>
</tr>
<tr>
  <td rowspan="2">Western Frontier</td>
  <td>Forest Road</td>
  <td>3–6</td>
</tr>
<tr>
  <td>Ancient Ruins</td>
  <td>6–10</td>
</tr>
</table>

Row header

<table class="sf-table">
<tr>
  <th scope="col">Attribute</th>
  <th scope="col">Value</th>
</tr>
<tr>
  <th scope="row">Recommended Level</th>
  <td>5–10</td>
</tr>
<tr>
  <th scope="row">Party Size</th>
  <td>1–4</td>
</tr>
</table>

Centered values

<table class="sf-table">
<tr>
  <th scope="col">Recipe</th>
  <th scope="col" style="text-align:center;">Rank</th>
  <th scope="col" style="text-align:center;">Time</th>
</tr>
<tr>
  <td>Roasted Fish</td>
  <td style="text-align:center;">1</td>
  <td style="text-align:center;">20 seconds</td>
</tr>
</table>

Native wikitext table

{| class="sf-table"
! scope="col" | Area
! scope="col" | Level
! scope="col" | Notes
|-
| Forest Road
| 3–6
| Introductory route
|-
| Ancient Ruins
| 6–10
| Traps and stronger enemies
|}

 Preferred method: Use the HTML table format for new Sinfar pages. Use native wikitext tables when modifying a page that already uses that syntax consistently.

 Tables are for structured comparisons.
 Do not use tables merely to force ordinary paragraphs into columns. Use grids and cards for page layout.

9. Icons & Symbols

Small Unicode symbols may be placed directly before headings or labels. They require no image upload and inherit the heading’s existing color.

Inline heading example

⚒ Crafting Systems

Guides and references for player-facing professions and production systems.

<h3>⚒ Crafting Systems</h3>

Recommended Sinfar symbols

Meaning	Symbol	Example
Create or begin	✦	<h3>✦ Create a Page</h3>
Edit or revise	✎	<h3>✎ Editing</h3>
Writing or authorship	✒	<h3>✒ Author’s Notes</h3>
High priority	★	<h3>★ Wanted Article</h3>
Reference	◆	<h3>◆ Quick Reference</h3>
Featured guide	◈	<h3>◈ Featured Guide</h3>
Continue or proceed	➜	<h3>➜ Continue</h3>
Completed or correct	✓	<h3>✓ Verified</h3>
Warning	⚠	<h3>⚠ Warning</h3>
Combat	⚔	<h3>⚔ Combat</h3>
Building or crafting	⚒	<h3>⚒ Crafting</h3>
System or mechanics	⚙	<h3>⚙ Mechanics</h3>
Rules or legal text	§	<h3>§ Rules</h3>
Community	◎	<h3>◎ Community</h3>
Location or target	⌖	<h3>⌖ Location</h3>

Additional neutral symbols

•  ‣  ▪  ▫  ◆  ◇  ◈  ○  ●  ◦
★  ☆  ✦  ✧  ❖  ✤  ✥  ✣
→  ➜  ➤  ➥  ↗  ↘  ↑  ↓
✓  ✔  ✕  ✖  ✗
✎  ✏  ✒
⚔  ⚒  ⚙  ⚖  §
⌂  ⌖  ⌕

 Avoid colorful emoji as structural icons.
 Emoji appearance varies significantly between operating systems. Prefer monochrome Unicode symbols that behave like ordinary text.

 Standard: Use one symbol per heading. Do not place every heading inside an icon badge or create decorative icon rows without a functional reason.

10. Color Standard

The unified palette is controlled through Common.css. Use established classes whenever possible. Direct color values should be reserved for isolated emphasis, verified channel colors, or documented special cases.

Core palette

Role	Color	Value	Use
Page shell	Dark blue-black	#11161d	Main article shell
Panel	Dark brown-black	#181214	Cards, tables, notes, and utility panels
Body text	Off-white	#f4efe6	Normal readable text
Muted text	Muted parchment	#c9bda9	Secondary information
Gold	Sinfar gold	#d8b46a	Eyebrows, labels, borders, and accents
Bright gold	Bright gold	#f0d28a	Headings and important labels
Link blue	Link blue	#8fc6ff	Internal and external links
Hover blue	Light blue	#b8d6ff	Hovered links
Danger red	Muted red	#9f4b3e	Danger and high-priority warnings
Success green	Muted green	#2f5d3a	Positive states and success badges
Information blue	Muted blue	#334e7a	Information states
Category purple	Muted purple	#60456f	Category and area badges

Approved text classes

Gold label text
Muted supporting text
Highlighted value
Positive value

<span class="sf-label">Gold label text</span>

<span class="sf-muted">Muted supporting text</span>

<span class="sf-value">Highlighted value</span>

<span class="sf-good">Positive value</span>

Direct inline color

<span style="color:#d8b46a;">Gold emphasis</span>

<span style="color:#f0d28a;">Bright gold emphasis</span>

<span style="color:#8fc6ff;">Blue reference text</span>

<span style="color:#9fe6bd;">Positive result</span>

<span style="color:#ff9c8f;">Danger result</span>

Colored legacy cards

<div class="sf-card sf-card--green">
  <h3>Green Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

<div class="sf-card sf-card--blue">
  <h3>Blue Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

<div class="sf-card sf-card--red">
  <h3>Red Card</h3>
  <p>Use for danger or a clearly established red category.</p>
</div>

<div class="sf-card sf-card--purple">
  <h3>Purple Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

 Do not create a new color system on individual pages.
 The shared palette exists so pages remain visually related. New colors should be added to Common.css only when they represent a reusable, approved meaning.

 Body-text standard: Use #f4efe6 for readable text inside dark panels. Use gold for headings, labels, and controlled emphasis—not for entire paragraphs.

ode>. Copy the component sou