99 lines
6.2 KiB
HTML
99 lines
6.2 KiB
HTML
<div class="bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl lg:mx-0">
|
|
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Logo and Brand Assets</h2>
|
|
<p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">All the assets and brand resources you need to share OurWorld with the world.</p>
|
|
</div>
|
|
<div class="mx-auto max-w-2xl lg:mx-0 mt-12">
|
|
<h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-4xl">Black Versions (PNG & SVG)</h2>
|
|
</div>
|
|
<ul role="list" class="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-100">
|
|
<img class="h-full w-full object-cover" src="/images/ICON.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_ICON_BLACK</h3>
|
|
<a href="/images/download/ow_icon_black.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-100">
|
|
<img class="h-full w-full object-cover" src="/images/VERTICAL.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_VERTICAL_BLACK</h3>
|
|
<a href="/images/download/owh_logo_vertical_black.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-100">
|
|
<img class="h-full w-full object-cover" src="/images/HORIZONTAL.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_HORIZONTAL_BLACK</h3>
|
|
<a href="/images/download/owh_logo_horizontal_black.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mx-auto max-w-2xl lg:mx-0 mt-12">
|
|
<h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-4xl">White Versions (PNG & SVG)</h2>
|
|
</div>
|
|
<ul role="list" class="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-300">
|
|
<img class="h-full w-full object-cover" src="/images/ICON_W.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_ICON_WHITE</h3>
|
|
<a href="/images/download/ow_icon_white.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-300">
|
|
<img class="h-full w-full object-cover" src="/images/VERTICAL_W.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_VERTICAL_WHITE</h3>
|
|
<a href="/images/download/owh_logo_vertical_white.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
<li class="flex flex-col">
|
|
<div class="w-full aspect-[3/2] overflow-hidden rounded-2xl bg-gray-300">
|
|
<img class="h-full w-full object-cover" src="/images/HORIZONTAL_W.png" alt="">
|
|
</div>
|
|
<h3 class="mt-6 text-lg lg:text-xl font-semibold tracking-tight text-gray-900">OW_LOGO_HORIZONTAL_WHITE</h3>
|
|
<a href="/images/download/owh_logo_horizontal_white.zip" download class="text-base text-gray-600 hover:underline">
|
|
Download Now
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mx-auto max-w-2xl lg:mx-0 mt-24">
|
|
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 lg:text-5xl">Typography</h2>
|
|
</div>
|
|
<div class="mx-auto max-w-4xl lg:mx-0 mt-6">
|
|
<h3 class="lg:text-4xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Primary Font: Helvetica <a href="/images/download/helvetica.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
|
|
<p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">The primary font used in OurWorld branding is Helvetica. It is a clean and modern sans-serif typeface used primarily for titles and subtitles that enhances readability and conveys a sense of professionalism.</p>
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<p class="mt-4 lg:text-4xl text-3xl font-bold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Bold for Titles</p>
|
|
</div>
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<p class="mt-4 lg:text-3xl text-2xl font-semibold text-black" style="font-family: Helvetica, sans-serif;">This is Helvetica Medium for Subtitles</p>
|
|
</div>
|
|
<div class="mx-auto max-w-4xl lg:mx-0 mt-8">
|
|
<h3 class="lg:text-4xl text-2xl font-semibold tracking-tight text-gray-900 mt-12">Secondary Font: Cercodemo <a href="/images/download/cero.zip" download class="text-base text-gray-600 hover:underline ml-2">Download Font</a></h3>
|
|
<p class="mt-4 text-lg lg:text-xl font-normal text-gray-600">The secondary font used in OurWorld branding is Cercodemo. It is a unique and stylish typeface used primarily for body texts and paragraphs that adds a touch of creativity to our designs.</p>
|
|
</div>
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<p class="mt-4 lg:text-xl text-lg font-normal text-black">This is Cercodemo Regular for Body Text</p>
|
|
</div>
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<p class="mt-4 lg:text-lg text-base font-normal text-black">This is Cercodemo Light for Body Text</p>
|
|
</div>
|
|
<div class="bg-gray-100 rounded-lg p-4 mt-6">
|
|
<p class="mt-4 lg:text-lg text-base font-normal text-black">This is Cercodemo Thin for Caption</p>
|
|
</div>
|
|
</div>
|