Drop the brutalist hazard-tape vocabulary in favor of refined modern SaaS: white cards on zinc-50, soft ring-1 zinc-200 borders (no hard 2px black), rounded-full pills, sans for chrome + mono for tabular data, emerald replacing yellow as the saturated accent. Theme color shifts to zinc-900 with an emerald dot on the icon.
49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
|
|
export const size = { width: 512, height: 512 };
|
|
export const contentType = "image/png";
|
|
|
|
export default function Icon() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "#18181b",
|
|
borderRadius: 96,
|
|
color: "white",
|
|
fontFamily: '"Helvetica", "Arial", sans-serif',
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: 280,
|
|
fontWeight: 600,
|
|
letterSpacing: "-12px",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
CM
|
|
</span>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 64,
|
|
right: 64,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 999,
|
|
background: "#10b981",
|
|
}}
|
|
/>
|
|
</div>
|
|
),
|
|
size,
|
|
);
|
|
}
|