A brand system for a leadership framework about the currents most leaders never examine. Two directions, one water metaphor. Toggle between them to compare live.

Design direction

Now showing

Proposed Direction 01 · Contemplative Warmth

Warm earth tones paired with a serif display face. Reads as quiet, considered, humane. Anchored in teal-ocean accents that echo deep water without pulling cold.

Scroll to explore

§01Framework

A brand built around a water metaphor.

Contextual Fluency is a public framework platform and standard. The brand reads as a research institute, not a personality-led consultancy: system-first, framework-led, transparent about how it reaches its conclusions. The water metaphor is the connective tissue that makes structural ideas feel tangible.

Three design principles

Principle / 01

Contemplative Warmth

The site should feel grounded and intentional, never corporate or cold. Warm backgrounds, generous whitespace, and content that breathes. Design invites curiosity and rewards exploration without overwhelming.

Principle / 02

Editorial Clarity

Clean typography with a serif-sans pairing gives the content weight and credibility. Structured sections, readable hierarchy, purposeful emphasis. The feeling of quality journalism: well-researched, beautifully presented.

Principle / 03

Animated Appeal

The site should feel youthful and alive, not stiff or overly consultancy. Purposeful animation captures attention and draws visitors deeper into the experience. Micro-interactions, scroll-driven reveals, and fluid transitions give the brand energy and modernity. The key is subtlety -- motion should feel natural and effortless, never performative or distracting.

Three-layer architecture

Surface to seabed, the brand mirrors the framework itself.

Each layer reveals as you scroll. The system resists flattening leadership into a single score.

Layer 1 · Surface

What others see

Visible behaviour, the moves you make in public.

Layer 2 · Patterns

Underlying patterns

Toxic voices, inherited scripts, the 'why' beneath the behaviour.

Layer 3 · Deep

Foundational beliefs

Universal values, the water at the bottom of the well.

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 management practice contaminating both streams. 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

§02Logo

A geometric mark and a wide-tracked wordmark.

Three rectangular bars set at diagonal angles form the chevron-like logomark - a geometric zigzag that scales from favicon to hero. Paired with the all-caps, wide-tracked CONTEXTUAL FLUENCY wordmark. For Chinese-speaking audiences, the mark carries a quiet second reading - but that cultural layer is a discovery, not the headline.

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

A quiet second reading for APAC audiences.

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

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 水 (water) - 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

§03Color

Warm earth anchored by teal-ocean accents.

Grounded tones that read as printed-page and early-morning light. Pure white gets replaced with cream. Pure black gets replaced with bark. Accent blues derive from deep water, not office UI.

Primary accent

#3A6E7A

Ocean. Derived from deep water, carries the signature hue without going clinical blue.

Dominant surface

#FEFAF3

Cream. The warm page surface that replaces pure white everywhere on the site.

Cinematic reserve

#0C1B2E

Deep. Homepage splash, scroll interludes, quotes. Used sparingly so it still lands.

Backgrounds

Warm neutrals for content surfaces. Never pure white.

3 tokens

Dark

Reserved for the cinematic splash and hero moments.

2 tokens

Text

Grounded earth tones. Reads as bookish, not corporate.

3 tokens

Accent

Water-derived blues and sage. Used for emphasis and links.

4 tokens

Semantic

Functional states. Borrowed from accent family for coherence.

4 tokens

Depth gradient

Deep current to surface water, the four-stop gradient that anchors the homepage splash and dark interludes.

#0C1B2E

#1A3A5C

#2D6E8A

#4A9FB8

Contrast ratios

WCAG 2.1 AA

Foreground / Background	Ratio	Grade	Sample	Usage
BarkonCream	12.1:1	AAA	See the water	Primary body text
DriftwoodonCream	6.3:1	AA	See the water	Secondary text
OceanonCream	4.9:1	AA	See the water	Links on page bg
FoamonDeep	15.2:1	AAA	See the water	Hero text on dark
BarkonSand	10.8:1	AAA	See the water	Card body text

Use cream or N50 for primary surfaces. Never pure white.
Pair accent blues with warm text colours for readable contrast.
Limit dark sections to cinematic moments - splash, quotes, footer.
Respect the WCAG AA ratios above for any body-text pairing.

Don't

Introduce bright saturated blues or purples outside the palette.
Use layer colours as body-text fills - they lack contrast.
Stack the warm and cool neutral families in the same surface.
Apply the error red as a brand accent. It is for warnings only.

Showing palette for Contemplative Warmth. Toggle above to compare directions.

§04Typography

An editorial serif paired with a neo-grotesk workhorse.

Instrument Serif carries the signature italic moments. Satoshi does the quiet work: body copy, navigation, UI. Roboto Mono handles tokens and values. Italics are the CF signature move - lean on them.

Type tester · live preview

See the water.

Size96px

Weight500

Typeface

Font stack

Contemplative Warmth

Display

Instrument Serif

400 / 400 italic

Editorial headlines and signature italics.

Body

Satoshi

300 - 900 (variable)

All body copy, UI labels, buttons.

Mono

Roboto Mono

100 - 700 (variable)

Code, token values, technical captions.

Type scale · live specimens

Display

Instrument Serif

56px / 36px

weight 400

leading 1.05 · tracking -0.02em

See the water

Instrument Serif

40px / 28px

weight 400

leading 1.1 · tracking -0.01em

The assumptions that shape how you lead

Instrument Serif

32px / 24px

weight 400

leading 1.15

Three layers, one architecture

Satoshi

24px / 20px

weight 700

leading 1.3

Contemplative Warmth

Body

Satoshi

17px / 16px

weight 400

leading 1.6

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

Body Small

Satoshi

14px / 13px

weight 400

leading 1.55

Three decades of research converge on one finding: context is the operating system.

Code

Roboto 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.

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 the display face and body-regular weight 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.

§05Voice & Tone

One voice, four tones. Make the invisible visible.

The voice is constant: incisive, illuminating, grounded, invitational, measured. 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

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.”

Illuminating

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

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

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.”

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?”

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

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.

§06Imagery

Water as defining imagery. Photography as texture.

Water appears throughout the site as both hero imagery and textural detail. The mood is warm, natural, APAC-representative. Animation takes over where static illustration would feel flat or cartoonish.

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 horizontally to move through the photo direction. Warm, muted, directional. 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.

Depth gradient

Surface to deep. Cinematic background for 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.

v1 uses deep to bark. Earthy. Warmer than a pure blue wash.

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.

§07Iconography

Outline icons, 1.5px stroke, inherit currentColor.

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

§08Motion

Fluid, natural, water-inspired. Never bouncy.

Motion reinforces the water metaphor: everything flows, nothing springs. Four easing curves, six durations, and a strict rule that animation earns its place by clarifying meaning or guiding attention.

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

§09Downloads

Take the brand with you.

Everything you need to apply the Contextual Fluency system inside or outside this site. Assets are downloaded directly, no login, no zip bundler.

Logos

SVG and PNG assets

Fonts · v1

Self-hosted WOFF2

Instrument Serif

Satoshi

Roboto Mono

Palette · v1

Tokens as JSON

Every swatch above, grouped by role, with hex, RGB, and usage notes. Drop into Figma variables, Style Dictionary, or any token pipeline.

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.