forked from emre/www_projectmycelium_com
refactor: enhance MediaType typography section with download button and text primitive examples
- 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:
@@ -102,7 +102,7 @@ export function MediaColors() {
|
|||||||
<div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
|
<div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
|
||||||
<div>
|
<div>
|
||||||
<CT className="text-sm font-medium text-gray-200">Deep Gray</CT>
|
<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>
|
||||||
<div className="mt-4 h-16 w-full border border-gray-700 bg-[#121212]" />
|
<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>
|
<p className="mt-3 text-xs text-gray-500">Hex: #121212</p>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { H3, P, H4 } from '@/components/Texts'
|
import { Eyebrow, H3, P, H4, CT, CP } from '@/components/Texts'
|
||||||
|
|
||||||
export function MediaType() {
|
export function MediaType() {
|
||||||
return (
|
return (
|
||||||
@@ -12,15 +12,108 @@ export function MediaType() {
|
|||||||
{/* Inner padding */}
|
{/* Inner padding */}
|
||||||
<div className="px-6 lg:py-12">
|
<div className="px-6 lg:py-12">
|
||||||
<div className="max-w-7xl lg:pl-6">
|
<div className="max-w-7xl lg:pl-6">
|
||||||
<H3 as="h1" className="mt-4">
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<H3 as="h1" className="mt-0 text-gray-900">
|
||||||
Typography
|
Typography
|
||||||
</H3>
|
</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>
|
</div>
|
||||||
{/* ✅ Bottom horizontal line with spacing */}
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* ✅ Bottom horizontal line with spacing above footer */}
|
||||||
<div className="w-full border-b border-gray-100" />
|
<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>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user