feat: add prelaunch site controls and refresh branding
This commit is contained in:
+108
-18
@@ -1,9 +1,10 @@
|
||||
# SHD.build Design System
|
||||
|
||||
This document defines the visual language for SHD.build, the independent
|
||||
Division Resurgence community for builds, guides, game data, news, and
|
||||
discussion. New pages use the same tactical intelligence network as the admin
|
||||
dashboard. Public pages may use more space and larger editorial typography.
|
||||
This document defines the visual language for SHD.build, an independent
|
||||
Division Resurgence data-and-tools site for builds, guides, game data, news,
|
||||
and discussion. New pages use the same tactical intelligence network as the
|
||||
admin dashboard. Public pages may use more space and larger editorial
|
||||
typography.
|
||||
|
||||
## Design principles
|
||||
|
||||
@@ -16,6 +17,43 @@ dashboard. Public pages may use more space and larger editorial typography.
|
||||
underlines. Communicate hover and focus through SHD accent color, borders,
|
||||
brightness, and the required focus-visible outline.
|
||||
|
||||
## Brand identity
|
||||
|
||||
SHD.build uses the two-color Core Segments identity. The emblem combines the
|
||||
orange Division signal with ISAC's analytic role in the product:
|
||||
|
||||
- Three unequal Signal Orange arc segments form the outer circle. Each segment
|
||||
has square ends.
|
||||
- The widest break sits in the upper-right quadrant and contains one detached
|
||||
Signal Orange square, which represents a data packet.
|
||||
- A Field Manual White open square forms the ISAC core at the center.
|
||||
|
||||
Keep the emblem in Signal Orange and Field Manual White on Operations Black,
|
||||
Terminal Black, or another approved dark surface. SHD.build has no one-color
|
||||
emblem. Do not close the arc gaps, equalize the segments, remove the data
|
||||
packet, fill the ISAC core, add letters to the emblem, or recolor either part.
|
||||
Use a dark holding surface or omit the emblem when a placement cannot reproduce
|
||||
both colors.
|
||||
|
||||
The standard lockup pairs the emblem with the heavy angular `SHD.build`
|
||||
wordmark. Set `SHD` in Field Manual White and `.build` in Signal Orange. Place
|
||||
the uppercase descriptor `RESURGENCE DATA & TOOLS` below the wordmark in
|
||||
restrained telemetry type. Do not substitute another descriptor.
|
||||
|
||||
Use the complete lockup in the 76px global header and shared footer. The header
|
||||
uses a 38px emblem; keep the wordmark and descriptor compact enough to preserve
|
||||
the navigation grid. Mobile headers may use the emblem alone when the complete
|
||||
lockup would crowd navigation. Favicons and app icons use the emblem without
|
||||
text. Small-size artwork must retain both colors, widen the arc gaps where the
|
||||
pixel grid requires it, and keep the packet and open core distinct.
|
||||
|
||||
Treat the emblem as decorative when visible `SHD.build` text names the product.
|
||||
Give an emblem-only home link the accessible name `SHD.build home`. Preserve
|
||||
the approved colors and full opacity in focus, disabled, and compact contexts;
|
||||
use text or control styling to communicate state instead of fading the mark.
|
||||
The Field Manual White core and Signal Orange arcs must remain distinct from
|
||||
their background at every delivered size.
|
||||
|
||||
### Routed error console
|
||||
|
||||
Expected HTTP errors and unexpected server faults use one shared SHD exception
|
||||
@@ -64,19 +102,18 @@ from the orange links reserved for SHD navigation and legal resources. Support
|
||||
and legal links form a compact horizontal rail that may wrap at intermediate
|
||||
widths and becomes a two-column touch-friendly grid on narrow mobile screens.
|
||||
|
||||
The footer repeats the complete SHD brand lockup used by the global header:
|
||||
double-ring SHD mark, white `SHD`, orange `.build`, and the restrained
|
||||
`RESURGENCE COMMUNITY` descriptor. Do not substitute a plain text wordmark or
|
||||
color the complete product name orange.
|
||||
The footer repeats the complete Core Segments lockup used by the global header:
|
||||
two-color emblem, Field Manual White `SHD`, Signal Orange `.build`, and the
|
||||
`RESURGENCE DATA & TOOLS` descriptor. Do not substitute a plain text wordmark,
|
||||
drop either emblem color, or color the complete product name orange.
|
||||
|
||||
### Community platform positioning
|
||||
### Platform positioning
|
||||
|
||||
SHD.build is a Division Resurgence community. Primary product language and
|
||||
global navigation represent five durable
|
||||
channels: News, Database, Builds, Guides, and Builder. Loadout-specific terms
|
||||
remain appropriate inside build routes, but the global brand descriptor,
|
||||
homepage metadata, hero, sign-in introduction, and footer describe the broader
|
||||
community platform.
|
||||
SHD.build provides Division Resurgence data and tools for players. Primary
|
||||
product language and global navigation represent five durable channels: News,
|
||||
Database, Builds, Guides, and Builder. Loadout-specific terms remain
|
||||
appropriate inside build routes. The global brand descriptor, homepage
|
||||
metadata, hero, sign-in introduction, and footer describe the broader toolset.
|
||||
|
||||
The homepage uses a community-channel grid to establish this information
|
||||
architecture. Each channel has an operational code, plain-language purpose,
|
||||
@@ -265,9 +302,10 @@ explains it.
|
||||
At viewports up to 900px, replace the hidden desktop link rail and account
|
||||
controls with a labeled square `MENU` control in the shared site
|
||||
header. Activating it opens a right-side SHD navigation panel over a dismissible
|
||||
backdrop. The panel includes Home, Discover, Builder, Guides, Sign In or My
|
||||
Profile, and ISAC when authorized; authenticated agents also receive identity
|
||||
state and Sign Out inside the panel.
|
||||
backdrop. The panel includes Home, each enabled public destination, Sign In or
|
||||
My Profile, and ISAC when authorized. Authenticated agents also receive identity
|
||||
state and Sign Out inside the panel. Section availability controls both desktop
|
||||
and mobile navigation.
|
||||
|
||||
Use numbered full-width navigation rows, explicit active-route text styling,
|
||||
orange action indicators, and minimum 44px interaction targets. Opening moves
|
||||
@@ -294,6 +332,53 @@ squeezed beside long module headings on mobile.
|
||||
- Community build cards retain the colored top rule, abstract loadout artwork,
|
||||
concise tags, agent attribution, and a full-width terminal action.
|
||||
|
||||
### Prelaunch network shell
|
||||
|
||||
Use the standalone prelaunch shell for `/coming-soon`. It replaces the global
|
||||
application shell while the public launch gate is active, so visitors see one
|
||||
clear deployment message instead of navigation into gated sections. Keep the
|
||||
SHD.build mark, a visible network-state block, one primary access action, the
|
||||
Discord community action, the deployment manifest, and legal links. Signed-out
|
||||
visitors receive `AGENT SIGN IN`; an authenticated operator previewing the page
|
||||
receives `ENTER FULL SITE`.
|
||||
|
||||
The desktop composition pairs the launch statement with a technical network
|
||||
visual. Use the shared grid background, square borders, restrained orange
|
||||
emphasis, and telemetry labels. Orange identifies the primary action and active
|
||||
signal paths. Green may reinforce a staged or available state; red may reinforce
|
||||
an unavailable channel. Every state also needs a text label.
|
||||
|
||||
The deployment manifest lists News, Database, Builds, Guides, and Builder with
|
||||
plain-language descriptions. A visitor who follows a disabled-section URL sees
|
||||
the affected section name in a status notice. The page must state whether new
|
||||
agent registration is open without implying that sign-in for existing accounts
|
||||
has closed. The manifest uses the saved section controls as its source of truth
|
||||
and marks unavailable sections in text. An authenticated preview follows the
|
||||
same availability states.
|
||||
|
||||
At widths below 900px, stack the launch statement above the network visual and
|
||||
collapse the manifest to one column as space requires. Preserve 44px action
|
||||
targets and keep status text within the viewport. Reduce the radar sweep and
|
||||
other ambient motion under `prefers-reduced-motion`; retain the static rings,
|
||||
nodes, and labels.
|
||||
|
||||
ISAC Site Controls use three connected command panels: Launch Gate, Account
|
||||
Creation, and Public Sections. Use `SegmentedChoice` for each finite state.
|
||||
Display the pending-change count outside the panels and require a confirmation
|
||||
modal that lists every changed setting as previous state, arrow, and proposed
|
||||
state. A successful save closes the modal and refreshes the network-state
|
||||
summary. Keep a `PREVIEW PAGE` link in the command toolbar so authenticated
|
||||
operators can inspect the promotional page without ending their session.
|
||||
Operators need text for enabled, disabled, coming-soon, and public states; color
|
||||
supports those labels.
|
||||
|
||||
The Launch Gate controls signed-out entry to the application. Public Section
|
||||
controls apply to everyone. When an operator disables News, Database, Builds,
|
||||
Guides, or Builder, remove that destination from global navigation for signed-in
|
||||
and signed-out users and block its route family on the server. The promotional
|
||||
page identifies a disabled destination when a user follows an old bookmark or
|
||||
direct URL. Do not present authentication as a way around a disabled section.
|
||||
|
||||
### Agent and authentication surfaces
|
||||
|
||||
- Account pages should read as an agent dossier: identity and access at the top,
|
||||
@@ -390,6 +475,11 @@ squeezed beside long module headings on mobile.
|
||||
- Authentication uses one unified access screen rather than separate sign-in and
|
||||
registration destinations. Verified email and first-time OAuth identities may
|
||||
create an account; returning identities sign into the matching account.
|
||||
- With account creation disabled, keep returning-agent methods available, hide
|
||||
the password `CREATE ACCOUNT` mode, and show a concise registration-state
|
||||
notice. Provider and email controls must explain that unknown identities
|
||||
cannot create an account without suggesting that existing identities lost
|
||||
access.
|
||||
- Password access uses an explicit `SIGN IN` / `CREATE ACCOUNT` mode switch
|
||||
inside the fallback panel. Account creation separates the public display name
|
||||
from the private ASCII login username.
|
||||
|
||||
Reference in New Issue
Block a user