Contextual Fluency is a public framework and standard. It reads as a research institute, not a consultancy. The water metaphor does the structural work: it makes abstract layers feel like something you can point at.

Three-layer architecture

Fresh, Salt, and the contamination signal.

The colour vocabulary lines up with the framework rather than floating above it as decoration.

Layer 01 · Universal

Foundations

Authority, purpose, power, and time horizon. The moral core that should hold across contexts.

Layer 02 · Context-dependent

Dimensions

Hierarchy, trust, voice, recognition, feedback, and the practices that legitimately vary by environment.

Contamination Signal

Toxic patterns

Extraction, credit distortion, suppressed voice, and fear-as-control. Measurable, identifiable, never cultural.

The water metaphor

Leaders rarely examine the assumptions that govern how they lead. The water is invisible to the fish. We make it visible.

Fresh water

Leadership principles from low-context traditions. Systemic design, individual accountability, explicit communication.

Salt water

Leadership principles from high-context traditions. Relational depth, collective obligation, situated knowledge.

Contamination

Distortions that entered both streams disguised as management science. Exported globally as "best practice."

Design mood

Attribute	The brand is	The brand is not
Tone	Insightful, invitational, quietly provocative	Corporate, cold, consultant-speak
Energy	Curious discomfort, modern, immersive	Static, traditional, dry
Depth	Rigorous, transparent, diagnostic	Academic, exhaustive
Engagement	System-first, framework-led	Pushy, comprehensive, founder-centred
Aesthetic	Clean, spacious, editorial	Cluttered, decorative, loud

02/Logo

A geometric mark and a wide-tracked wordmark.

Three diagonal bars, one geometric zigzag. Scales from favicon to hero. Paired with the wide-tracked CONTEXTUAL FLUENCY wordmark. For APAC audiences, the mark rhymes with 氵, the Chinese water radical. That reading surfaces below.

Main lockup

The full lockup: geometric mark on the left, wordmark on the right, set in wide tracking. Use this as the primary signature wherever space allows.

Hover the mark

An echo of the water radical for APAC audiences.

Cultural significance

The radical at the root.

The logomark rhymes with 氵 (sāndiǎnshuǐ), the Chinese water radical, three diagonal strokes that sit on the left side of every Chinese character relating to liquid.

河river

海sea

湖lake

氵 is the root of every water word. The CF mark is the root of contextual leadership. Same position, same function.

Logo variants

8 primary shapes

Main Logo

Full lockup. Primary use.

Left Logo

Mark left of wordmark.

Right Logo

Mark right of wordmark.

Logomark

Standalone geometric mark.

Logomark Box

Mark inside container.

Logomark Outline

Outline mark for overlays.

Variant 01

Alternate lockup.

Variant 03

Condensed alternate.

Black on light surfaces/svg/black/

White on dark surfaces/svg/white/

Clear Space

Maintain minimum clear space equal to the height of the logomark on all sides. No text, imagery, or edges inside this zone.

1x mark height

Placement

Navbar (desktop)Logomark + wordmark in body font
Navbar (mobile)Logomark only
FooterMain Logo (full lockup)
FaviconLogomark
Social avatarLogomark Box
Document headersLeft Logo or Main Logo
Splash / preloaderLogomark (animated)

Misuse

Never do this

Stretched

Rotated

Drop shadow

Wrong colour

Low contrast

Do

Preserve the wordmark's wide tracking and all-caps setting
Use the logomark alone when space is tight, especially favicons and avatars
Honour the clear space equal to the height of the mark on every side
In APAC contexts the mark echoes 氵, the Chinese water radical - let that reading emerge on its own, don't force it

Don't

Rotate the logo
Stretch or distort proportions
Add drop shadows or effects
Place on busy photographic backgrounds without sufficient contrast
Change the letterforms or spacing of the wordmark
Use the logomark in colors outside the brand palette
Recreate the logo in a different typeface
Animate individual letterforms of the wordmark

03/Color

Fresh Water and Salt Water, held at equal weight.

Light surfaces, diagnostic clarity, two streams held at equal weight. Fresh Water and Salt Water map directly to the framework. Anchor dark is for estuary depth only. Red is for contamination only.

Fresh Water

#2D6BB5

Structural, explicit, low-context. Carries universal foundations, methodology, and analytic clarity.

Salt Water

#3F8E7A

Relational, situated, high-context. Carries context-dependent dimensions and collective obligation.

Dominant surface

#F4F1EA

Warm editorial cream. CF lives in light and gradient, not LC.co's dark dominance.

Estuary reserve

#0C1F23

Cinematic depth for convergence moments. Never default UI chrome.

Fresh Water

Low-context and structural. Used for universal foundations, explicit systems, methodology, and analytic clarity.

5 colours

Salt Water

High-context and relational. Used for context-dependent dimensions, situated knowledge, and relational navigation.

5 colours

Shared Structural

Warm editorial surfaces and rare anchor dark. CF should not be dark-dominant in daily use.

4 colours

Text

Near-black and muted grey tuned toward the warm surface, not corporate blue-grey.

4 colours

System

Red is reserved for contamination and toxic signals. It is never decorative.

2 colours

The Estuary

Where Fresh Water and Salt Water meet, the brand can briefly move into depth without becoming dark-dominant.

#1E4982

#2D6BB5

#3F8E7A

#1A6B5E

Contrast ratios

WCAG 2.1 AA

Foreground / Background	Ratio	Grade	Sample	Usage
BodyonSurface	15.7:1	AAA	See the water	Primary body text
SecondaryonSurface	7.3:1	AAA	See the water	Secondary text
Fresh DeeponSurface	8.0:1	AAA	See the water	Fresh Water labels and links
Fresh MidonSurface	4.8:1	AA	See the water	Fresh Water active accent
Salt DeeponSurface	5.6:1	AA	See the water	Salt Water labels and links
CreamonAnchor	15.1:1	AAA	See the water	Estuary and rare dark moments
Fresh LightonAnchor	11.7:1	AAA	See the water	Fresh stream on anchor dark
Salt LightonAnchor	11.9:1	AAA	See the water	Salt stream on anchor dark
ToxiconSurface	5.0:1	AA	See the water	Contamination signal only

Do

Use Surface as the primary field. Never pure white.
Give Fresh Water and Salt Water equal system weight.
Limit anchor dark to cinematic depth moments - splash, estuary, footer.
Respect the WCAG AA ratios above for any body-text pairing.

Don't

Introduce bright saturated blues or purples outside the palette.
Let Fresh Water become the only brand colour.
Use anchor dark as the default page or card background.
Apply system red as a brand accent. It is for contamination only.

04/Typography

A geometric sans, a scarce italic accent, and a disciplined mono.

Space Grotesk carries both display and body. One face for headlines, CTAs, and long-form reading. Fraunces Italic enters sparingly for editorial accent. Space Mono is for code and specs.

Type tester · live preview

See the water.

Size96px

Weight500

Typeface

Font stack

Editorial Research Institute

Display

Space Grotesk

300 - 700 (variable)

Headlines, section titles, CTAs.

Editorial Accent

Fraunces Italic

300 - 500 (variable italic)

One accent word or short phrase in selected headlines only.

Body

Space Grotesk

300 - 700 (variable)

Body copy, UI labels, long-form reading.

Mono

Space Mono

400 / 700

Code and specs.

Type scale · live specimens

Display

Space Grotesk

56px / 36px

weight 700

leading 1.02 · tracking 0

See the water

H1

Space Grotesk

40px / 28px

weight 600

leading 1.08 · tracking 0

The assumptions that shape how you lead

H2

Space Grotesk

32px / 24px

weight 600

leading 1.15 · tracking 0

Three layers, one architecture

Editorial Accent

Fraunces Italic

28px / 22px

weight 400 · italic

leading 1.25

visible

Body

Space Grotesk

17px / 16px

weight 400

leading 1.6

The three-layer architecture is not a personality test. It is a structural diagnosis of how context shapes leadership behaviour.

Caption

Space Mono

13px / 12px

weight 400

leading 1.4 · tracking 0.06em

uppercase

APPROVED DIRECTION

Code

Space Mono

14px / 13px

weight 400

leading 1.5

const layer = 'surface'

Hierarchy in practice

Three layers, one architecture.

Most leadership failures are context failures. The water you swim in shapes the moves you can make. We make that water visible - then we help leaders move inside it, across it, or away from it.

Secondary copy sits on the body scale with generous line height. Code fragments like cfli-profile.surface adopt the mono face.

Do

Use italics for emphasis on a single phrase, not an entire sentence.
Set section titles in sentence case - not Title Case.
Keep body line-height 1.5 or higher for long-form reading.
Preload Space Grotesk, Fraunces Italic, and Space Mono above the fold.

Don't

Pair the display face with Montserrat, Merriweather, or Inter.
Set all-caps body copy. Reserve caps for eyebrows and monospace tokens.
Stack three typefaces in one block - two is the maximum.
Bold inside paragraphs. Use italic or a separate eyebrow instead.

05/Voice & Tone

One voice, four tones. Make the invisible visible.

One voice across every surface. The tone shifts by context, from cinematic at the splash to functional inside the diagnostic. Every copy decision traces back to one line: See the water.

Five voice attributes

01

Incisive

Precise, not blunt. Economical, not terse. Direct, not aggressive.

“Most leadership failures are context failures. The assumptions you never examine are the ones running the show.”

02

Illuminating

Revealing, not lecturing. Clarifying, not simplifying. Showing, not telling.

“You adapted. You performed. But did the context require fluency, or just compliance?”

03

Grounded

Confident, not authoritarian. Evidence-based, not academic. Substantial, not heavy.

“Three decades of cross-cultural leadership research converge on one finding: context is not background noise. It is the operating system.”

04

Invitational

Inviting, not selling. Provocative, not confrontational. Curious, not interrogating.

“What if the problem isn't your leadership style, but the water you're swimming in?”

05

Measured

Restrained, not withholding. Deliberate, not slow. Spacious, not sparse.

“The three layers. The water metaphor. The diagnostic. Each reveals something the others cannot.”

Tone spectrum

Zone 01Metaphor: Central

Cinematic / Poetic

Homepage splash, Interactive History Timeline

“See the Water.”

Use

invisiblebeneathshapesurfacecurrentrevealemerge

Avoid

solutionsoptimizeleveragecutting-edgeinnovativesynergy

Zone 02Metaphor: Conceptual anchor

Narrative / Editorial

CFLI Profiles, Framework, About

“The three-layer architecture is not a personality test. It is a structural diagnosis.”

Use

architecturepatterndimensiondiagnosisevidencestructuralmapreveal

Avoid

passionateempowerunlocktransformgame-changingnext-level

Zone 03Metaphor: Light touch

Clear / Practical

For Leaders, For Practitioners, certification

“The diagnostic measures twelve dimensions. The free tier covers six. The full report covers all twelve.”

Use

diagnostictieraccesscertifiedmethodologyframeworkmeasureapply

Avoid

exclusive offerlimited timeact nowdon't missbest-in-classworld-class

Zone 04Metaphor: Absent

Functional / Supportive

Diagnostic tool, forms, error messages

“Your responses are saved automatically. You can return to this diagnostic at any time.”

Use

savedcontinueprogresscompletereturnviewselect

Avoid

oopsuh-ohsorry about thaterror codeinvalid input

Words that feel CF

Framework

architecturethree-layer architecturediagnosticdimensionlayerpatternstructureencodingbounded fluency

Water metaphor

the watersee the watercontext-blindinvisible forcessurfacecurrentshaped by

Authority

evidence-basedstructuredcalibratedmappedversion-controlledFounding Editor

Diagnosis

layer misalignmentstructural misfitrevealexaminerecognisenavigate

Rigour

rigorousprecisesystematicdocumentedtransparent

Invitation

explorebeginconsiderlook closergo deeper

Words to avoid

Hype

revolutionarygame-changingcutting-edge

Sales

exclusive offerlimited timeact now

Soft HR

empowerinspirepassionjourneygrowth mindset

Generic

solutionsleverageoptimizesynergyecosystem

Academic

heretoforenotwithstandingparadigm

Western idioms

home runslam dunkballpark

Personality-driven

my visionI believemy journey

Do

Use the signature framing: “Not X. But Y.”
Second person (“you”) for Leaders copy, third person for Framework copy.
Keep hero headlines to 3-6 words. “See the Water.” is sacred copy.
Write in sentence case with the Oxford comma.

Don't

Use emdashes. Rewrite or use a comma.
Use “I” on CF.com. CF is system-first, not personality-driven.
Write questions as hero headlines. Use declaratives.
End CTAs with exclamation marks.

06/Imagery

Water as defining imagery. Photography as texture.

Water is the hero image and the background texture. Warm light, natural subjects, APAC-centred. Animation replaces illustration wherever a still frame would go flat.

Water as hero

Ocean, rivers, rain, reflections, ripples. Surface tension. Underwater light. Water appears throughout the site as hero imagery and textural detail, not just in the splash.

Warm light, muted saturation

Slightly warm white balance. Golden hour. Colors read rich but never hyper-saturated. Natural, directional light over studio setups.

APAC representation

Primary audience is Asia-Pacific. Human subjects should reflect this authentically, mid-action, never posed like stock photography.

Animated over illustrated

For storytelling moments the site favours animation over static illustration. Painterly rendering is fine, but never cartoonish or clip-art. Lottie and Rive preferred for web.

Visual direction

Five moods, one shared grain.

Scroll to move through the visual direction. Warm, muted, directional light. Water as texture. People mid-action, never posed.

Surface tension

Close-crop water surfaces. Reflection and ripple used as texture, not decoration.

Architectural light

Interiors with directional light. Window beams, doorways, morning calm.

Human in context

Mid-action, diverse, APAC-centred. Authentic. Never posed.

Estuary convergence

Fresh and Salt meeting. Cinematic background for rare scroll interludes.

Material textures

Stone, wood, fabric. Grounding in the natural world, never synthetic.

Scroll to advance

Overlay treatment

Dark-to-accent gradient for photography on hero surfaces.

Fresh and Salt can meet over photography, but the anchor dark is reserved for moments where depth needs to land.

Photo treatment rules

In cards	12px border radius, matching card radius
Full-bleed	0px radius, edge to edge
Dark overlay	Linear gradient transparent to deep, 60% opacity
Partner logos	grayscale(100%) opacity(0.6), full on hover
Water textures	Can bleed off-canvas as ambient detail

AI imagery note

For storytelling moments, animation wins over static illustration. If a scene needs generated imagery, bias toward painterly, considered, mature renderings. Lottie and Rive are preferred formats. Never cartoonish. Never clip art.

07/Iconography

Outline icons, consistent stroke, one colour at a time.

Icons are supporting cast. Lucide is the primary library because it reads cleanly at 16 through 32, uses rounded caps, and respects currentColor inheritance. Custom SVGs are allowed when Lucide has no equivalent, matched to the same stroke weight.

Style

1.5px stroke, rounded caps, 24px grid. Outline icons only. No filled glyphs.

Source

Lucide Icons as primary library. Custom SVGs allowed when Lucide has no match.

Color

Icons inherit currentColor. Only tint with brand accent when drawing attention is essential.

Sizes

16 for inline labels. 20 for UI affordances. 24 is default. 32 for feature callouts.

Size grid

Stroke 1.5 · rounded

16px

20px

24px

32px

See

Currents

Layers

Direction

Water

Map

Diagnose

Signal

On page surface

Tinted accent

On dark surface

08/Motion

Fluid, natural, water-inspired. Never bouncy.

Everything flows, nothing springs. Four easing curves, six durations, and one rule: if it moves, it means something.

Duration scale

instant100msHover color, icon state changes

quick200msButton press, toggle flip

base320msCard hover lift, dropdown open

smooth600msSection reveal, cross-fade

deep1200msHero entrance, scroll reveal

tide2000msAmbient water animation

Easing curves

fluid

Default motion. Symmetric ease.

cubic-bezier(0.4, 0, 0.2, 1)

enter

Element enters, fast out, slow arrive.

cubic-bezier(0.16, 1, 0.3, 1)

exit

Element leaves, accelerating.

cubic-bezier(0.7, 0, 0.84, 0)

spring

Playful overshoot for card hover.

cubic-bezier(0.22, 1, 0.36, 1)

600ms · enter

Fade up

Sample element

Default section reveal. Subtle lift with a soft arrival.

cubic-bezier(0.16, 1, 0.3, 1)

600ms · spring

Slide in

Sample element

Horizontal reveal for list items or inline blocks.

cubic-bezier(0.22, 1, 0.36, 1)

2400ms · loop

Scale pulse

Sample element

Ambient attention for live indicators or CTAs.

cubic-bezier(0.4, 0, 0.6, 1)

1800ms · loop

Ripple

Slow outward ripple for the water metaphor, never bouncy.

cubic-bezier(0.22, 1, 0.36, 1)

Easing comparison

Generic ease-in-out

Default browser curve. Feels mechanical.

cubic-bezier(0.42, 0, 0.58, 1)

CF water curve

Our default. Soft deceleration, feels like water.

cubic-bezier(0.25, 0.1, 0.25, 1)

Never

No bouncy or elastic easing
No motion without purpose
No ignoring prefers-reduced-motion
No flash transitions or strobing

Mark animations

Three ways the mark resolves

Outline → Solid → Glyphs

Three brand treatments resolve in sequence

Glyph Swarm

Mark lands; decorative glyphs fly in

Outline Pulse

Hollow mark draws on, breathes

09/Downloads

Take the brand with you.

Apply the system anywhere. Direct downloads, no login, no bundler.

Logos

SVG and PNG assets

Fonts

Self-hosted WOFF2

Space Grotesk

Fraunces Italic

Variable Italic

Space Mono

Palette

Colour values as JSON

Every colour above, grouped by role, with hex, RGB, and usage notes. Ready for Figma variables, documentation, or implementation handoff.

Contextual Fluency · Brand Guidelines v0.1

Made by Stories of Light Studio for Leadership Choices Pte Ltd. April 2026.

See the water. Name the pattern. Leave room for depth. If anything in this system gets in the way of those three moves, it changes.