Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <section class="hero"> <div class="copy"> <h1>Design systems that scale</h1> <p>Unify design and engineering with a shared language of tokens, components, and guidelines.</p> <a class="cta" href="#">Get started</a> </div> <div class="visual"> <h2>Release highlights</h2> <ul> <li>Theme builder with live preview</li> <li>Component usage analytics</li> <li>Accessibility score tracking</li> </ul> </div> </section> <section class="features"> <article> <h3>Token management</h3> <p>Promote core spacing, color, and typography values across apps.</p> </article> <article> <h3>Component lifecycles</h3> <p>Track usage, adoption, and deprecation with analytics dashboards.</p> </article> <article> <h3>Design reviews</h3> <p>Automate review workflows and close the loop between design and code.</p> </article> </section> </body> </html>
body { font-family: "Inter" , sans-serif; margin: 0; color: #0f172a; } .hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 88px clamp(24px, 6vw, 80px); background: linear-gradient(120deg, #2563eb 0%, #7c3aed 50%, #0f172a 100%); color: #fff; } .hero .copy { grid-column: span 6; max-width: 480px; } .hero .visual { grid-column: span 6; background: rgba(255,255,255,0.09); border-radius: 24px; padding: 40px; } .features { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: clamp(32px, 5vw, 80px); } .features article { border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px; background: #fff; } @media (max-width: 900px) { .hero .copy, .hero .visual { grid-column: 1 / -1; } }
