Sovereign UI — Site Build Criteria & Process

01

THE STANDARD

🔗

THE 3-SECOND RULE

A visitor lands. In 3 seconds they absorb: what this is, why it matters to them, and what to do next.

TEST: If it takes longer than 3s, it fails.

ZERO-NOISE PRINCIPLE

Every element answers: "Does removing this hurt the user?" If no → remove it. If maybe → remove it. If yes → keep it, question its size.

TEST: No decorative elements. Nothing glows unless alive.

THE SOVEREIGN FEEL

The user walks into a command center, not a marketing site. Operational-dark. Bloomberg meets Apple meets spacecraft.

TEST: The interface IS the product story.

02

VISUAL CRITERIA

🔗

Typography

Rule	Standard
Headline	Inter 700/800. No serifs. No display fonts.
Body	Inter 400/500. `16px` minimum. `1.6` line height.
Mono	JetBrains Mono. Hashes, code, proofs, metrics only.
Hierarchy	Max 3 type sizes visible in any viewport section.
Case	Sentence case or UPPERCASE. Never Title Case.
Line length	`65ch` hard cap.

Color

Rule	Standard
Background	Near-black. `#030306` to `#0a0a0f`. Never pure `#000`.
Text	Off-white. `#e2e8f0` to `#f8fafc`. Never pure `#fff`.
Accent	One primary. Brand-specific. CTAs, active states, key data only.
Semantic	Green = live. Amber = warning. Red = danger. Blue = info. Fixed.
Gradients	Hero objects only. Accent → transparent. Never rainbow.

Layout

Rule	Standard
Max width	`1280px`. Centered. Always.
Section gap	`120px–160px` between major sections.
Grid	12-column. `8px` base unit. Everything snaps.
Cards	Glass. `backdrop-filter: blur(20px)`. Subtle border. No heavy shadows.
Corners	`12px–16px`. Pills on buttons only.

Motion

Rule	Standard
Pages	Fade + Y-shift. `300ms`. `ease-out`.
Hover	Lift `-2px` + glow. `200ms`.
Scroll	Fade-up on intersection. Once. No replay.
Hero	Breathing pulse. `2.4s`. Opacity `0.6→1`. Infinite.
Loading	Skeleton screens. Glass-tinted. Never spinners.
A11y	Full `prefers-reduced-motion`. No motion = no motion.

Imagery

Rule	Standard
Photos	Real only. Zero stock photography tolerance.
Illustrations	None. The interface IS the visual.
Icons	Lucide or Phosphor. `20–24px`. Stroke only. `1.5px`.
3D	Only if it IS the product. Never decorative.

03

CONTENT CRITERIA

🔗

Copy standards

Rule	Standard
Headline	Max 8 words. States what this does or why it matters.
Sub-headline	Max 20 words. One sentence. Expands the headline.
Body	Max 3 sentences per section. Need more? New section.
CTA text	Verb + noun. "Launch platform." "View proof."
Banned words	"Leveraging," "innovative," "cutting-edge," "revolutionary."
Voice	Direct. Confident. Present tense. Active voice.

Page anatomy

NAV BAR Brand mark (left) — Links (center) — CTA (right)

HERO One visual + one headline + one CTA. The entire story in one viewport.

PROOF Live data. Not claims. Numbers. Hashes. States.

MODULES What can you DO here? 3–6 modules with icons + labels.

SIGNALS Key performance indicators. 3–4 metric cards max.

TRUST Certifications. Partners. Proof. DOI. Chain.

FOOTER Links. Legal. Brand mark. Nothing else.

Banned elements

✕ Testimonial carousels

✕ "Trusted by" logo walls

✕ Competitor comparison tables

✕ Newsletter signup popups

✕ Oversized cookie banners

✕ "As seen in" press logos

✕ Animated count-up numbers

✕ Parallax scroll effects

✕ Desktop hamburger menus

✕ Hero social media icons

✕ "Schedule a demo" as primary CTA

04

TECHNICAL CRITERIA

🔗

Stack

Layer	Choice	Why
Framework	Next.js 15 or Astro 5	SSG + SSR. Fast. SEO-first.
Styling	Sovereign tokens (CSS vars)	Our own system. No Tailwind.
Animation	Framer Motion / CSS	Declarative. Accessible.
Icons	Lucide React	Tree-shakeable. Consistent.
Fonts	Self-hosted `@font-face`	No Google CDN. GDPR-clean.
Deploy	Vercel / Cloudflare	Edge. Global.
Analytics	Plausible / Umami	Privacy-first.

Performance budget

Lighthouse

98+

min 95

FCP

< 1.0s

max 1.5s

LCP

< 1.5s

max 2.5s

TBT

< 50ms

max 100ms

CLS

< 0.01

max 0.05

JS Bundle

< 80KB

gzipped

CSS

< 30KB

gzipped

Fonts

< 100KB

total

Code standards

Standard	Rule
Components	One per file. Named exports.
Naming	`kebab-case` files. `PascalCase` components. `camelCase` functions.
CSS	BEM with `sov-` prefix. Token consumption only.
A11y	ARIA labels. `role` attributes. `:focus-visible`.
HTML	Semantic: `<header>`, `<main>`, `<section>`, `<nav>`. No div soup.
SEO	`<title>`, meta, OG tags, JSON-LD on every page.

6

ME

Build it

Into FTHTrading/sovereign-ui. Every commit follows these criteria. Nothing ships without passing gates.

What I need from you (Step 1)

Live URL

I fetch and audit the current state against all criteria.

Screenshots

Visual design evaluation against scoring dimensions.

Code repo

GitHub link. I audit structure, performance, quality.

Figma / design

Compare design intent vs. sovereign criteria.

Brand identity

Which of the 5 skins? Maps to the correct voice.

Primary conversion

What should users DO? I optimize the CTA path.

07

REPO STRUCTURE

🔗

FTHTrading/sovereign-ui/ │ ├── public/ │ ├── fonts/ ← Self-hosted Inter + JetBrains Mono │ ├── icons/ ← Lucide SVG exports │ └── og/ ← Open Graph images per page │ ├── src/ │ ├── styles/ │ │ ├── tokens/ ← theme / motion / layout .tokens.css │ │ ├── brands/ ← *.skin.css │ │ ├── components/ ← components.css │ │ ├── devices/ ← responsive.css │ │ └── global.css ← Reset + token imports + base │ │ │ ├── components/ │ │ ├── hero-core/ ← HeroCore.tsx + module.css │ │ ├── bubble-nav/ │ │ ├── dock-panel/ │ │ ├── status-pill/ │ │ ├── proof-strip/ │ │ ├── signal-card/ │ │ ├── metric-card/ │ │ ├── command-cta/ │ │ ├── automation-rail/ │ │ ├── module-constellation/ │ │ ├── trust-strip/ │ │ └── nav-bar/ │ │ │ ├── layouts/ │ │ └── sovereign-layout.tsx │ │ │ ├── pages/ │ │ ├── index.tsx ← ATTRACT layer │ │ ├── platform/ ← ORIENT layer │ │ ├── launch/ ← ACT layer │ │ ├── dashboard/ ← MONITOR layer │ │ └── ecosystem/ ← EXPAND layer │ │ │ └── lib/ │ ├── brand-context.ts │ ├── motion.ts │ └── seo.ts │ ├── package.json ├── tsconfig.json └── next.config.ts

08

QUALITY GATES

🔗

PRE-COMMIT

ESLint clean — zero warnings
TypeScript strict — zero errors
All images have alt text
No hardcoded values — tokens only
prefers-reduced-motion tested

PRE-DEPLOY

Lighthouse ≥ 95 all four categories
LCP < 2.5s on 3G throttle
All pages: title, meta, OG image
Keyboard navigation end-to-end
Screen reader audit passed
Brand skin matches approved identity
3-second test passed — 3 reviewers

POST-DEPLOY

All links return 200
DNS + SSL green
Privacy-first analytics active
Performance monitoring live

SITE BUILD CRITERIA& EVALUATION FRAMEWORK

THE STANDARD

THE 3-SECOND RULE

ZERO-NOISE PRINCIPLE

THE SOVEREIGN FEEL

VISUAL CRITERIA

Typography

Color

Layout

Motion

Imagery

CONTENT CRITERIA

Copy standards

Page anatomy

Banned elements

TECHNICAL CRITERIA

Stack

Performance budget

Code standards

EVALUATION SCORECARD

First Impression

Visual Clarity

Typography

Color & Contrast

Layout & Spacing

Motion & Interaction

Content Quality

Conversion Path

Technical Quality

Sovereign Feel

THE PROCESS

Show me the site

Audit against criteria

Generate the build prompt

Review & approve

Green light

Build it

What I need from you (Step 1)

Live URL

Screenshots

Code repo

Figma / design

Brand identity

Primary conversion

REPO STRUCTURE

QUALITY GATES

SITE BUILD CRITERIA
& EVALUATION FRAMEWORK