Education & Career Blog Specialist Blog Website Template

Quick summary

Dojo is a single-page editorial template for corporate training blogs. It pairs a manifesto-driven scroll flow with a Warm Artisan design system to give learning and development professionals a publishing home that feels as considered as the work they write about. Every section earns the next click through substance, not pressure.

Who this template is for

This template is designed for practitioners who treat instructional design as a serious craft. It speaks directly to the people building programs, defending budgets, and translating compliance into something people actually show up for.

• Learning and development managers building onboarding curricula and program libraries
• Instructional designers who write about methodology, failure, and what actually moves learners
• Human resources directors who need a content platform to support budget conversations with stakeholders

What problem this template solves

Most editorial templates default to loud, grid-heavy layouts that fight for attention rather than holding it. For a corporate training audience reading during focused work sessions, that friction breaks the experience before the first paragraph lands.

• Generic blog layouts lack the typographic authority needed for long-form professional essays
• Standard landing pages push forms and gates before the writing has earned that trust
• Overcrowded designs undermine the calm, deliberate tone that serious learning content requires

What you get with this template

This template delivers a fully structured, single-page editorial layout with a clear scroll narrative. Every component is tied to a specific editorial purpose, and nothing is decorative without reason.

• A full-viewport manifesto hero with Fraunces serif typography on deep charcoal and a tatami-gold rule
• Three alternating manifesto belief sections, each pairing a stark typographic statement with an editorial passage and a contextual essay link
• A featured essays bento grid with four asymmetric cards and a minimal horizontal-flow footer

Feature list

This template is built around a set of deliberate design and layout decisions. Each feature below reflects a specific capability present in the template.

Full-Viewport Manifesto Hero

The hero occupies the entire first viewport. The statement "We don't train people. We build the people who build the company." is set in Fraunces serif at large display scale on a deep charcoal background. A single thin tatami-gold rule sits beneath the final period. There is no image, no illustration, only conviction and negative space.

Alternating Manifesto Belief Sections

Three belief sections scroll in a breathing rhythm, alternating between charcoal and ceramic-white backgrounds. Each section opens with a stark typographic belief statement, follows with a short editorial passage referencing named methodologies such as Kirkpatrick evaluation or the 70-20-10 model, and closes with a tatami-gold underlined "Read the full essay" link.

Sticky "Enter the Library" Navigation Bar

A minimal top bar is hidden on initial load and appears after the reader scrolls past the hero. It holds a single call to action reading "Enter the Library" that routes to the full article archive. The bar stays fixed for the remainder of the scroll session, making the primary action always reachable without interrupting reading flow.

Featured Essays Bento Grid

An asymmetric four-card grid showcases featured essays with varied card sizes. Hover states activate on each card with tatami-gold accent treatment. The layout sits on a ceramic-white background, providing visual relief after the alternating dark and light manifesto sections.

GSAP ScrollTrigger Animations

Section reveals are driven by GSAP ScrollTrigger. Entrance stagger animations and a scroll indicator give the page a slow, deliberate pace that matches the editorial tone. Client Components handle the animation layer while static editorial content uses Server Components.

Warm Artisan Typography Pairing

Fraunces serif handles all display headlines and belief statements. DM Sans handles body copy and interface elements. The combination creates a clear hierarchy between contemplative reading moments and functional navigation.

Page sections overview

Design & branding system

The visual identity follows a Japanese Zen color system built on four deliberate tones. The overall effect is described in the brief as washi paper laid on a dark wooden desk: textured, warm, and intentional without effort.

• Unglazed ceramic white (#F5F0EB) and shou sugi ban charcoal (#2B2B2B) alternate as full-bleed section backgrounds, creating the breathing rhythm of the scroll
• Tatami gold (#C4A35A) marks pull quotes, bylines, hover states, and the underlined essay call-to-action links throughout
• Stone garden moss (#7A8B6F) appears sparingly on category tags and divider elements, used with the restraint of a single branch in an ikebana arrangement

Mobile & speed optimization

The template is designed desktop-first to serve learning and development professionals reading during focused work sessions. Responsive mobile support is included so the layout holds across screen sizes.

• Server Components handle static editorial content, keeping the initial render lean and fast
• Client Components isolate GSAP animation logic, so interactivity does not block the core reading experience
• Desktop-first layout decisions preserve the typographic scale and negative space that define the editorial feel at full width

How this template helps you convert

This template converts through intellectual generosity rather than friction. The scroll is structured so each section proves the writing is worth following before asking for any commitment.

1. Every manifesto belief section ends with a contextual "Read the full essay" link styled in tatami-gold underline, connecting specific editorial arguments to full posts in the archive
2. The sticky "Enter the Library" navigation bar becomes visible after the first scroll, presenting the primary call to action only after the reader has already engaged with the content
3. The featured essays bento grid closes the page with four concrete content previews, giving hesitant readers one more reason to follow through before leaving

Other information about this template

This template is part of a broader editorial and magazine template category designed for content-first B2B platforms. A few additional details are worth noting for buyers evaluating fit.

• The template uses Fraunces and DM Sans as its type pairing, both available through standard font services
• GSAP ScrollTrigger powers the animation layer; the template is built with this library as a declared dependency
• The scroll indicator and stagger entrance animations are pre-configured and do not require custom scripting to activate
• The layout is built as a single-page flow with no multi-page routing or internal navigation beyond the sticky archive link
• The footer follows a Vercel Horizontal Flow pattern, keeping the exit point clean and minimal

Show more