🌐 FIDUCI WEBSITE PLANNER

FIDUCI WEBSITE PLANNER

Systems Architecture meets Soulful Design — The definitive guide to building Kinfolk-inspired digital experiences on Super.so, powered by Notion.

🎨 Brand Identity System

🌲

PRIMARY COLORS

Color	Hex	Use Case	Psychology
Forest Green	`#163722`	Headers, CTAs, Authority	Trust, Growth, Stability
Slate Sage	`#6c7d70`	UI, Nav, Body text alt	Balance, Sophistication
Creamy Sand	`#e8e8c8`	Backgrounds, Breathing space	Clarity, Peace, Openness

🌸

ACCENT COLORS

Color	Hex	Use Case	Psychology
Muted Clay	`#d4b4ae`	Warm accents, Human touch	Warmth, Approachability
Lavender Gray	`#e4cbe0`	Creative highlights	Innovation, Luxury, Wisdom
Charcoal Plum	`#665369`	Dark contrast, Premium	Elegance, Power, Depth

Notion LaTeX Color Swatches

Copy these equations to create colored blocks in Notion:

‣

Forest Green Block

‣

Slate Sage Block

‣

Creamy Sand Block

‣

Lavender Gray Block

‣

CTA Button Style

Typography Stack

Role	Font	Weight	Size	Letter-Spacing
H1	Caslon	400	clamp(2.5rem, 5vw, 4rem)	0.02em
H2	Caslon	400	2rem	0.02em
H3	Caslon	400	1.5rem	0.02em
Body	Inter	400	18px	0
Nav	Inter	500	12px	0.15em
Code	Geist Mono	400	14px	0

📊 Planning Dashboard

Published

N/A

Draft

Started

Ready

Started

Started

Ready

Not started

Started

Ready

Started

Not started

🏗️ TIER 1: Site Architecture

🗺️Site Architecture

🧭

FIDUCI Six Pillars + Utilities

Page	Slug	Type	Nav Level	Purpose
Home	`/`	Home	L1 Primary	Hero + pillar overview
Recruitment	`/recruitment`	Pillar	L1 Primary	Talent strategy & executive search
Studio	`/studio`	Pillar	L1 Primary	Creative direction & design execution
Works	`/works`	Pillar	L1 Primary	Portfolio & case studies
Goods	`/goods`	Pillar	L1 Primary	Products & curated resources
Press	`/press`	Pillar	L1 Primary	News, insights, editorial
House	`/house`	Pillar	L1 Primary	About, philosophy, team
Contact	`/contact`	Utility	L1 Primary	Inquiry form & details
Privacy	`/privacy`	Utility	Footer Only	Privacy policy
Terms	`/terms`	Utility	Footer Only	Terms of service

Architecture Principles

Flat Hierarchy: Max 3 levels deep — users reach any page in ≤3 clicks
7±2 Rule: Primary nav contains 7±2 items (cognitive load optimization)
Semantic URLs: Human-readable, SEO-friendly slugs (/studio, /works/project-name)
Multiple Pathways: Search, breadcrumbs, related links — users choose their journey

💬 TIER 2: Brand Messaging

💬Brand Messaging

Voice Guidelines — Kinfolk Tone meets FIDUCI Substance

Warm but not casual — professional intimacy
Show, don't tell — let work speak
Poetic restraint — every word earns its place
Human scale — address one reader
Confident quietude — no exclamation marks

DON'T

Use superlatives ("best", "leading", "premier")
Address "users" or "visitors" — say "you"
Use corporate jargon or buzzwords
Over-explain — trust the reader's intelligence
Use urgency tactics — no "limited time" or "act now"

Messaging Hierarchy

Tagline: 3-7 words. Poetic. Memorable. Example: "Systems Architecture meets Soulful Design"
Value Proposition: 1 sentence. What you deliver + for whom.
Description: 2-3 sentences. Context and differentiation.
CTAs: Warm invitation, not demand. Example: "Start a conversation →"

🎨 TIER 3: Design Assets

🎨Design Assets

Kinfolk-Inspired Design System

Visual Language

Generous whitespace (80px+ section gaps)
Natural photography, soft lighting
Earth tones, muted palette
Editorial serif headlines
Subtle grain textures
Asymmetric layouts with balance

Motion Principles

Purposeful micro-interactions only
Fade-in on scroll (0.3s ease-out)
Hover states: subtle color shifts
No decorative animations
Performance-first approach
Reduced motion support

⚙️ SUPER.SO COMPLETE IMPLEMENTATION

📋 Super.so Dashboard Configuration

⚡

CRITICAL SETUP ORDER

Connect Notion page (sharing enabled, published to web)
Configure Site Settings (name, favicon, language)
Apply Design theme or customize
Set up Navigation (navbar, footer, sidebar)
Enable SEO settings
Add custom domain + SSL
Inject custom CSS
Test and launch

Site Settings

Setting	FIDUCI Value
Site Name	FIDUCI Group
Site Favicon	fiduci-favicon.png (32x32)
Site Language	English
Manual Publishing	Disabled (auto-sync)
Default Color Mode	Light

Navigation Configuration

Navbar Type: Balanced

Logo: FIDUCI wordmark (light) / FIDUCI wordmark (dark)
Visible on Scroll: Yes (sticky)
Show Breadcrumbs: Yes
CTA Button: "Contact" → /contact

Menu Items:

Recruitment → /recruitment
Studio → /studio
Works → /works
Goods → /goods
Press → /press
House → /house

Footer Type: Stack

Social Icons: LinkedIn, Instagram, Twitter/X
Footnote: © 2025 FIDUCI Group. All rights reserved.

🎯 COMPLETE CSS INJECTION

📋

HOW TO USE: Copy the entire CSS block below into Super.so → Settings → Code → Custom CSS. This is a single, consolidated stylesheet with light mode, dark mode, site search, and sidebar styling included.

‣

FULL CSS — Click to expand, then copy all

‣

Navigation Styling

‣

Hero Section

/* ─────────────────────────────────────────────────────────────

CONTENT BLOCKS

───────────────────────────────────────────────────────────── */

/ Callouts /

.notion-callout {

background: rgba(108, 125, 112, 0.06) !important;

border-radius: 2px !important;

border: none !important;

border-left: 3px solid var(--color-secondary) !important;

padding: 1.5rem !important;

}

/ Quotes /

.notion-quote {

font-family: var(--font-heading) !important;

font-size: 1.5rem !important;

font-style: italic !important;

color: var(--color-secondary) !important;

border-left: 2px solid var(--color-accent) !important;

padding-left: var(--space-lg) !important;

margin: var(--space-xl) 0 !important;

}

/ Code Blocks /

.notion-code-block {

font-family: var(--font-mono) !important;

background: var(--color-surface) !important;

border-radius: 2px !important;

border: 1px solid rgba(108, 125, 112, 0.15) !important;

}

/ Dividers /

.notion-divider {

border-color: var(--color-accent) !important;

opacity: 0.5;

}

/ Toggle Blocks /

.notion-toggle > summary {

font-weight: 500 !important;

color: var(--color-primary) !important;

}

/* ─────────────────────────────────────────────────────────────

DATABASES & GALLERIES

───────────────────────────────────────────────────────────── */

.notion-gallery-grid {

gap: 3rem !important;

}

.notion-collection-card {

background: transparent !important;

border: none !important;

box-shadow: none !important;

transition: transform 0.3s ease;

}

.notion-collection-card:hover {

transform: translateY(-4px);

}

.notion-collection-card-cover {

border-radius: 2px !important;

aspect-ratio: 4/3;

object-fit: cover;

}

.notion-collection-card-property {

font-family: var(--font-body) !important;

font-size: 14px;

color: var(--slate-sage) !important;

}

‣

Gallery & Card Styling

‣

Buttons & CTAs

‣

Callouts & Quotes

‣

Footer Styling

‣

Responsive Breakpoints

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

/ Subtle Grain Texture /

body::before {

content: '';

position: fixed;

top: 0;

left: 0;

/ Staggered Animation /

.notion-page-content > *:nth-child(1) { animation-delay: 0.05s; }

.notion-page-content > *:nth-child(2) { animation-delay: 0.1s; }

.notion-page-content > *:nth-child(3) { animation-delay: 0.15s; }

.notion-page-content > *:nth-child(4) { animation-delay: 0.2s; }

.notion-page-content > *:nth-child(5) { animation-delay: 0.25s; }

width: 100%;

height: 100%;

pointer-events: none;

opacity: 0.03;

background: repeating-radial-gradient(

circle at 50% 50%,

transparent 0,

rgba(0,0,0,.03) 1px,

transparent 2px

opacity: 0.025;

z-index: 9999;

}

circle at 17% 32%,

.notion-page-controls,

rgba(0,0,0,0.025) 1px,


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .notion-page-content {
    padding: 0 var(--space-lg) !important;
  }
}

@media (max-width: 768px) {
  .notion-title, .notion-page-title {
    font-size: 2.25rem !important;
  }
  
  .notion-header-block, h1 {
    font-size: 2rem !important;
  }
  
  .notion-gallery-grid {
    gap: 1.5rem !important;
  }
  
  .notion-callout {
    padding: 1rem !important;
  }
}

@media (max-width: 480px) {
  nav a, .super-navbar__link {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  
  .notion-text-block, p {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY & REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus States */
a:focus, button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */
/* Hide Notion UI */
.notion-topbar,
.notion-collection-view-type { 
  display: none !important; 
}

/* Full-width Sections */
.notion-page-content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

✅ Implementation Checklists

Phase 1: Notion Setup

Create clear page hierarchy (6 pillars + utilities)

Write SEO-optimized page titles

Add descriptive cover images (become OG images)

Write first callout/text as meta description

Compress all images before upload (<500KB)

Add ALT text to every image

Structure headings properly (H1 → H2 → H3)

Create internal linking structure

Phase 2: Super.so Configuration

Connect Notion page with publish link

Configure Site Settings (name, favicon, language)

Set up Design theme (or apply custom CSS above)

Configure Navbar (Balanced, sticky, with CTA)

Set up Footer (Stack, social icons, footnote)

Enable Site Search

Enable Theme Toggle (light/dark)

Add custom domain

Phase 3: SEO Optimization

Enable Search Engine Indexing

Set custom meta titles per page

Set custom meta descriptions per page

Configure OG images for social sharing

Enable SSL certificate (automatic)

Submit sitemap to Google Search Console

Set up Google Analytics integration

Test Core Web Vitals (target: LCP <2.5s, CLS <0.1)

Phase 4: Launch & Maintenance

Test responsive design (mobile, tablet, desktop)

Test all navigation links

Test forms and CTAs

Cross-browser testing (Chrome, Safari, Firefox)

WCAG 2.1 AA accessibility audit

Set up Super Analytics monitoring

Document update workflow for team

🔗 Operating Model

Workflow Sequence

Structure First → Define sitemap in Site Architecture
Content Second → Write copy in Brand Messaging
Design Third → Organize assets in Design Assets
Implement → Apply CSS to Super.so
Test → Cross-browser, mobile, accessibility
Launch → DNS, final QA, go live

Integration Points

FIDUCI Studio → Design execution & creative direction
FIDUCI Press → Content creation & editorial
FIDUCI Works → Technical implementation & R&D
FIDUCI House → Brand governance & strategy

🌿

SYSTEM STATUS: FULLY OPERATIONAL

All databases configured. Complete CSS injection ready. Super.so implementation guide complete. Begin by populating Site Architecture with your pages, then proceed to Brand Messaging and Design Assets. Copy the full CSS block above directly into Super.so Code Injection.

Built for quiet confidence. Designed for lasting impact.

Systems Architecture meets Soulful Design.

🌐 FIDUCI Website Planner v2.0 — Complete Super.so Mastery Implementation

Part of the FIDUCI Group ecosystem: Recruitment • Studio • Works • Goods • Press • House