about mission vision values company marketing mission vision values about company purpose company mission vision values section mission statement with cards
About Mission
Fetch pattern JSON:
curl https://webspire.de/patterns/about/mission.json mission.html
<section class="ws-about bg-[var(--ws-about-bg)] px-6 py-20">
<div class="mx-auto max-w-7xl">
<!-- Mission quote -->
<div class="mx-auto max-w-3xl text-center">
<p class="text-2xl font-bold leading-relaxed text-[var(--ws-about-text)] sm:text-3xl">"We believe every team deserves a design system that works for them — structured enough to ensure consistency, flexible enough to encourage creativity."</p>
<p class="mt-4 text-sm text-[var(--ws-about-text-soft)]">— Founding Team</p>
</div>
<!-- Mission / Vision / Values cards -->
<div class="mt-16 grid gap-8 sm:grid-cols-3">
<!-- Mission -->
<div class="rounded-xl border border-[var(--ws-about-border)] bg-[var(--ws-about-bg)] p-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-about-accent)]/10 text-[var(--ws-about-accent)]">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.58-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/></svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-about-text)]">Mission</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">Democratize design systems by providing production-ready, accessible patterns that any team can adopt without months of upfront investment.</p>
</div>
<!-- Vision -->
<div class="rounded-xl border border-[var(--ws-about-border)] bg-[var(--ws-about-bg)] p-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-about-accent)]/10 text-[var(--ws-about-accent)]">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-about-text)]">Vision</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">A world where building consistent, beautiful digital products is as simple as describing what you need — and the system delivers production code in seconds.</p>
</div>
<!-- Values -->
<div class="rounded-xl border border-[var(--ws-about-border)] bg-[var(--ws-about-bg)] p-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-about-accent)]/10 text-[var(--ws-about-accent)]">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/></svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-about-text)]">Values</h3>
<p class="mt-2 text-sm text-[var(--ws-about-text-soft)]">Quality over quantity. Accessibility by default. Open standards. Minimal runtime. Every pattern earns its place through real-world utility.</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aboutmissionvisionvaluescompanymarketing
Slots
| Name | Required | Description |
|---|---|---|
| quote | Yes | Large centered mission quote. |
| cards | Yes | Mission, Vision, Values cards. |
Mission variant with a large centered quote from the founding team, followed by three cards: Mission, Vision, and Values. Each card has an icon, heading, and description. Conveys company purpose and culture at a glance.