{"id":"56782ea8-9f0c-4014-8483-19394c2574e2","name":"Aurora LinkedIn Banner","slug":"aurora-linkedin-banner","category":"linkedin-banners","description":"A polished 1584×396 LinkedIn profile banner with your name and tagline over a deep hue-tunable gradient, accented by soft glowing shapes — text sits clear of the profile photo.","sample_params":{"hue":"210","kicker":"avamartinez.dev","name":"Ava Martínez","tagline":"Design engineer building delightful data products"},"spec":{"name":"aurora-linkedin-banner","width":1584,"height":396,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n*{margin:0;padding:0;box-sizing:border-box}\nhtml,body{width:100%;height:100%}\n.banner{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#fff;background:linear-gradient(112deg,hsl(var(--h) 48% 9%) 0%,hsl(var(--h) 52% 15%) 52%,hsl(calc(var(--h) + 42) 58% 22%) 100%)}\n.shape{position:absolute;z-index:0;border-radius:50%}\n.glow-a{width:560px;height:560px;top:-300px;right:-140px;background:radial-gradient(circle at 35% 35%,hsl(calc(var(--h) + 42) 85% 62% / .55),transparent 68%)}\n.glow-b{width:460px;height:460px;bottom:-280px;left:340px;background:radial-gradient(circle at 50% 30%,hsl(var(--h) 80% 60% / .38),transparent 70%)}\n.ring{width:300px;height:300px;top:-110px;left:470px;border:2px solid hsl(calc(var(--h) + 42) 80% 70% / .35);background:none}\n.ring-sm{width:120px;height:120px;bottom:34px;right:210px;border:2px solid hsl(var(--h) 85% 75% / .4);background:none}\n.dot{width:16px;height:16px;background:hsl(calc(var(--h) + 42) 90% 68% / .8)}\n.dot-a{top:70px;right:430px}\n.dot-b{bottom:80px;left:600px;width:10px;height:10px;opacity:.7}\n.bar{position:absolute;z-index:0;top:0;bottom:0;right:96px;width:10px;background:linear-gradient(180deg,hsl(calc(var(--h) + 42) 85% 64% / .9),hsl(var(--h) 85% 58% / .25));transform:skewX(-14deg)}\n.bar-2{right:132px;width:4px;opacity:.5}\n.content{position:relative;z-index:1;margin-left:560px;max-width:820px}\n.kicker{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:hsl(calc(var(--h) + 42) 90% 76%);margin-bottom:16px}\n.kicker::before{content:'';display:block;width:44px;height:3px;border-radius:2px;background:hsl(calc(var(--h) + 42) 88% 66%)}\n.name{font-size:78px;font-weight:800;line-height:1.04;letter-spacing:-.02em;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.tagline{margin-top:14px;font-size:30px;font-weight:400;line-height:1.35;color:hsl(var(--h) 30% 86% / .92);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='banner' style='--h: {{.hue}}'\u003e\n  \u003cdiv class='shape glow-a'\u003e\u003c/div\u003e\n  \u003cdiv class='shape glow-b'\u003e\u003c/div\u003e\n  \u003cdiv class='shape ring'\u003e\u003c/div\u003e\n  \u003cdiv class='shape ring-sm'\u003e\u003c/div\u003e\n  \u003cdiv class='shape dot dot-a'\u003e\u003c/div\u003e\n  \u003cdiv class='shape dot dot-b'\u003e\u003c/div\u003e\n  \u003cdiv class='bar'\u003e\u003c/div\u003e\n  \u003cdiv class='bar bar-2'\u003e\u003c/div\u003e\n  \u003cdiv class='content'\u003e\n    {{if .kicker}}\u003cdiv class='kicker'\u003e{{.kicker}}\u003c/div\u003e{{end}}\n    \u003ch1 class='name'\u003e{{.name}}\u003c/h1\u003e\n    {{if .tagline}}\u003cp class='tagline'\u003e{{.tagline}}\u003c/p\u003e{{end}}\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"hue":{"type":"number","default":"210","maxLen":8,"description":"Base color hue in degrees (0-360): 210 blue, 265 violet, 160 teal, 20 amber."},"kicker":{"type":"string","maxLen":48,"description":"Small uppercase line above the name, e.g. a website, handle or role."},"name":{"type":"string","required":true,"maxLen":60,"description":"Your name or brand — the large headline of the banner."},"tagline":{"type":"string","maxLen":120,"description":"One-line tagline shown under the name."}}}}