Components Library

import Columns from '@components/columns/columns.astro';
import Column from '@components/column/column.astro';
import LeadText from '@components/lead-text/lead-text.astro';

<LeadText>Page layout</LeadText>

### A heading and introduction

Use a heading and a short paragraph to introduce this part of the page. Keep the **main point** clear before adding more detail.

<Columns compact>

<Column>

#### First column

Place one related idea in each column.

</Column>

<Column>

#### Second column

On smaller screens, the columns stack in the same reading order.

</Column>

</Columns>

import Section from '@components/content/Section.astro';

<Section title="A moment to reflect." titleLevel={3} surface="purple-hour" display>

Look at the trail so far. What have you learned, and what would help you choose the next step?

- Keep what is helping.
- Explore what needs to change.

</Section>

import Columns from '@components/columns/columns.astro';
import Column from '@components/column/column.astro';
import Section from '@components/content/Section.astro';

<Columns compact>
  <Column>
    <Section title="What we see" titleLevel={3}>

Work waits between teams. The handovers are difficult to see.

    </Section>
  </Column>
  <Column>
    <Section title="What we could try" titleLevel={3}>

Map one piece of work together, from the first request to the final outcome.

    </Section>
  </Column>
</Columns>

import Columns from '@components/columns/columns.astro';
import Column from '@components/column/column.astro';
import Card from '@components/card/card.astro';

<Columns compact>
  <Column>
    <Card surface="paper">

### Understand the work

Find out how we help teams see their options more clearly.

[Explore our services](/services/)

    </Card>
  </Column>
  <Column>
    <Card surface="flow">

### Start a conversation

Bring a question about your team, your work or what comes next.

[Talk to Gemba](/contact/)

    </Card>
  </Column>
</Columns>

import Callout from '@components/content/Callout.astro';

<Callout title="Leave room for different views" titleLevel={3}>

A shared conversation does not require everyone to have the same experience. Record **what differs** as well as what the team agrees on.

</Callout>

import Team from '@components/team/team.astro';

These **illustrative roles** use the same sample image.

<Team members={[
  { name: 'Example facilitator', role: 'Helps the conversation move forward', image: '/images/image-test.avif' },
  { name: 'Example team member', role: 'Brings experience of the work', image: '/images/image-test.avif' },
  { name: 'Example sponsor', role: 'Helps remove barriers', image: '/images/image-test.avif' },
]} />

import FAQ from '@components/faq/faq.astro';

<FAQ items={[
  { question: 'Where could we start?', answer: 'Choose one question about the work and invite the people closest to it.' },
  { question: 'What should we bring?', answer: 'Bring a recent example, the questions it raises and room for different perspectives.' },
  { question: 'What happens afterwards?', answer: 'Agree one small experiment and a time to review what you learn.' },
]} />

import Disclosure from '@components/content/Disclosure.astro';

<Disclosure title="What should we bring to the conversation?">

Bring a real example of work you want to understand.

- A question the team keeps coming back to.
- An example of a handover or delay.
- A change you would like to try.

[Get in touch](/contact/) if you would like help choosing a starting point.

</Disclosure>

import Steps from '@components/content/Steps.astro';
import Step from '@components/content/Step.astro';

<Steps label="A small learning cycle">
  <Step title="Look together" titleLevel={3}>

Choose one part of the work and listen to the people closest to it.

  </Step>
  <Step title="Try something small" titleLevel={3}>

Make one change that helps you learn, with a clear question in mind.

  </Step>
  <Step title="Pause and reflect" titleLevel={3}>

Review what happened. Decide what to keep, adapt or stop.

  </Step>
</Steps>

import Section from '@components/content/Section.astro';
import Action from '@components/content/Action.astro';

<Section title="Where could we start?" titleLevel={3} surface="flow" display>

Bring the question you are working through. We can explore it together.

<Action href="/contact/" label="Start a conversation" />

</Section>

import Takeaways from '@components/content/Takeaways.astro';

<Takeaways title="Keep the next step small">

- Start with **one shared question**.
- Listen for different experiences of the same work.
- Choose a change you can learn from, then agree when to review it.

</Takeaways>

import Timeline from '@components/content/Timeline.astro';
import Milestone from '@components/content/Milestone.astro';

<Timeline label="An illustrative three-week learning plan">
<Milestone title="Listen together" label="6 January 2027" dateTime="2027-01-06">

Choose one part of the work to understand. Collect observations from the people involved.

</Milestone>
<Milestone title="Try a small change" label="13 January 2027" dateTime="2027-01-13">

Agree a simple experiment and **what you want to learn** from it.

</Milestone>
<Milestone title="Review what happened" label="20 January 2027" dateTime="2027-01-20">

Compare your observations. Decide what to keep, adapt or stop.

</Milestone>
</Timeline>

import Comparison from '@components/content/Comparison.astro';
import ComparisonPanel from '@components/content/ComparisonPanel.astro';

<Comparison label="An illustrative change to a team conversation" surface="purple-hour">
<ComparisonPanel title="Before: a broad concern">

“There are too many delays” is difficult to act on without a shared example.

- Different people may mean different things.
- The next step is unclear.

</ComparisonPanel>
<ComparisonPanel title="After: a question to explore">

“Where did this request wait?” gives the team something specific to examine.

- Look at one real piece of work.
- Choose one handover to understand together.

</ComparisonPanel>
</Comparison>

import Facts from '@components/content/Facts.astro';
import Fact from '@components/content/Fact.astro';

<Facts label="An example workshop at a glance">
<Fact label="Time">

One hour, with a clear question to explore.

</Fact>
<Fact label="People">

The people who do the work and experience its handovers.

</Fact>
<Fact label="Outcome">

**One small experiment** and a time to review it.

</Fact>
</Facts>

import Checklist from '@components/content/Checklist.astro';

<Checklist title="Before a team conversation" surface="flow">

Use these prompts to prepare together.

- Agree the question you want to explore.
- Bring a recent example of the work.
- Invite the people whose perspectives you need.
- Leave time to choose a next step.

</Checklist>

import Resources from '@components/content/Resources.astro';
import Resource from '@components/content/Resource.astro';

<Resources label="Explore more with Gemba">
<Resource title="Explore our services" href="/services/" meta="Gemba website">

See the areas where we work with teams and organisations.

</Resource>
<Resource title="Start a conversation" href="/contact/" meta="Contact Gemba">

Bring a question about your team, your work or what comes next.

</Resource>
</Resources>

import Glossary from '@components/content/Glossary.astro';
import Term from '@components/content/Term.astro';

<Glossary label="Words for a learning conversation">
<Term name="Observation">

Something you noticed in the work. Separate what happened from your interpretation of why it happened.

</Term>
<Term name="Experiment">

A small change made to answer **a specific question**, with a way to notice what happens.

</Term>
<Term name="Review">

A conversation about what you learned and what to do next. Different views can help reveal what you have missed.

</Term>
</Glossary>

import Media from '@components/content/Media.astro';

<Media
  src="/images/background-home.avif"
  alt="Rocky mountain landscape with a glowing trail beneath an open sky"
  width={3840}
  height={1918}
  caption="Make space to look beyond the next step."
>

### Make room for perspective

Pausing together can help a team see more than its immediate tasks.

- What has changed around the work?
- What are you learning from the people it affects?
- What would help you choose the next step?

[Find out about Gemba](/about/).

</Media>

import Testimonials from '@components/testimonials/testimonials.astro';

These are **illustrative reflections**, not client endorsements.

<Testimonials contained items={[
  { quote: 'We can see where work waits. The next step is to understand why.', name: 'Illustrative reflection', position: 'Example content, not a client quote' },
  { quote: 'A shared question gives us somewhere useful to begin.', name: 'Illustrative reflection', position: 'Example content, not a client quote' }
]} />

import ClientList from '@components/client-list/client-list.astro';

<ClientList />

import Accreditations from '@components/accreditations/accreditations.astro';

<Accreditations contained />

import DividerImage from '@components/divider-image/divider-image.astro';

<DividerImage image="/images/background-home.avif" alt="Rocky mountain landscape with a glowing trail beneath an open sky" contained />

import ServiceList from '@components/service-list/service-list.astro';

<ServiceList contained />

import FeaturedBlog from '@components/featured-blog/featured-blog.astro';

<FeaturedBlog slug="get-started-with-okrs" titleLevel={3} contained />

import BlogList from '@components/blog-list/blog-list.astro';

<BlogList slugs={['how-we-stay-aligned-at-sky', 'get-started-with-okrs']} compact titleLevel={4}>

### Related articles

</BlogList>

import CaseStudies from '@components/case-studies-list/case-studies-list.astro';

<CaseStudies slugs={['funding-circle', 'coop']} compact titleLevel={4}>

### Explore more of our work

</CaseStudies>

import RevealText from '@components/reveal-text/reveal-text.astro';

<RevealText text="See the work. Make space for different perspectives. Choose one small step forward, together." />