Onyx pricing
Three plans, the middle one lit
1280
1<section className="bg-[#0a0a0b] py-24 text-[#f2f2ef] md:py-32">2 <div className="mx-auto max-w-6xl px-6">3 <div className="mx-auto max-w-2xl text-center">4 <p className="font-mono text-[11px] tracking-[0.14em] text-[#c6f35e] uppercase">Pricing</p>5 <h2 className="mt-4 text-4xl leading-[1.05] font-medium tracking-[-0.03em] text-balance md:text-5xl">Start free. Pay when it earns its place.</h2>6 </div>7 <div className="mt-14 grid items-start gap-3 md:grid-cols-3">8 <div className="rounded-3xl bg-white/3 p-8 ring-1 ring-white/10">9 <h3 className="text-[15px] font-medium">Starter</h3>10 <p className="mt-1 text-sm text-white/50">For trying it on a real project.</p>11 <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em] tabular-nums">$0</span><span className="text-sm text-white/45">forever</span></p>12 <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-white/6 py-2.5 text-sm font-medium ring-1 ring-white/12 transition-[scale,background-color] duration-150 ease-out hover:bg-white/10 active:scale-[0.96]">Start for free</a>13 <ul className="mt-8 flex flex-col gap-3 text-sm text-white/70">14 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Up to 3 people</li>15 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>One project</li>16 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Community support</li>17 </ul>18 </div>19 <div className="rounded-3xl bg-[#131315] p-8 ring-1 ring-[#c6f35e]/50">20 <div className="flex items-center justify-between">21 <h3 className="text-[15px] font-medium">Team</h3>22 <span className="rounded-full bg-[#c6f35e] px-2.5 py-0.5 text-[11px] font-semibold text-[#0a0a0b]">Most picked</span>23 </div>24 <p className="mt-1 text-sm text-white/50">For teams that ship every week.</p>25 <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em] tabular-nums">$12</span><span className="text-sm text-white/45">per person, monthly</span></p>26 <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-[#c6f35e] py-2.5 text-sm font-medium text-[#0a0a0b] transition-[scale,background-color] duration-150 ease-out hover:bg-[#d6f886] active:scale-[0.96]">Try Team free</a>27 <ul className="mt-8 flex flex-col gap-3 text-sm text-white/80">28 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Unlimited people and projects</li>29 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Cycles, releases and roadmaps</li>30 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Every integration</li>31 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Same-day support</li>32 </ul>33 </div>34 <div className="rounded-3xl bg-white/3 p-8 ring-1 ring-white/10">35 <h3 className="text-[15px] font-medium">Company</h3>36 <p className="mt-1 text-sm text-white/50">For security reviews and scale.</p>37 <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em]">Custom</span></p>38 <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-white/6 py-2.5 text-sm font-medium ring-1 ring-white/12 transition-[scale,background-color] duration-150 ease-out hover:bg-white/10 active:scale-[0.96]">Talk to us</a>39 <ul className="mt-8 flex flex-col gap-3 text-sm text-white/70">40 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Single sign-on and audit log</li>41 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>A named person on our side</li>42 <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Uptime in writing</li>43 </ul>44 </div>45 </div>46 </div>47</section>