ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests 1 Projects Releases Activity

refactor: enhance MediaType typography section with download button and text primitive examples

Browse Source 
- Added download button for Mulish font family with hover states and download icon
- Changed H3 title color from default to text-gray-900 and removed top margin
- Added descriptive paragraph explaining Mycelium's type scale
- Added typography showcase section displaying all text primitives (Eyebrow, H3, P, CT, CP) with usage specifications and examples
- Changed MediaColors Deep Gray description text
This commit is contained in:
sasha-astiadi
2025-11-21 17:41:39 +01:00
parent fdd0109ffc
commit 5a6d58dd85
2 changed files with 101 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/mediakit/MediaColors.tsx
View File

@@ -102,7 +102,7 @@ export function MediaColors() {
<div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
<div>
<CT className="text-sm font-medium text-gray-200">Deep Gray</CT>
<CP className="text-xs text-gray-500 mt-1">Supporting background for overlays and dark UI elements.</CP>
<CP className="text-xs text-gray-200 mt-1">Supporting background for overlays and dark UI elements.</CP>
</div>
<div className="mt-4 h-16 w-full border border-gray-700 bg-[#121212]" />
<p className="mt-3 text-xs text-gray-500">Hex: #121212</p>

107
src/pages/mediakit/MediaType.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { H3, P, H4 } from '@/components/Texts'
import { Eyebrow, H3, P, H4, CT, CP } from '@/components/Texts'
export function MediaType() {
return (
@@ -12,15 +12,108 @@ export function MediaType() {
{/* Inner padding */}
<div className="px-6 lg:py-12">
<div className="max-w-7xl lg:pl-6">
<H3 as="h1" className="mt-4">
Typography
</H3>
<div className="flex items-center justify-between gap-4">
<H3 as="h1" className="mt-0 text-gray-900">
Typography
</H3>
<a
href="/src/assets/fonts/Mulish.zip"
download
className="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:text-cyan-600 hover:border-cyan-500 hover:bg-cyan-50 transition-colors"
aria-label="Download Mulish font family"
>
<span>Download Mulish</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-4 w-4"
>
<path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
<path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
</svg>
</a>
</div>
<P className="mt-4 text-gray-600 max-w-2xl">
Mycelium uses a consistent type scale built on Mulish and Inter. Below are the primary text
primitives you can reuse in design and implementation.
</P>
<div className="mt-8 bg-white px-6 py-8 text-black border border-gray-100">
{/* Eyebrow */}
<div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
<div className="flex items-center justify-between gap-4">
<P className="text-xs font-medium text-black">Eyebrow</P>
<P className="text-xs text-gray-400">
H2 · text-base/7 · font-semibold · uppercase · tracking-[0.16em] · color: Vivid Azure
</P>
</div>
<Eyebrow className="mt-2">
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
</Eyebrow>
</div>
{/* Header (H3) */}
<div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
<div className="flex items-center justify-between gap-4">
<P className="text-xs font-medium text-black">Header (H3)</P>
<P className=" text-xs text-gray-400">
h3 · text-3xl lg:text-5xl · font-medium · leading-tight · tracking-tight
</P>
</div>
<H3 className="mt-2 text-gray-900">
The quick brown fox jumps over the lazy dog
</H3>
</div>
{/* Paragraphs (P) */}
<div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
<div className="flex items-center justify-between gap-4">
<P className="text-xs font-medium text-black">Paragraphs (P)</P>
<P className=" text-xs text-gray-400">
p · text-base lg:text-xl · leading-relaxed · regular weight
</P>
</div>
<P className="mt-2 text-gray-700 max-w-3xl">
The quick brown fox jumps over the lazy dog. Use this for body copy, descriptions, and
longer explanatory text.
</P>
</div>
{/* Card Title (CT) */}
<div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
<div className="flex items-center justify-between gap-4">
<P className="text-xs font-medium text-black">Card Title (CT)</P>
<P className=" text-xs text-gray-400">
span · text-base lg:text-lg · leading-normal · font-medium
</P>
</div>
<CT className="mt-2 text-gray-900">
The quick brown fox jumps over the lazy dog
</CT>
</div>
{/* Card Texts (CP) */}
<div className="space-y-1">
<div className="flex items-center justify-between gap-4">
<P className="text-xs font-medium text-black">Card Texts (CP)</P>
<P className=" text-xs text-gray-400">
p · text-xs lg:text-base · tracking-wide · leading-normal · font-light
</P>
</div>
<CP className="mt-2 text-gray-700 max-w-3xl">
The quick brown fox jumps over the lazy dog. Use CP for supporting copy inside cards,
metrics, and short descriptions.
</CP>
</div>
</div>
</div>
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
{/* ✅ Bottom horizontal line with spacing above footer */}
<div className="w-full border-b border-gray-100" />
</div>
)
}